Как прослушать событие CKEditor setData с помощью jQuery?

Question

Может быть, уже поздно, но почему так сложно найти способ сделать это?Моя главная цель - увеличить ползунок jQuery, чтобы показать, что у пользователей заканчивается максимальная длина текста.У меня есть причины не показывать точное количество символов, но это эффективно для подсчета символов (включая всю разметку HTML).

$("#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'
    }
);

ОБНОВЛЕНИЕ: Это то, что я закончил,но это не так элегантно, так как setTimeout запускается каждые 100 мс, чтобы проверить длину контента, изменились они или нет, но это работает.У меня ощущение, что событие 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;если бы документы были лучше, плагин был бы очень удобен.Нужно смотреть на плагины, доступные для вдохновения.

Достаточно ли прослушивать события keyup и paste?А когда вы помечаете некоторые стили и просто используете кнопки?В основном вам нужно прислушиваться ко всему этому, чтобы убедиться, что вы получите все, и в таком случае, почему бы не использовать метод setTimeout, чтобы избежать неприятностей?

ОБНОВЛЕНИЕ 2: Другойнеобходимо ограничить количество символов для различных служб, хотя это можно сделать на бэкэнде и просто обрезать, всегда приятно синхронизировать FE.

Answer 1

Из документации 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'
    }
);

Если это не сработает, вы сможете найти элемент DOM, который содержит интерфейс редактора (this.container), или элемент DOM, из которого был создан редактор (this.element).Также обратите внимание, что события CKEditor также всплывают в DOM, поэтому вы можете связать событие в любом месте по пути.

Answer 2

На самом деле я заявил, что setData запускается только тогда, когда пользователь нажимает кнопку «источник» (в обоих направлениях html <-> форматированный текст).Поэтому он не имеет отношения к отображению счетчика длины в реальном времени.Если вам нужно запустить событие для keyup (), вы можете использовать следующее:

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

Переменная редактора создается при установке редактора: var editor = CKEDITOR.replace ("textarea _" +hashArticleNew); // чистый JavaScript

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

Работает!(CKEditor 3.6.2)