使用 jQuery 从 CKEditor 的 iframe 中抓取内容答案

【问题标题】：Using jQuery to grab the content from CKEditor's iframe使用 jQuery 从 CKEditor 的 iframe 中抓取内容
【发布时间】：2010-10-29 18:39:07
【问题描述】：

我有一个自定义编写的 CMS，它使用 CKEditor *(FCKEditor v3) 来编辑内容。我还使用 jQuery Validation 插件在基于 AJAX 的提交之前检查所有字段是否有错误。我正在使用 serialize() 函数将数据传递到 PHP 后端。

问题是，序列化设法正确地抓取所有字段，除了在 CKEditor 中键入的实际内容。与其他所有 WYSIWYG 编辑器一样，这个编辑器也将 iframe 覆盖在现有文本框上。并且 serialize 忽略 iframe 并且只查看文本框的内容，当然，它没有找到，因此返回一个空白的内容正文。

我的方法是在 CKEditor 的 onchange 事件上创建一个挂钩，并同时更新文本框（CKEDITOR.instances.[textboxname].getData() 返回内容）或其他一些隐藏字段在编辑器中进行的任何更改。

但是，由于 CKEditor 仍处于 beta 阶段并且严重缺乏文档，我找不到合适的 API 调用来让我这样做。

有人知道如何解决这个问题吗？

【问题讨论】：

我已经想出了从 iframe 中获取内容的方法： $( '#cke_contents_body iframe' ).contents().find( 'body' ).html()...最接近的直接可寻址元素是 id 为“cke_contents_body”的 td。 CKEditor 用这个 td 包装 iframe。
还有待解决.. 一种通过挂钩 CKEditor 的更改事件来使用数据自动更新文本框的方法。有任何想法吗？有人吗？
新CKEditor版本解决了这个问题

标签： jquery ajax serialization iframe ckeditor

【解决方案1】：

应该这样做...

CKEDITOR.instances["editor1"].document.on('keydown', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

CKEDITOR.instances["editor1"].document.on('paste', function(event)
{
    CKEDITOR.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
});

编辑：添加部分以在粘贴后更新文本框...

【讨论】：

感谢您的回复...但它一直告诉我：“CKEDITOR.instances.editor1.document 未定义”！！
顺便说一句，你能解释一下为什么你在这里使用 setTimeout 而不是直接在击键时复制内容吗？
将 editor1 替换为您的文本框名称。 setTimeout 是为了确保我们在添加按下的键之后而不是之前获得内容。
你指的是keyup？
@spons 事后看来，是的，keyup 可能会更好。

【解决方案2】：

我今天也一直在尝试解决这个问题。我意识到上面的代码对我不起作用的原因是因为在引用文档属性时 CKEditor 实例还没有准备好。因此，您必须调用“instanceReady”事件，并且可以在其中使用文档的事件，因为在此之前它不存在。

这个例子可能对你有用：

CKEDITOR.instances["editor1"].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.tools.setTimeout( function()
    { 
        $("#editor1").val(CKEDITOR.instances.editor1.getData()); 
    }, 0);
}

【讨论】：

$("#editor1").val(CKEDITOR.instances.editor1.getData());工作感谢

【解决方案3】：

我刚刚发布了一个用于 jQuery 的 CKEditor 插件，它将在后台处理所有这些，而无需任何额外的代码： http://www.fyneworks.com/jquery/CKEditor/

【讨论】：

很酷的东西。谢谢。这确实很容易。
此链接已于 2018-09-14 断开

【解决方案4】：

我采取了一种稍微不同的方法，我认为使用 ckeditor 的更新功能会更好，并且由于使用了 keyup，因此不需要超时

CKEDITOR.instances["editor1"].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.editor1.updateElement(); 
}

【讨论】：

【解决方案5】：

对此的另一种通用解决方案是在您尝试提交表单时运行以下命令

for ( instance in CKEDITOR.instances )
            CKEDITOR.instances[instance].updateElement();

这将强制表单中的所有 CKEDITOR 实例更新它们各自的字段

【讨论】：

@J.J.是的。它是应该在表单的submit 事件上运行的javascript代码（或之前的任何时间）。
Gaby aka G. Petrioli - 谢谢。

【解决方案6】：

我成功了：

console.log(CKEDITOR.instances.editor1.getData());

【讨论】：

【解决方案7】：

这样做不是更好吗：

CKEDITOR.instances.editor1.on('contentDom', function() {
          CKEDITOR.instances.editor1.document.on('keyup', function(event) {/*your instructions*/});
        });

参考：http://cksource.com/forums/viewtopic.php?f=11&t=18286

【讨论】：

【解决方案8】：

contentDom 事件对我有用，而不是 instanceReady...我真的很想知道这些事件是什么，但我认为它们是专有的...

var editor = CKEDITOR.replace('editor');

CKEDITOR.instances.editor.on("instanceReady", function(){
    this.on('contentDom', function() {
        this.document.on('keydown', function(event) {
            CKEDITOR.tools.setTimeout( function(){ 
                $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
            }, 1);
        });
    });
    this.on('contentDom', function() {
        this.document.on('paste', function(event) {
            CKEDITOR.tools.setTimeout( function(){ 
                $(".seldiv").html(CKEDITOR.instances.editor.getData()); 
            }, 1);
        });
    });
    edits_clix();
    var td = setTimeout("ebuttons()", 1);
})

【讨论】：

在调试/重写所有内容近 4 小时后，您的回答拯救了我。我所写的使用“instanceReady”基本上可以正常工作，但它在内容中的 AJAXed 上根本不起作用。只是想说声谢谢。

【解决方案9】：

CKEDITOR.instances.wc_content1.getData() 将返回 ckeditor 数据
CKEDITOR.instances.wc_content1.setData() 将设置 ckeditor 数据

【讨论】：

【解决方案10】：

我认为用户在询问有关序列化的问题，我正在努力序列化要提交的表单，这给我带来了很多问题。

这对我有用：

$(document).ready(function() {
$('#form').submit(function(){
if ( CKEDITOR.instances.editor1.getData() == '' ){
    alert( 'There is no data available' );//an alert just to check if its working
}else{
    var editor_data = CKEDITOR.instances.editor1.getData();
    $("#editor1").val(editor_data); //at this point i give the value to the textarea
    $.ajax({ 
                    //do your ajax here  

                     });

        }
return false;
    });
 });

【讨论】：

【解决方案11】：

我用当前版本解决了这个问题：http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js

在 第 55 行 this.submit( function( event ) { - 我添加了这段代码：

if (typeof CKEDITOR !== "undefined") {
    for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
}

【讨论】：