Ckeditor更新textarea

Question

我想让ckeditor工作.显然它没有使用textarea所以提交表单不会在编辑器中提交文本.因为我使用了多态关联等.我不能使用onsubmit函数来获取textarea的值(当提交表单时).

所以我发现了这个问题:使用jQuery从CKEditor的iframe中获取内容

有一些非常好的答案.在那里发布的答案使textarea保持最新.这非常好,正是我需要的!不幸的是我无法让它发挥作用.有人知道为什么(例如)这不起作用？

我有一个textarea(rails但它只是转换为普通的textarea):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>

以下是js:

if(CKEDITOR.instances.ckeditor ) {
  CKEDITOR.remove(CKEDITOR.instances.ckeditor);
}
CKEDITOR.replace( 'ckeditor',
{
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]});


CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);

//and paste event
this.document.on("paste", CK_jQ);
}

function CK_jQ()
{
 CKEDITOR.instances.ckeditor.updateElement(); 
}

我在我的萤火虫中得到以下"错误".
missing ) after argument list [Break on this error] function CK_jQ()\n

Answer 1

在提交之前:

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

Answer 2

你弄清楚了吗？

我正在使用带有jQuery表单提交处理程序的CKEditor版本3.6.1.提交textarea是空的,这对我来说是不正确的.但是,您可以使用一个简单的解决方法,假设您的所有CKEditor textareas都有css类ckeditor.

$('textarea.ckeditor').each(function () {
   var $textarea = $(this);
   $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});

在进行提交处理之前执行上述操作即.表格验证.

Answer 3

感谢@JohnDel的信息,我使用onchange来更新每一个更改.

CKEDITOR.on('instanceReady', function(){
   $.each( CKEDITOR.instances, function(instance) {
    CKEDITOR.instances[instance].on("change", function(e) {
        for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
    });
   });
});

Answer 4

将上述所有答案合二为一.

创建一个新的custom.js文件并添加:

CKEDITOR.on('instanceReady', function(){
  $.each( CKEDITOR.instances, function(instance) {

    CKEDITOR.instances[instance].on("instanceReady", function() {
      this.document.on("keyup", CK_jQ);
      this.document.on("paste", CK_jQ);
      this.document.on("keypress", CK_jQ);
      this.document.on("blur", CK_jQ);
      this.document.on("change", CK_jQ);
    });
  });

});

function CK_jQ() {
  for ( var instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); }
}

您不必担心textarea的名称,只需在textarea中添加一个类ckeditor,上面就完成了.

Answer 5

添加功能JavaScript进行更新

function CKupdate() {
  for (instance in CKEDITOR.instances)
    CKEDITOR.instances[instance].updateElement();
}

是工作。凉