ckeditor并在用户输入时显示用户数据 [英] ckeditor and display users data as they type

问题描述

我有一个文本区域，当用户将数据输入到文本区域时，数据显示在窗体底部，作为其数据显示方式的显示（与StackOverflow提供的预览显示相同）

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

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

我的thinkg是否错了？

当用户将数据输入CKEditor时，我应该使用什么方法来显示数据？< textarea> 旁边运行 。

code>在DOM中（隐藏它），事实上，它不会更新你的< textarea> 的内容，除非你要求破坏编辑器。这是CKEditor的工作原理。

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

问题可能是什么很可能，你现有的代码观察到在 onkeyup ， onkeydown >< textarea> ，并更新页面底部的预览。您需要将这些回调重新附加到 编辑器#change 事件，因为CKEditor不会触发< textarea> 中的任何事件与它在所有）。因此，有两种方法可以解决您的问题：

1. 在 editor＃change 呼叫 editor.updateElement 并触发键盘事件< textarea> 上的代码（请参阅 小提琴 ）。

     CKEDITOR.replace（'editor'，{
    plugins：' wysiwygarea，sourcearea，basicstyles，toolbar，undo'，
    on：{
    instanceReady：function（）{
    //显示文本区域用于开发目的
    this.element.show ）; 
   }，
    change：function（）{
    //同步文本区域
    this.updateElement（）; 
    
    // Fire keyup on < textarea> here？
   } 
   } 
   }）; 
     




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

我是2.因为1.是一种黑客。但是由你决定。

I have a textarea that as the user enters data into the textarea, the data is displayed at the bottom of the form as a display of how their data may appear (much in the same way that StackOverflow gives a preview display of the users question as the user types it).

I have installed CKEditor 4.3.1 to this textarea and the preview display no longer appears.

I assumed that this was because the id of the text area had been replaced by the id of the CKEditor, so I tried replacing the id of the text area with the id of the CKEditor, but this approach did not work.

Is my thinkg wrong? I have read the CKEditor docs, but found nothing to help me.

What approach should I use to display the data as the user enters their data into the CKEditor?

解决方案

This is because CKEditor runs next to your <textarea> in DOM (hides it first) and, in a matter of fact, it doesn't update contents of your <textarea> unless you request it or destroy the editor. That's how CKEditor works.

Call editor.updateElement to synchronize <textarea> with rich editor contents. You can use editor#change event to updateElement periodically and keep things in sync.

What might be the problem is that, quite likely, your existing code observes keyboard events (onkeyup, onkeydown) fired in <textarea> and updates the preview at the bottom of your page. You need to re-attach those callbacks to editor#change event because CKEditor doesn't trigger any events in <textarea> (as I mentioned, it doesn't interact with it at all). So there are two ways of solving your problem:

1. On editor#change call editor.updateElement and fire keyboard event from code on <textarea> (see 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. Attach existing preview update callbacks to editor#change.

I'm for 2. since 1. is a kind of hack. But it's up to you, of course.

这篇关于ckeditor并在用户输入时显示用户数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！