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

Question

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

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

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

但是,由于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实例在引用document属性时还没有准备好.所以你必须调用"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);
});

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