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

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

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

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

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

Answer 9

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

Answer 10

我一直在努力让它工作，但它还没有工作。你能解释一下这个脚本的位置吗？

我正在从xquery生成我的页面，因此我不能将此脚本放在页面中，因为它包含“{”，它打破了xquery处理。将脚本放在cdata中会破坏脚本。因此，我将on instanceReady侦听器放在创建编辑器的同一脚本中，并调用外部脚本来添加其余内容。例如：

<script type="text/javascript">
  var editor = CKEDITOR.replace( 'editor1' );
  editor.on("instanceReady", updateInstance() )
</script>

然后updateInstance包含：

function updateInstance()
{
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 11

我认为用户问的是序列化，我正在努力序列化表单以提交，这给了我很多问题。

这对我有用：

$(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 12

我用当前版本解决了这个问题：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();
}

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

12 个答案: