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

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

все textareas, которые имеют класс "wysiwyg", преобразуются в CKEditors, но как-то $('.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); это предупредит имя моего textarea, поэтому я знаю, что не пытаюсь присоединить событие click ни к чему:)

39
ckeditor dom-events jquery

14 ответов

вы можете получить плагин (и объяснение о том, что вещи обнаруживаются как изменения) в этом сообщении: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')});
    }
53

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

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

теперь есть событие изменения:http://docs.ckeditor.com/#!/api / CKEDITOR.редактор-событие-изменение

следующее работает для меня, используя версию 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');
});
13

Я понял!

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

надеюсь, что это помогает! и спасибо всем за помощь.

11

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

8

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

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;});

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

3

для изменения события загрузите плагин 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);
2
editor = CKEDITOR.appendTo('container', {resize_enabled: false}); 
editor.on('key', function () { setTimeout(setHtmlData,10); });

etc

2

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

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

Я надеюсь, что это помогает.

1

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

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

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

с CKEditor.экземпляры[xxx].on ('change', function () {alert ('значение изменено!!')});

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

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

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

0

для более поздних гуглеров я заметил, что если вы создадите CKEditor с помощью этого

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

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

но

Если вам это нравится

CKEDITOR.replace('mytextarea');

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

-1