如何使用jQuery監聽CKEditor事件setData？

也許這只是晚了，但爲什麼很難找到一種方法來做到這一點？我的主要目標是增加一個jQuery滑塊，以顯示用戶正在用盡最大文本長度。我有理由不顯示確切的字符數，但這是有效的字符計數（包括所有的HTML標記）。如何使用jQuery監聽CKEditor事件setData？

$("#desc").ckeditor(function() { 

     ITDUtil.log("ckeditor loaded") 

     // $(this).bind('setData.ckeditor', function(e){ 
     // 
     // console.log(e.val().length); 
     // $("#desc_character_slider").slider("option", "value", e.val().length); 
     // 
     // }); 

     // var editor = $('#desc').ckeditorGet(); 
     // alert(editor.checkDirty()); 

     // how to properly set an event listener for setData? 
     $(this).bind("setData.ckeditor", function(e){ 
      console.log(e.val().length); 
     }); 

     // is it this.on("setData",function(){}) ? 
     //    "setData.ckeditor"? 

    }, 
    { 
     toolbar : 'custom' 
    } 
);

UPDATE：這是我落得這樣做，但由於火災的setTimeout每100ms檢查內容的長度是否已經改變了它是不是不優雅，但它的作品。我有一種感覺，setData事件不是我應該聽的。粘貼和鍵盤充足嗎？

function updateCharCounts() { 

    $("#desc_character_slider").slider("option", "value", $("#desc").val().length); 
    $("#culture_character_slider").slider("option", "value", $("#culture").val().length); 

    setTimeout(updateCharCounts, 100); 
}

其他的研究發現，「使用setData」不可用的情況下，如果你CONSOLE.LOG editorObj._.events。這是CKEditor中的一個主要缺陷;希望文檔更好，插件會非常方便。需要盯着可用於獲取靈感的插件。

聽取鍵控和粘貼事件是否足夠？當您標記某些樣式並僅使用按鈕時怎麼辦？你基本上需要聽取所有的信息，以確保你得到了一切，在這種情況下，爲什麼不直接使用setTimeout方法來節省自己的麻煩？

更新2：另一個需求是限制各種服務的字符，儘管這可以在後端完成，只需截斷，總是很好讓FE同步。

來源

2011-05-04 Brian

嘿;你是否設法解決這個問題？自那時起CKEditor發生了很大變化，現在有更好的選擇。 – Nenotlep 2014-04-01 12:10:28

從CKEditor的文檔：

中的每一個回調函數將在 CKEDITOR.editor對象的上下文（因此這將是編輯器）和DOM元素對象將執行作爲參數傳遞。

根據上述，$(this)一個CKEditor的回調內是無效的，因爲this是一個自定義對象，而不是DOM元素。請嘗試以下操作：

$("#desc").ckeditor(function(element) { 
     ITDUtil.log("ckeditor loaded"); 

     $(element).bind("setData.ckeditor", function(e){ 
      console.log(e.val().length); 
     }); 
    }, 
    { 
     toolbar : 'custom' 
    } 
);

如果不工作，你應該能夠找到其持有的編輯界面（this.container）或者編輯已經從（this.element）創建的DOM元素的DOM元素。還要注意的是，CKEditor事件也會讓DOM膨脹起來，所以你可以將事件綁定到任何地方。

來源

2011-05-04 08:32:00 DarthJDG

其實我說setData只有當用戶點擊「源」按鈕（在兩個方向html < - >富文本編輯）時觸發。所以它與顯示實時長度計數器無關。如果您需要在KEYUP（）觸發一個事件，您可以使用以下方法：創建

editor.on('key', function(evt){ 
    alert("key pressed. Content is now: "+evt.editor.getData()); 
    });

編輯器變量您準備時，編輯： VAR編輯= CKEDITOR.replace（「textarea的_」 + hashArticleNew）; //純javascript

$el=$(".wa_ckeditor").ckeditor(); 
var editor = $el.ckeditorGet();

它的工作原理！（CKEditor 3.6.2）

來源

2011-10-01 19:43:16

如何使用jQuery監聽CKEditor事件setData？

回答

相關問題