如何使用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
