Develop Reference

Ace editor (form) - Can I preserve line breaks/text format?

Working on a project for my school building an MVC Sinatra application. I want to create a web app that can save and display back snippets/algos using ace editor.
I figured out how to (seemingly) capture form input through ace editor by hiding the input field and assigning the value from ace on change with the snippet below.
//CAPTURE/SET VALUE
var textarea = $('input[name="content"]');
editor.getSession().on("change", function () {
textarea.val(editor.getSession().getValue());
});
my form looks like this
<!--ACE EDITOR-->
<div id="editor"></div>
To open settings panel, inside editor - CTRL+Q (Windows) | CMD+Q (Mac)
<!--------------------------------------------------------->
<!--FORM-->
<form action="/ace" method="POST">
<!--normal-->
<input type="text" name="content" style="display: none;" />
<!--submit-->
<input type="submit" value="Save">
</form>
I can capture the params fine but the problem is it doen't preserve the line breaks so entering...
def something
end
into ace editor and clicking submit gives me back
"def something end"
when I would love in theory to get something like
"def something\n\nend"
or something of the sort.. you get the drift
I need to be able to somehow use the editor to capture input, and on submit assign that to an object attribute so pseudo
snippet = Snippet.new(:content => params[:content])
then be able to call that back and display back on editor in the right format
snippet.content (preserves linebreaks)
Full code and images HERE if you rather visuals.
Any help would be appreciated and if there is anything I'm missing out please let me know.. hope I've supplied sufficient info and detailed properly.

input doesn't accept newlines, you need to use textarea instead.

How to you get the contents of an iFrame to insert into a database?

I have created a wysiwyg text editor using an iframe and am trying to save the contents of this.
The HTML for my iframe is:
<iframe name="richTextField" id="wysiwyg" src="page?page_id=3"></iframe>
I am then using a hidden input to submit this to the database:
<input type="hidden" id="text_content" name="text_content" value="">
I am trying to get the contents of this into the value of the input field using JS like this:
$text_content = #wysiwyg.document.getElementsByTagName('body')[0].textContent;
$("#text_content").attr("value", $text_content);
If I set $text_content to just a random string it will work but it won't get the contents of the iframe.
I have tried $("#wysiwyg document body").textContent, #wysiwyg.document.getElementsByTagName('body')[0].textContent and richTextField.document.getElementsByTagName('body')[0].textContent.
richTextField.document.getElementsByTagName('body')[0].textContent is actually what I used in the JS for toggling to the source but it will not work when trying to set it as a variable.
Should I be trying to do something like php serialize() to get this as a variable I can work with? Or are the terms I've tried as my selectors just wrong? Any help with this will be greatly appreciated.

For future reference, this is what I used:
richTextField.document.getElementsByTagName('body')[0].innerHTML;

HTML Rich-Text to Plain-Text by TextArea control

I am reading some rich-content text from server and trying to display it in a grid in plain-text format. That's where i got this problem. I am not able to get rid of html styling tags. I dont want to write some dirty JS/Jquery code to remove HTML styling tags as it is not possible to handle all of the tags. So I thought to do a trick and created a hidden textarea on HTML page:
<textarea name="textarea" id="temp_desc" rows="10" cols="50" style="visibility: hidden"></textarea>
In JS, when I read data from server, I write it in this textarea and then read it back so that all html tags should strip down but It is not working. The html tags themselves get written in this textarea:
document.getElementById("temp_desc").value = Description;
Description = document.getElementById("temp_desc").value;
Any other suggestions how can i make this work?
Thanks.

I solved this problem by using DIV instead of textarea and JQuery method .text().
HTML:
<div id="temp_desc" style="visibility: hidden"></div>
JS:
$("#temp_desc").html(Description);
var descHiddenDIV = document.getElementById("temp_desc");
var temp_description = $(descHiddenDIV).text();
After executing above JS code, temp_description contains plain-text.

Pass textarea value from WYSIWYG CKEditor

I'm trying to pass the input I made in a WYSIWYG editor (CK Editor) to JQuery. Currently it's blank no matter what I input.
HTML:
<textarea type='text' class="ckeditor reply" name='reply'></textarea>
<button type="button" STYLE="align: right;" class="btn btn-info reply_button yGreenButton">Submit Reply</button>
JS:
<script>
$(function()
{
$('.reply_button').click(function(){
var reply=$(this).siblings('.reply').val();
});
});
</script>
The textarea shows up as CKeditor. The current value alerted from the clicking the reply_button is blank, no matter what I put in the CKeditor textarea. How to get the actual content I input to be alerted?
Advice is hugely appreciated.
Best,

It's a CKEditor, you have to use their API:
var editor = CKEDITOR.replace( '.ckeditor' );
editor.getData();
The API docs can be found here.

You've got two options - you can use CKEditor API directly, or CKEditor adapter for jQuery.
To use CKEditor API directly, you need the editor instance. You can get it from the CKEDITOR.instances object using id or name of related textarea or automatically generated name ('editor1', 'editor2', etc). In your case:
var editor = CKEDITOR.instances.reply;
var val = editor.getData();
To use jQuery adapter, you need to load adapters/jquery.js file after ckeditor.js and then you can retrieve value easily:
var val = $( '.ckeditor' ).val();
Just like you would use normal textarea. Read more in the jQuery adapter guide and check the CKEditor with jQuery sample.

jquery .html shows html tags instead of applying html tags on the text

My code is
printMsg : function(data) {
$("#message").html(data.bodyText);
...
}
here
data.bodyText = <strong> Test This Text ;/strong>
I am suppose to display data as Test This Text & for that I did
$("#message").html(data.bodyText);
This displayed the text correctly with jquery previous versions (1.9)
Now with jquery 1.10 it displays
<strong> Test This Text </Strong>
Can you please tell me reason for this? & any solution if you have?

are you trying to do something like this?
in jquery 1.10.1 it seems work normally
HTML
<span id='message'></span>
JS
var data = {};
data.bodyText = "<strong>Test This Text;</strong>";
$("#message").html(data.bodyText);