How can I get the contents of CKEditor using jQuery?

Question

I am using CKEditor. I save form values ​​using ajax using page methods.

But the contents of the CKEditor value cannot be stored in the table.

I can not stand the page.

What can I do for this?

Answer 1

First of all, you should include ckeditor and jquery connector script on your page,

then create a text box

<textarea name="content" class="editor" id="ms_editor"></textarea> 

attach ckeditor to the text area, in my project I use something like this:

 $('textarea.editor').ckeditor(function() { }, { toolbar : [ ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo'], ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'], ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'], ['Link','Unlink','Anchor', 'Image', 'Smiley'], ['Table','HorizontalRule','SpecialChar'], ['Styles','BGColor'] ], toolbarCanCollapse:false, height: '300px', scayt_sLang: 'pt_PT', uiColor : '#EBEBEB' } ); 

on submit Get content using:

 var content = $( 'textarea.editor' ).val(); 

What is it!:)

Answer 2

use CKEditor.editor.getData () to call the instance. I.e:

HTML

 <textarea id="my-editor"> <input id="send" type="button" value="Send"> 

---

JS for CKEditor 4.0.x

 $('#send').click(function() { var value = CKEDITOR.instances['DOM-ID-HERE'].getData() // send your ajax request with value // profit! }); 

JS for CKEditor 3.6.x

 var editor = CKEDITOR.editor.replace('my-editor'); $('#send').click(function() { var value = editor.getData(); // send your ajax request with value // profit! }); 

Answer 3

If you do not keep a link to the editor, as in Aeon's answer, you can also use the form:

 var value = CKEDITOR.instances['my-editor'].getData(); 

Answer 4

 var value = CKEDITOR.instances['YourInstanceName'].getData() alert( value); 

Replace YourInstanceName name of your instance and you will get the desired results.

Answer 5

I had problems with getData() that do not work every time, especially when working with live ajax.

It was possible to get around it by running:

 for(var instanceName in CKEDITOR.instances){ CKEDITOR.instances[instanceName].updateElement(); } 

Then use jquery to get the value from the text box.

Answer 6

Thanks to John Magnolia. This is my postForm function that I use in my Symfony projects, and now works well with the CK Editor.

 function postForm($form, callback) { // Get all form values var values = {}; var fields = {}; for(var instanceName in CKEDITOR.instances){ CKEDITOR.instances[instanceName].updateElement(); } $.each($form.serializeArray(), function(i, field) { values[field.name] = field.value; }); // Throw the form values to the server! $.ajax({ type : $form.attr('method'), url : $form.attr('action'), data : values, success : function(data) { callback( data ); } }); 

Answer 7

Now that the jQuery adapter exists, this answer needs to be updated:

Say that you initiated the editor using $('.ckeditor').ckeditor(opt) , after which you get the value using $('.ckeditor').val()

Answer 8

I am adding ckEditor by adding a DLL to the toolBox.
html code:

 <CKEditor:CKEditorControl ID="editor1" runat="server" BasePath="ckeditor" ContentsCss="ckeditor/contents.css" Height="250px" TemplatesFiles="ckeditor/themes/default/theme.js" FilebrowserBrowseUrl="ckeditor/plugins/FileManager/index.html" FilebrowserFlashBrowseUrl="ckeditor/plugins/FileManager/index.html" FilebrowserFlashUploadUrl="ckeditor/plugins/FileManager/index.html" FilebrowserImageBrowseLinkUrl="ckeditor/plugins/FileManager/index.html" FilebrowserImageBrowseUrl="ckeditor/plugins/FileManager/index.html" FilebrowserImageUploadUrl="ckeditor/plugins/FileManager/index.html" FilebrowserUploadUrl="ckeditor/plugins/FileManager/index.html" BackColor="#FF0066" DialogButtonsOrder="Rtl" FontNames="B Yekan;B Yekan,tahoma;Arial/Arial, Helvetica, sans-serif; Comic Sans MS/Comic Sans MS, cursive; Courier New/Courier New, Courier, monospace; Georgia/Georgia, serif; Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif; Tahoma/Tahoma, Geneva, sans-serif; Times New Roman/Times New Roman, Times, serif; Trebuchet MS/Trebuchet MS, Helvetica, sans-serif; Verdana/Verdana, Geneva, sans-serif" ResizeDir="Vertical" ResizeMinHeight="350" UIColor="#CACACA">dhd fdh</CKEditor:CKEditorControl> 

to receive data.
JQuery:

 var editor = $('textarea iframe html body').html(); alert(editor); 

Answer 9

I think it would be better, just serialize your form with jquery and greetings ...

 <form id="ajxForm"> <!-- input elments here --> <textarea id="ck-editor" name="ck-editor" required></textarea> <input name="text" id="text" type="text" required> <form> 

and in javascript section

 CKEDITOR.replace('ck-editor', { extraPlugins: 'sourcedialog', removePlugins: 'sourcearea' }); $("form#ajxForm").submit(function(e) { e.preventDefault(); var data = $(this).serialize(); if (data != '') { $.ajax({ url: 'post.php', cache: false, type: 'POST', data: data, success: function(e) { setTimeout(function() { alert(e); }, 6500); } }); } return; }); 

Answer 10

version 4.6

 CKEDITOR.instances.editor.getData() 

Answer 11

You can restore the data as follows:

 <script> var data = CKEDITOR.instances.editor1.getData(); // Your code to save "data", usually through Ajax. </script> 

link: http://docs.ckeditor.com/#!/guide/dev_savedata