ckeditor onKeyUp事件怎麼樣？

這一段代碼必須從textarea的text文本複製到文本區域text_hidden，此代碼的工作，而不CKEditor的ckeditor onKeyUp事件怎麼樣？

onKeyUp="document.getElementById('text_hidden').value = this.value;

但當CKEditor的啓用

onKeyUp="document.getElementById('text_hidden').value = this.value;無法正常工作。

如何解決這個問題？

<textarea name="text" id="text" rows="6" cols="80" onKeyUp="document.getElementById('text_hidden').value = this.value;" ></textarea></p> 

<textarea name="text_hidden" id="text_hidden" rows="6" cols="80" ></textarea> 

<script> 
     CKEDITOR.replace('text' , 
     { 
    allowedContent: true, 
    enterMode: CKEDITOR.ENTER_BR, 

    }); 
     CKFinder.SetupCKEditor(editor, '/ckfinder/'); 
     config.startupPath = "/files/"; 
</script>

來源

2014-04-02 Volodymyr Oliinyk

周圍搜索後，我發現指出，CKEditor的API不支持「KEYUP」事件的文章（ckeditor-keyup-event）。僅支持「偵聽按鍵事件」的「密鑰」方法。

文章作者對editor.setData使用editor.document.on（ 'KEYUP'）在回調（），這是隻有初始化後可用。

我更喜歡在初始化期間附加所需的keyup事件，因爲他的解決方法對我的用例不起作用。我改變了你的代碼，如下所示，這對我來說效果很好，但它實際上並沒有附加到鍵盤事件。

CKEDITOR.replace('text' , 
{ 
    allowedContent: true, 
    enterMode: CKEDITOR.ENTER_BR, 
}).on('key', 
    function(e){ 
     setTimeout(function(){ 
      document.getElementById('text_hidden').value = e.editor.getData(); 
     },10); 
    } 
);

沒有的setTimeout（）函數，的getData（）不會搶最後一個按鍵。

來源

2014-07-10 07:24:44 Hanafi

這是一個很常見的用例，它不支持keyup是荒謬的。他們需要發佈明確的文檔和一個Youtube視頻來展示這應該如何工作。 – MSC

話雖如此，經過多次試驗和錯誤以及Stackoverflow閱讀後，我確實得到了它的使用，並沒有setTimeout。 – MSC

@MSC，你可以發佈你的工作示例嗎？我想嘗試一下。 – Hanafi

這裏是我的CKEditor到textarea同步的演示，反之亦然：https://jsfiddle.net/ty5ks393/1/。鍵入三個白色框中的一個，並查看所有四個容器中的內容複製。

它使用Bootstrap保持整潔並顯示經典和內聯CKEditor。相關配件（不含外部資源，評論和console.logs）在這裏提取：

<div class="row"> 
     <div class="col-sm-3"> 
      <h2>TEXTAREA</h2> 
      <textarea id="textarea" class="box"></textarea> 
     </div> 
     <div class="col-sm-3"> 
      <h2>CK EDITOR INLINE</h2> 
      <div contenteditable="true" id="contentedit" class="box"></div> 
     </div> 
     <div class="col-sm-3"> 
      <h2>CK EDITOR</h2> 
      <textarea id="ckeditor" class="box"></textarea> 
     </div> 
     <div class="col-sm-3"> 
      <h2>RESULT DIV</h2> 
      <div id="result" class="box"></div> 
     </div> 
    </div>

而jQuery的：

$(function() { 
     CKEDITOR.disableAutoInline = true; 
     var ce = CKEDITOR.inline("contentedit", { 
      removePlugins: 'toolbar' 
     }); 
     var ck = CKEDITOR.replace('ckeditor').on('change', function(e) { 
      if (document.activeElement.nodeName == "IFRAME") { 
       var thisHTML = e.editor.getData(); 
       var tempDiv = $('<div>').html(thisHTML); 
       thisText = tempDiv.text(); 
       $('#textarea').val(thisText); 
       $('#contentedit, #result').html(thisHTML); 
      } 
     }); 

     var timer; 

     $('#textarea').keyup(function() { 
      var _this = this; 
      clearTimeout(timer); 
      timer = setTimeout(function() { 
       var thisText =$(_this).val().replace(/\n/g, "<br/>"); 
       $('#result, #contentedit').html(thisText); 
       CKEDITOR.instances.ckeditor.setData(thisText); 
      }, 200); 
     }); 

     $('#contentedit').keyup(function(e) { 
      var _this = this; 
      clearTimeout(timer); 
      timer = setTimeout(function() { 
       var thisHTML = $(_this).html(); 
       var tempDiv = $('<div>').html(thisHTML.replace(/\<\/p\>/g,"</p>\n\n")); 
       thisText = tempDiv.text(); 
       $('#textarea').val(thisText); 
       $('#result').html(thisHTML); 
       CKEDITOR.instances.ckeditor.setData(thisHTML); 
      }, 200); 
     }); 
    });

所以我使用超時，以避免附帶KEYUP當瓶頸使用setData（）。我檢測我是否在IFRAME中，以確保當我使用setData（）更改其他容器之一的內容時，我不會將內容更改退出CKEditor。

我希望它對你有些幫助。

來源

2015-07-21 23:23:07 MSC

這工作正常 – Nishantha

如果要將所見即所得的內容與textarea同步，只需將更改爲事件作爲更新基礎元素的選項。

CKEDITOR.replace('editor', { 
    on: { 
      change: function() { 
       this.updateElement();  
      } 
    } 
});

來源

2017-06-23 11:07:19

ckeditor onKeyUp事件怎麼樣？

回答

相關問題