Javascript 编辑并显示用户键入的数据

我有一个textarea，当用户在textarea中输入数据时，数据会显示在表单底部，以显示其数据的显示方式（与StackOverflow在用户键入时预览显示用户问题的方式大致相同）

我已将CKEditor 4.3.1安装到此文本区域，预览显示不再显示

我假设这是因为文本区域的id已被CKEditor的id替换，所以我尝试用CKEditor的id替换文本区域的id，但这种方法不起作用

我的想法错了吗？我读过CKEditor文档，但没有找到任何帮助

---

当用户将数据输入到CKEditor中时，我应该使用什么方法来显示数据？

这是因为在DOM中，CKEditor在您的

旁边运行（首先隐藏它），事实上，除非您请求或销毁编辑器，否则它不会更新

的内容。这就是CKEditor的工作原理

调用以使用丰富的编辑器内容同步

。您可以使用事件定期更新元素，并保持同步

可能的问题是，您现有的代码很可能会观察到在

中触发的键盘事件（

onkeyup

，

onkeydown

），并更新页面底部的预览。您需要将这些回调重新附加到事件，因为CKEditor不会触发

中的任何事件（正如我提到的，它根本不会与之交互）。因此，有两种方法可以解决您的问题：

来自

上代码的On call and fire键盘事件（请参阅）

CKEDITOR.replace（'editor'{
插件：“wysiwygarea，sourcearea，basicstyles，toolbar，undo”，
关于：{
InstanceRady:函数（）{
//显示用于开发目的的文本区域。
this.element.show（）；
},
更改：函数（）{
//同步文本区。
this.updateElement（）；
//这里着火了？
}
}
} );

将现有预览更新回调附加到

---

我赞成两个。从一开始。是一种黑客。当然，这取决于您。

您可以使用class或name来识别textEditorthNak以获得如此详细的响应。这对我很有帮助。@oleq如何用ckeditor替换所有文本区域，并在更改时更新所有相应的隐藏文本区域？链接到答案中的fiddle。

CKEDITOR.replace( 'editor', {
    plugins: 'wysiwygarea,sourcearea,basicstyles,toolbar,undo',
    on: {
        instanceReady: function() {
            // Show textarea for dev purposes.
            this.element.show();
        },
        change: function() {
            // Sync textarea.
            this.updateElement();    

            // Fire keyup on <textarea> here?
        }
    }
} );