ckeditor 并在用户键入时显示用户数据

Posted 2023-02-18

【中文标题】ckeditor 并在用户键入时显示用户数据

【英文标题】：ckeditor and display users data as they type

【发布时间】：2014-01-02 02:53:00

【问题描述】：

我有一个 textarea，当用户将数据输入到 textarea 时，数据会显示在表单的底部，以显示其数据的显示方式（与 *** 提供的预览显示方式非常相似）用户在输入时提出问题）。

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

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

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

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

【问题讨论】：

您可以使用类或名称来识别文本编辑器

【参考方案1】：

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

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

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

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

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

我支持 2. 因为 1. 是一种 hack。当然，这取决于你。

【讨论】：

感谢您提供如此详细的回复。这对我有帮助。

@oleq 如何用 ckeditor 替换所有 textareas 并在更改时更新所有相应的隐藏 textareas？

链接到答案中的小提琴。