How to get the value from the textarea

Question

I'm working on a project where I use CKEditor. I have an panel with several properties to create a tooltip. I choose CKEditor to insert the content into the tooltip, because its great for the users.

All works fine if I use a normal textarea to insert the content I want. But instead a normal textarea i want to use CKEditor. I don't know what happened but the tooltip doesn't get the content I write.

Someone can give me hand?

// Normal textarea, this works
<textarea id="editor1" autocomplete="off"></textarea>

The script with CKEditor:

<textarea id="editor1" name="editor1" autocomplete="off"></textarea>
<script type="text/javascript">
    CKEDITOR.replace( 'editor1' );
</script>

I have read about the JavaScript code to insert ckeditor.instances ... and so on, but i can't figure it out how it works.

Answer 1

try this code

Documentation

$('#editor1').ckeditor(); // to add ckeditor to textbox

$('#editor1').val(); // fetching value from textbox

don't forget to add jQuery files

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js">

Answer 2

CKEditor library registers a global variable (object) CKEDITOR (refers to window.CKEDITOR ):

console.log( CKEDITOR );
> Object {...}

When you create an instance , let's say with CKEDITOR.replace() , it's registered in CKEDITOR.instances object . The key in this object corresponds to the name of the instance.

console.log( CKEDITOR.instances.editor1 );
> Object {...}

This is the way you access the API of your editor, until you destroy it. So if you want to retrieve data from your editor, basically call:

console.log( CKEDITOR.instances.editor1.getData() );
> "<p>Some text</p>"

If you want to use jQuery to play with CKEditor, there's an official wrapper (adapter) for CKEditor API.

Also, considering the fact that you want to use CKEditor to produce HTML for some tooltip, you may want to avoid creating paragraphs by the editor (default behavior). You can do that by setting the configuration option : config.enterMode to CKEDITOR.ENTER_BR . See the article about configuring CKEditor.