javascript - ckeditor 并在用户输入时显示用户数据

Question

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

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

我假设这是因为文本区域的id被CKEditor的id替换了，所以我尝试用CKEditor的id替换文本区域的id，但是这种方法没有用。

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

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

Answer 1

这是因为 CKEditor 在旁边您的 <textarea> 运行在 DOM 中(首先隐藏它)，事实上，它不会更新您的 <textarea> 的内容除非你要求它或摧毁编辑器。这就是 CKEditor 的工作原理。

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

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

1. 关于 editor#change 调用 editor.updateElement 并从 <textarea> 上的代码触发键盘事件(参见 the 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?
           }
       }
   } );
   

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

我赞成 2. 因为 1. 是一种 hack。但这当然取决于您。