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

Ответ 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')});
    }

Ответ 2

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

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

Ответ 3

Я понял!

Сначала у меня были редакторы на моем веб-сайте, созданные как textareas с классом 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). Но я думаю, что плагин слишком сильно заставляет событие с изменениями, я предпочитаю первое решение, где изменения оцениваются только размытием.

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

Ответ 4

В настоящее время происходит событие изменения: 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');
});

Ответ 5

CKEditor имеет функцию a '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

Ответ 6

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

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

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

Ответ 7

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

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

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

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

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

Ответ 8

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

и т.д.

Ответ 9

Для изменения событий загрузите плагин 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);

Ответ 10

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

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

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

Ответ 11

Этот код будет предупреждать пользователя при нажатии любой боковой ссылки

$("#side-menu a").click(function(e){
  if(checkUnsaved()){
    if (confirm("You have unsaved changes.Do you want to save?")) {
      e.preventDefault();          
    }
    // or ur custom alert
  }
});

function checkUnsaved() {
    if(CKEDITOR)
        return CKEDITOR.instances['edit-body'].checkDirty(); // edit-body is the name of textarea in my case.
    else
        return false;
}

Ответ 12

Я, по-видимому, не могу просто добавить комментарий, потому что я новичок на сайте, но ответ Garry правильный, и я самостоятельно проверил его, поэтому хотел добавить это.

CKEDITOR.instances [xxx].on('change', function() {alert ('значение изменено!!')});

Это работает для CKEditor 4+ и фиксирует все события изменения, включая отмену и повтор, рендеринг работы Alfonso js для новых пользователей.

Ответ 13

$(document).ready(function () {        
    CKEDITOR.on('instanceReady', function (evt) {                    
        evt.editor.on('blur', function () {
            compare_ckeditor('txtLongDesc');
        });                    
    });
});

Не знаю о событии "change", но событие "blur" отлично работает для меня, когда я использую CKeditor версии 3.6

Ответ 14

Для более поздних Googlers я заметил, что если вы создадите CKEditor, используя этот

$("#mytextarea").ckeditor();

он работает, но в форме submit не обновляется значение mytextarea, поэтому он отправляет старое значение

но

если вы это сделаете

CKEDITOR.replace('mytextarea');

в форме submit отправляет новое значение