ckeditor，并在用户键入时显示他们的数据

Question

我有一个文本区域，当用户在文本区域中输入数据时，数据会显示在表单底部，以显示其数据的显示方式（与StackOverflow在用户键入问题时预览显示用户问题的方式非常相似）。

我已经在这个文本区域安装了CKEditor 4.3.1，预览显示不再出现。

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

我的想法错了吗？我已经阅读了CKEditor文档，但没有发现任何帮助。

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

Answer 1

这是因为CKEditor在DOM中的<textarea>旁边运行（首先隐藏它），而且事实上，除非您请求它或销毁编辑器，否则它不会更新<textarea>的内容。这就是CKEditor的工作原理。

调用editor.updateElement使<textarea>与富编辑器内容同步。您可以定期使用editor#change事件到updateElement，并保持同步。

问题可能是，您现有的代码很可能会观察到<textarea>中触发的键盘事件（onkeyup、onkeydown），并更新页面底部的预览。您需要将这些回调重新附加到editor#change事件，因为CKEditor不会触发<textarea>中的任何事件（正如我所提到的，它根本不会与之交互）。所以有两种方法可以解决你的问题：

1. 在editor#change上，调用editor.updateElement并从<textarea>上的代码中激发键盘事件（请参见小提琴）。

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

2. 将现有的预览更新回调附加到editor#change。

我支持2。自1。是一种黑客。但这当然取决于你。