ckeditor 更新文本区域答案

【问题标题】：Ckeditor update textareackeditor 更新文本区域
【发布时间】：2011-03-10 00:38:45
【问题描述】：

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

于是我发现了这个问题：Using jQuery to grab the content from CKEditor's 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

【问题讨论】：

好的，上面的代码当然有错误。有一个）丢失：P（但仍然无法正常工作
请将标题更改为 Ckeditor 4 update textarea

标签： textarea ckeditor

【解决方案1】：

提交前做：

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

【讨论】：

但是 OP 已经一直在调用 updateElement 并且它仍然对 OP 不起作用，这可能就是为什么这不是这里的答案。
@Nenotlep：接受的答案基本相同，但我的答案是一种解决方法，因为 CKEDITOR 已经提供了 updateElement
@sldev：我同意你的解决方案更好，我试图指出他已经在他的解决方案中调用了 updateElement()，尽管在提交之前不像你的位置那么合乎逻辑:)
效果很好。令我震惊的是为什么 CKEditor 的默认保存操作不能以这种方式工作。
别忘了if (CKEDITOR.instances.hasOwnProperty(instanceName)) {

【解决方案2】：

你明白了吗？

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

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

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

【讨论】：

原型解决方案相同：$$('textarea._cke').each( function(T) { T.update( CKEDITOR.instances[T.id].getData() ); } );
@TJ- 我是 Jquery 的新手，我不知道它是如何工作的？你能写一行代码来提醒 ckeditor 的值吗？我正在尝试：-alert($textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData()));。请...
@J.J.在提醒之前，将 textarea 的 jquery 对象分配给 $textarea。 var $textarea = $('textarea.mytextarea'); 然后使用alert(CKEDITOR.instances[$textarea.attr('name')].getData())。在应用 ckeditor 后执行此操作。
谢谢，节省了我很多时间
我认为你必须使用 $textarea.html() 而不是 .val()

【解决方案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();
    });
   });
});

【讨论】：

我希望 CKEDITOR 默认这样做，我真的看不出有什么理由不这样做？
instanceReady 为您拥有的每个编辑器实例触发。所以如果你有多个实例这将绑定onChange 事件多次做很多不必要的工作。您应该使用提供给instanceReady 回调的the event parameter 而不是$.each(...)，并获取其editor 属性，该属性是刚刚调用其instanceReady 事件的编辑器实例。
这个也适用于多个文本区域，由 ajax 加载并使用 CKEDITOR.replace('item', language)。

【解决方案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，以上就大功告成了。

【讨论】：

【解决方案5】：

为更新添加函数 JavaScript

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

这是工作。酷

【讨论】：

【解决方案6】：

只需添加

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

textAreaClientId 是您的实例名称

问候

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

我只是增加了 T.J. 的回应。并为我工作：

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

【讨论】：

【解决方案9】：

加载中：

$(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 */);
});

【讨论】：

【解决方案10】：

以上所有答案都集中在如何解决这个错误，但我想回答导致我这个错误的原因

我有一个

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

改为

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

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

希望有所帮助

【讨论】：