Javascript 使用编辑器编辑页面

我正在构建一个类似于pagemodo.com的页面定制功能的功能。用户必须单击HTML页面中的标签（div），CKEDITOR将在单独的div中加载标签文本

现在，ckeditor正在加载标签文本，但是ckeditor的“KeyUp”事件没有触发。只有当“KeyUp”事件触发时，我才能调用另一个函数“readAsTyped”来同时更改标签中的文本

你可以在这里看到工作副本

$（文档）.ready（函数（）{
$（'.editable'）。单击（函数（）{
$（this）.children（）.each（函数（索引，圆屋顶）{
createEditor（$（domEle.text（），domEle）；
});
});
});
变量编辑器，html=''；
函数createEditor（text1，domEle）
{
//在中创建一个新编辑器，将其值设置为html
var config={}；
ckeditor_instance=ckeditor.appendTo（'editor'，config，text1）；
var abc=ckeditor_instance.name；
ckeditor_instance.on（'instanceCreated'，函数（e）{
e、 on（'contentDom'，function（））{
e、 编辑器.document.on（'keyup'，函数（事件）{
//ckeditor中的keyup事件
可读类型（$（'cke_editor2'），$（domEle））；
//聚焦
}
);
});
}); 
}
函数readaType（对象，标签）{
var typedVal=obj.val（）；
//将字符值设置到标签中
$（标签）.html（typedVal）；
}

---

任何帮助都将不胜感激。

你的意思是这样的吗？

---

是的，与此类似。只有一点不同。单击div时，会为div中的每个子级打开一个CKEDITOR。在您的示例中，页面中只有一个CKEDITOR实例，因此我们可以像“CKEDITOR.on（）”这样绑定事件。我需要为同一页面中的多个CKEDITOR绑定事件。您可以在创建事件时使用CKEDITOR将事件绑定到每个实例，也可以根据需要单独绑定到每个实例。这就是我现在使用的代码。我将一个CKEDITOR实例附加到div并将其分配给变量“CKEDITOR_instance”，但“instanceCreated”事件从未触发

ckeditor_instance=ckeditor.appendTo（'editor'，config，text1）；ckeditor_instance.on（'instanceCreated'，function（e）{document.getElementById（e.editor.name+''u preview'）.innerHTML=e.editor.getData（）；e.editor.on（'change'，function（ev）{document.getElementById（ev.editor.name+''u preview'）.innerHTML=ev.editor.getData（）；}）；}）CKEditor实例不会触发此类“instanceCreated”事件：该事件仅由全局CKEditor对象触发
    $(document).ready(function() {
        $('.editable').click(function(){
        $(this).children().each(function(index, domEle) {
                createEditor($(domEle).text(), domEle);
            });
        });

    });

    var editor, html = '';


    function createEditor(text1, domEle)
    {

        // Create a new editor inside the <div id="editor">, setting its value to html
        var config = {};
        ckeditor_instance = CKEDITOR.appendTo( 'editor', config, text1 );

        var abc=ckeditor_instance.name;
        ckeditor_instance.on('instanceCreated', function(e) {
                e.editor.on('contentDom', function() {

                e.editor.document.on('keyup', function(event) {
                    // keyup event in ckeditor

                readAsTyped($('#cke_editor2'),$(domEle));
                    //on focus
                }
            );
        });
    }); 
    }


function readAsTyped(obj, label) {
    var typedVal = obj.val();
    // set the value of characters into the label
    $(label).html(typedVal);
}