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

Question

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

jqueryajaxckeditor

58

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

但是，CKEditor的内容无法保存到表中。

我没有进行页面回发。

我该怎么办？

- pegasus

15个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hamed hossani · Answer 1

我通过在工具箱中添加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);

- t.. · Answer 2

获取编辑器内文本或其长度的简单方法 :)

 var editorText = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData();
 alert(editorText);

 var editorTextLength = CKEDITOR.instances['<%= your_editor.ClientID %>'].getData().length;
 alert(editorTextLength);

- Amdadol Haque · Answer 3

我认为最好的方法是用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;
});

- Sam NIE · Answer 4

0

版本 4.6

CKEDITOR.instances.editor.getData()

- Sam NIE

2

虽然答案可能是正确的，但很难理解为什么这是答案。请为社区的利益添加简要说明。 - blurfus

1

欢迎来到 Stack Overflow :-) 请查看 [答案]。您应该提供一些信息，说明您的代码如何解决问题。仅有代码的答案对社区没有用处。 - JimHawkins

- Mike · Answer 5

首先，您应该在页面中包含 ckeditor 和 jquery 连接器脚本，然后创建一个文本区域。

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

就是这样！:)