ckeditor並顯示用戶數據，因爲他們鍵入

我有一個textarea，作爲用戶輸入數據到textarea，數據顯示在窗體的底部作爲他們的數據可能出現的顯示（很多以同樣的方式當用戶鍵入它時，StackOverflow會提供用戶問題的預覽顯示）。ckeditor並顯示用戶數據，因爲他們鍵入

我已經將CKEditor 4.3.1安裝到這個textarea中，預覽顯示不再出現。

我認爲這是因爲文本區域的ID已被替換爲CKEditor的ID，所以我嘗試用CKEditor的ID替換文本區域的ID，但此方法無效。

我想錯了嗎？我已閱讀CKEditor文檔，但沒有發現任何幫助。

隨着用戶將數據輸入到CKEditor中，我應該使用什麼方法來顯示數據？

來源

2013-12-14 user1261774

你可以使用類或名稱來識別texteditor –

這是因爲CKEditor的，除非你要求它或破壞編輯器運行您<textarea>的旁邊您<textarea>在DOM（第一隱藏它），並在事實上，它不更新內容。這就是CKEditor的工作原理。

撥打editor.updateElement將<textarea>與豐富的編輯器內容同步。您可以定期使用editor#change事件到updateElement並保持同步。

可能的問題是，您現有的代碼很有可能會觀察到在<textarea>中觸發的鍵盤事件（onkeyup,onkeydown）並更新了頁面底部的預覽。您需要將這些回調重新附加到editor#change事件中，因爲CKEditor不會觸發<textarea>中的任何事件（正如我所提及的，它根本不與其進行交互）。因此，有解決你的問題的方法有兩種：

在editor#change上<textarea>呼叫editor.updateElement和消防鍵盤事件從代碼（見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.是一種破解。但是，當然，這取決於你。

來源

2013-12-16 12:25:08 oleq

Thnaks爲這樣一個詳細的迴應。這幫助了我。 – user1261774

@oleq如何將所有textareas替換爲ckeditor，並在更改時更新所有對應的隱藏textareas？ –

鏈接到答案中的小提琴。 – oleq

ckeditor並顯示用戶數據，因爲他們鍵入

回答

相關問題