Обнаружение событий onChange из CKEditor с использованием Jquery

Question

Я работаю с CKEditor и jQuery, и я хотел бы переключить флаг в true, когда пользователь изменяет значение поля.Одним из этих полей является экземпляр CKEditor.

Все текстовые области, имеющие класс "wysiwyg", преобразуются в CKEditor, но каким-то образом событие $('.wysiwyg').change() никогда не обнаруживается.Я немного погуглил, но комбинация ключевых слов, похоже, не дает ничего, кроме неуместных результатов (мой google-fu отстой).

Спасибо за любую помощь :)

Edit:

for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('click', function() {alert('test 1 2 3')});
    }

Я попробовал код выше, и он не работает.Это не дает мне ошибку, означающую, что он находит объекты CKEditor, но по какой-то причине слушатель не подключен к нему?

Кроме того, если я заменю вложение события просто на alert(CKEDITOR.instances[i].name);, это будетоповестить имя моей текстовой области, чтобы я знал, что не пытаюсь прикрепить событие click ни к чему:)

Answer 1

Вы можете получить плагин (и объяснение того, что вещи обнаружены как изменения) в этом посте: http://alfonsoml.blogspot.com/2011/03/onchange-event-for-ckeditor.html, чтобы вы могли делать такие вещи, как

for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('change', function() {alert('test 1 2 3')});
    }

Answer 2

Теперь есть событие изменения: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-event-change

Следующее работает для меня, используя версию 4.4.3. Вы должны справиться, когда источник и HTML изменятся.

// Initialize the rich text editor.
var bodyEditor = CKEDITOR.replace('emailTemplate_Body',
{
    readOnly: false
});

// Handle when the Source changes.
bodyEditor.on('mode', function () {
    if (this.mode == 'source') {
        var editable = bodyEditor.editable();
        editable.attachListener(editable, 'input', function () {
            alert('source changed');
        });
    }
});

// Handle when the HTML changes.
bodyEditor.on('change', function () {
    alert('change fired');
});

Answer 3

Мне не удалось заставить работать onchange, но onblur, кажется, работает, что может быть достаточно для ваших нужд

CKEDITOR.instances['name'].on('blur', function() {alert(1);});

Answer 4

Я понял!

Сначала в моем веб-редакторе были созданы текстовые редакторы с классом ckeditor, и я позволил ckeditor.js сделать их richTextEditors. Затем я попробовал отличные решения от других ответов, но не смог заставить их работать.
Затем я изменил имя класса (на CKeditor), поэтому мне нужно инициализировать редакторы в моем коде. Я попробовал это, и это работает:

<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>

$('.CKeditor').ckeditor(function(){
     this.on('blur', function({if(this.checkDirty())alert('text changed!');});
});

Поэтому, когда редактор теряет фокус, он проверяет, не загрязнен ли он, а если он есть, то запускает измененную функцию (предупреждение в этом примере).

Позже я попробовал снова с плагином onchanges, таким образом:

$('.CKeditor').ckeditor();
for (var i in CKEDITOR.instances) {
    CKEDITOR.instances[i].on('change', function() {alert('text changed!');});
}

Теперь он работает и с плагином (спасибо @Alfonso). Но я думаю, что плагин слишком сильно запускает событие изменений, я предпочитаю первое решение, где изменения оцениваются только при размытии.

Надеюсь, это поможет! и спасибо всем за помощь.

Answer 5

CKEditor имеет функцию 'checkDirty()'.Самый простой способ проверить, было ли изменено значение CKEditor, - добавить этот фрагмент JS в ваш код.

CKEDITOR.instances['emailBody'].on('blur', function(e) {
    if (e.editor.checkDirty()) {
        var emailValChanged=true; // The action that you would like to call onChange
    }
});

Примечание: emailBody - это идентификатор поля textarea

Answer 6

Лучшее, что я могу сделать, в основном дает представление о том, изменилось ли содержимое редактора по сравнению с исходным состоянием.

var editor = $('#ckeditor').ckeditorGet();

editor.on("instanceReady", function(){                    
     this.document.on("keyup", function(){
     console.log(editor.checkDirty());
   });
});

Answer 7

Я не нашел решения, но следующая ссылка рассказывает больше о событиях, доступных с помощью CKEditor:

http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html

Это не идеальное решение, которое я искал, но я использую следующее, чтобы отметить, что мой контент был изменен:

CKEDITOR.on('currentInstance', function(){modified = true;});

Это на самом деле не означает, что контент был изменен, но пользователь сфокусирован или размыт от редактора (что лучше, чем ничего).

Answer 8

Для изменения события скачайте плагин onchange http://ckeditor.com/addon/onchange и сделайте это

var options_cke ={
         toolbar :
        [
            { name: 'basicstyles', items :['Bold','Italic','Underline','Image', 'TextColor'] },
            { name: 'paragraph', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','BGColor' ] },
                        { name: 'font', items : [ 'Font','Styles']}

        ],
                on :
                {
                    change :function( ev )
                    {
                        //ev.editor.focus();
                        console.log(ev);
                    }
                }

     };
 var editor=$('yourCkeEditorID').ckeditor(options_cke);

Answer 9

editor = CKEDITOR.appendTo('container', {resize_enabled: false}); 
editor.on('key', function () { setTimeout(setHtmlData,10); });

и т. Д.

Answer 10

из того, что я вижу на сайте документации CKEditor, CKEditor поставляется со встроенной обработкой событий. Это означает, что вы должны использовать это вместо JQuery для прослушивания события onChange. Это также в основном потому, что когда такие редакторы, как CKEditors, создают свои «причудливые» пользовательские интерфейсы, вы в конечном итоге прислушиваетесь к неверному элементу для изменения. Я полагаю, что если вы сможете получить ссылку на объект JavaScript CKEditor, вы сможете написать что-то вроде этого:

ckRefObj.on('onChange', function() { /* do your stuff here */ });

Надеюсь, это поможет.