1. 首页
  2. 问答
  3. 如何使用JQuery获取CKEditor的内容？

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

2010-09-26 75 views

回答

-22

首先，你应该在你的页面的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();

就是这样！ :)

来源

2010-09-26 19:17:43 Mike

+0

感谢的答案，但我不回发页面，这就是为什么我不能得到ckeditor的内容。我的问题是我如何获得ckeditor的内容而无需使用jquery回发。 – pegasus 2010-09-26 22:20:28

+3

下面的答案好多了。 – 2012-06-20 22:06:45

+39

这是我第一次看到这样一个负面的投票答案作为接受的答案。难以置信。 – 2013-04-18 13:54:10

174

使用实例上的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的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! 
});

来源

2010-12-17 20:45:25 Aeon

+0

这工作令人难以置信。我无法弄清楚怎么样，终于找到了这个！谢谢！ – Reaction21 2011-11-22 14:31:00

+6

这应该是被接受的答案，而不是上面的那个 – ianace 2011-11-23 00:15:22

+3

这似乎不适用于最新版本的CKEditor（4.0.2 - 2013年3月6日）。但是，下面的答案是：'CKEDITOR.instances ['DOM-ID-HERE']。getData（）;' – Laoujin 2013-03-18 08:44:04

62

如果你不”你可以参考编辑，如Aeon的回答，你也可以本身的形式：

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

来源

2011-12-19 18:51:34 jverdi

+4

+1的更新给您，先生。花费时间寻找如何从CKEDITOR的1个实例（其中有通过类“编辑器”初始化的X实例）获取数据。结束于：var strData = CKEDITOR.instances ['editor_'+ intCounter] .getData（）;' - 如果它对其他人有用。 – 2013-02-14 11:27:05

0


i加在工具箱添加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);

来源

2012-12-05 10:38:21

+0

嗨，对于我返回'undefined'.i由dll文件添加。 – 2012-12-13 22:50:54

6

我跟尤其是对于现场AJAX处理时getData()没有工作，每次的问题。

之所以能够通过运行绕过它：

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

然后使用jQuery得到textarea的价值。

来源

2014-01-14 11:03:30

2

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

来源

2014-11-04 05:28:20

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

替换YourInstanceName与实例的名称，你会得到想要的结果。

来源

2015-01-03 15:41:43 Mukaram

0

我认为这将是更好的，只是通过序列化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; 
});

来源

2015-06-03 08:08:02

1

现在jQuery adapter存在，这个答案需要更新：

假设您发起编辑$('.ckeditor').ckeditor(opt)那么你$('.ckeditor').val()

来源

2015-08-20 06:26:05 Benj

+0

在提问时，我不认为jQuery适配器存在。尽管谢谢你的回答，但这些日子绝对是一种有效的方式。 – Aeon 2015-10-09 04:00:38

+0

当然，我相应地更新了我的回答的介绍 – Benj 2015-10-09 05:51:21

+1

这对我没有帮助。空字符串结果。 – Martijn 2017-02-09 08:56:49

0

版本中获得的价值4.6

CKEDITOR.instances.editor.getData()

来源

2017-02-09 05:09:14

+2

虽然答案可能准确，但很难理解为什么这是答案。请为社区的利益添加简要说明 – ochi 2017-02-09 07:11:13

+1

欢迎使用堆栈溢出:-) 请看[答]。您应该提供一些信息，说明为什么您的代码可以解决问题。 仅有代码的答案对社区没有用处。 – JimHawkins 2017-02-09 09:20:58

相关问题

 相关问题