如何使用 JQuery 获取 CKEditor 的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3799317/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i get content of CKEditor using JQuery?
提问by pegasus
I'm using CKEditor. I am saving the form values with ajax using page methods.
我正在使用 CKEditor。我正在使用页面方法使用 ajax 保存表单值。
But the content of CKEditor value cannot be saving into the table.
但是CKEditor 值的内容不能保存到表中。
I dont postback the page.
我不回发页面。
What can i do for that?
我能为此做什么？
采纳答案by Mike
First of all you should include ckeditor and jquery connector script in your page,
首先，您应该在页面中包含 ckeditor 和 jquery 连接器脚本，
then create a textarea
然后创建一个文本区域
<textarea name="content" class="editor" id="ms_editor"></textarea>
attach ckeditor to the text area, in my project I use something like this:
将 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' } );
on submit get the content using:
提交时使用以下方法获取内容：
var content = $( 'textarea.editor' ).val();
That's it! :)
就是这样！:)
回答by Aeon
use the CKEditor.editor.getData()call on the instance. That is to say:
在实例上使用CKEditor.editor.getData()调用。也就是说：
HTML
HTML
<textarea id="my-editor">
<input id="send" type="button" value="Send">
JS for CKEditor 4.0.x
CKEditor 4.0.x 的 JS
$('#send').click(function() {
var value = CKEDITOR.instances['DOM-ID-HERE'].getData()
// send your ajax request with value
// profit!
});
JS for CKEditor 3.6.x
CKEditor 3.6.x 的 JS
var editor = CKEDITOR.editor.replace('my-editor');
$('#send').click(function() {
var value = editor.getData();
// send your ajax request with value
// profit!
});
回答by jverdi
If you don't hold a reference to the editor, as in Aeon's answer, you can also use the form:
如果您没有对编辑器的引用，如 Aeon 的回答，您也可以使用以下表格：
var value = CKEDITOR.instances['my-editor'].getData();
回答by Mukaram
var value = CKEDITOR.instances['YourInstanceName'].getData()
alert( value);
Replace YourInstanceNamewith the name of your instance and you will get the desired results.
替换YourInstanceName为您的实例名称，您将获得所需的结果。
回答by John Magnolia
I was having issues with the getData()not working every time especially when dealing with live ajax.
我getData()每次都遇到无法正常工作的问题，尤其是在处理实时 ajax 时。
Was able 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 textarea.
然后使用jquery从textarea中获取值。
回答by Saman Shafigh
Thanks to John Magnolia. This is my postForm function that I am using in my Symfony projects and it is fine now to work with CK Editor.
感谢约翰木兰。这是我在 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 );
}
});
回答by Benj
Now that jQuery adapterexists, this answer needs to be updated:
现在jQuery 适配器存在，这个答案需要更新：
Say you initiated the editor with $('.ckeditor').ckeditor(opt)then you get the value with $('.ckeditor').val()
假设你启动了编辑器，$('.ckeditor').ckeditor(opt)然后你得到了值$('.ckeditor').val()
回答by Walid azouzi
you can retreive data like this :
您可以像这样检索数据：
<script>
var data = CKEDITOR.instances.editor1.getData();
// Your code to save "data", usually through Ajax.
</script>
reference : http://docs.ckeditor.com/#!/guide/dev_savedata
回答by Hemant Kumar
To get data of ckeditor, you need to get ckeditor instance
要获取ckeditor的数据，需要获取ckeditor实例
HTML code:
HTML代码：
<textarea class="form-control" id="reply_mail_msg" name="message" rows="3" data-form-field="Message" placeholder="" autofocus="" style="display: none;"></textarea>
Javascript:
Javascript：
var ck_ed = CKEDITOR.instances.reply_mail_msg.getData();
回答by t..
Easy way to get the text inside of the editor or the length of it :)
在编辑器中获取文本或其长度的简单方法:)
var editorText = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData();
alert(editorText);
var editorTextLength = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData().length;
alert(editorTextLength);
回答by deVaz
version 4.8.0
版本 4.8.0
$('textarea').data('ckeditorInstance').getData();
