如何使用JQuery获取CKEditor的内容?

我正在使用CKEditor。 我正在使用页面方法使用ajax保存表单值。

但CKEditor值的内容不能保存到表中。

我不回发页面。

我能为此做些什么?

首先,你应该在你的页面中包含ckeditor和jquery连接器脚本,

然后创build一个textarea

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

将ckeditor附加到文本区域,在我的项目中,我使用这样的东西:

 $('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' } ); 

在提交获取内容使用:

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

而已! 🙂

在实例上使用CKEditor.editor.getData()调用。 也就是说:

HTML

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

JS的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! }); 

如果你没有提到编辑的话,就像永旺的答案一样,你也可以使用下面的forms:

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

YourInstanceNamereplace为您的实例的名称,您将获得所需的结果。

我遇到的问题与getData()不工作,特别是当处理现场阿贾克斯。

能够通过运行来解决它:

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

然后使用jquery从textarea获取值。

感谢John Magnolia。 这是我在我的Symfony项目中使用的postForm函数,现在可以使用CK编辑器了。

 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 ); } }); 

现在, jQuery适配器存在,这个答案需要更新:

假设你用$('.ckeditor').ckeditor(opt)启动编辑器,那么你用$('.ckeditor').val()

我通过在工具箱中添加DLL添加ckEditor。
html代码:

 <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> 

获取它的数据。
jQuery的:

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

我认为这会更好,只是通过jQuery和欢呼序列化您的表单。

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

和在JavaScript部分

 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; }); 

版本4.6

 CKEDITOR.instances.editor.getData() 

你可以像这样检索数据:

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

参考: http : //docs.ckeditor.com/#!/guide/dev_savedata