ckeditor 更新文本区域

Question

我正在尝试让 ckeditor 工作。显然它没有使用文本区域，因此提交表单时不会在编辑器中提交文本。因为我使用多态关联等，所以​​我无法创建 onsubmit 函数来获取 textarea 的值（当提交表单时）。

所以我发现了这个问题： Using jQuery to scrap the content from CKEditor's iframe

有一些非常好的答案。那里发布的答案使文本区域保持最新。这非常好，正是我所需要的！不幸的是我无法让它工作。 有人知道为什么（例如）这不起作用吗？

我有一个文本区域（rails，但它只是转换为普通文本区域）：
<代码> <%= 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(); 
}

我在 Firebug 中收到以下“错误”。
<代码> 参数列表后缺少 ) [中断此错误] 函数 CK_jQ()\n

Answer 1

以上所有答案都集中在如何修复此错误，但我想回答导致我出现此错误的原因，

我已更改

<textarea class="ckeditor" rows="6" name="Cms[description]"></textarea>

为

<textarea class="ckedit" rows="6" name="Cms[description]"></textarea>

我将类属性值更改为 ckeditor 以外的任何内容，并且繁荣错误消失了。

希望有帮助

Answer 2

最新版本的 CKEditor 进行了一些 API 更改，因此这里是 CKEditor 5 的答案：

let ckeditor;

// Create a CKEditor, and store its handle someplace that you may
// access later. In this example, we'll use the `ckeditor` variable:
ClassicEditor
  .create(document.querySelector("textarea"), {})
  .then(editor => { ckeditor = editor; });

// When your form submits, use the `updateSourceElement` method
// on the editor's handle:
document.querySelector("form").addEventListener("submit", function() {
  ckeditor.updateSourceElement();
});

据我所知，CKEditor 会在您提交表单时自动执行此操作，因此这个特定示例实际上不应该执行任何操作。但当您需要更新文本区域的内容而不提交包含它的表单时，它很有用。

Answer 3

负载时：

$(function () {
  setTimeout(function () {
    function CK_jQ(instance) {
      return function () {
        CKEDITOR.instances[instance].updateElement();
      };
    }

    $.each(CKEDITOR.instances, function (instance) {
      CKEDITOR.instances[instance].on("keyup", CK_jQ(instance));
      CKEDITOR.instances[instance].on("paste", CK_jQ(instance));
      CKEDITOR.instances[instance].on("keypress", CK_jQ(instance));
      CKEDITOR.instances[instance].on("blur", CK_jQ(instance));
      CKEDITOR.instances[instance].on("change", CK_jQ(instance));
    });
  }, 0 /* 0 => To run after all */);
});

Answer 4

我只是将其添加到 TJ 的响应中并为我工作：

$("form").on("submit", function(e){
    $('textarea.ckeditor').each(function () {
       var $textarea = $(this);
       $textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
    });
});

Answer 5

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

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

Answer 6

只需添加

CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances. textAreaClientId.updateElement();});

其中 textAreaClientId 是您的实例名称

问候

Answer 7

添加用于更新的函数 JavaScript

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

它的工作。凉爽的

Answer 8

将以上所有答案合二为一。

创建一个新的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 9

感谢@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 10

你想出来了吗？

我正在使用 CKEditor 版本 3.6.1 和 jQuery 表单提交处理程序。提交时文本区域为空，这对我来说是不正确的。不过，您可以使用一个简单的解决方法，假设您的所有 CKEditor 文本区域都具有 css 类 ckeditor。

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

在进行提交处理之前执行上述操作。表单验证。

Answer 11

提交之前执行以下操作：

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