使用 jQuery 从 CKEditor 的 iframe 中获取内容

Question

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

问题是，序列化设法正确获取所有字段，除了在 CKEditor 中输入的实际内容。 与其他所见即所得编辑器一样，该编辑器也将 iframe 覆盖在现有文本框上。 Serialize 会忽略 iframe，只在文本框中查找内容，当然，它找不到内容，因此返回空白内容正文。

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

然而，由于 CKEditor 仍处于测试阶段并且严重缺乏文档，我找不到合适的 API 调用来帮助我做到这一点。

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

Answer 1

另一个通用解决方案是每当您尝试提交表单时运行以下命令

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

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

Answer 2

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

Answer 3

我今天也一直在努力解决这个问题。 我意识到上面的代码对我不起作用的原因是因为引用文档属性时 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);
}

Answer 4

这应该可以做到...

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

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

Answer 5

我在这方面取得了成功：

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

Answer 6

我采取了稍微不同的方法，我认为使用 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(); 
}

Answer 7

这样做不是更好吗：

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

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

Answer 8

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

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

Answer 9

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

Answer 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;
    });
 });

Answer 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();
}