如何使用JQuery获取CKEditor内容?

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?

我能做些什么呢?

12 个解决方案

#1

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! :)

就是这样!:)

#2

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

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

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

#3

If you don't hold a reference to the editor, as in Aeon's answer, you can also use the form:

如果你不像永旺回答的那样持有对编辑的引用，你也可以使用以下形式:

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

#4

I was having issues with the getData() not working every time especially when dealing with live ajax.

我遇到了getData()的问题，每次都不能正常工作，特别是在处理live 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获取值。

#5

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

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

将实例名替换为实例名，将得到所需的结果。

#6

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

#7

Now that jQuery adapter exists, 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()

#8

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

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

#9

i add ckEditor by adding DLL in toolBox.
html code:

我通过在工具箱中添加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" Resi*Height="350" UIColor="#CACACA">dhd fdh</CKEditor:CKEditorControl>

for get data of it.
jquery:

获取数据。jquery:

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

#10

I think it will be better, just serialize your form by jquery and cheers...

我觉得这样会更好，只要用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>

and In javascript section

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

#11

version 4.6

版本4.6

CKEDITOR.instances.editor.getData()

#12

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