Wykrywanie zdarzeń onChange z Ckeditora za pomocą Jquery

Nie udało mi się uruchomić onchange, jednak onblur wydaje się działać, co może być wystarczające dla Twoich potrzeb

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

Jest teraz zdarzenie zmiany: http://docs.ckeditor.com/#! / api / CKEDITOR. editor-event-change

Poniżej działa dla mnie w wersji 4.4.3. Musisz obsłużyć, gdy zmieni się źródło i 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');
});

Mam!

Najpierw miałem edytory na mojej stronie utworzone jako textareas z klasą ckeditor, i pozwoliłem ckeditor.js robią z nich richTextEditors. Potem próbowałem różnych rozwiązań od innych odpowiedzi, ale nie mogłem ich uruchomić.
Następnie zmieniłem nazwę klasy (na CKeditor), więc muszę zainicjować edytory w moim kodzie. Próbowałem tego i działa:

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

Więc gdy edytor straci fokus sprawdza czy jest brudny, a jeśli jest to odpala zmieniony funkcja (alert w tym przykładzie).

Później próbowałem ponownie z wtyczką onchanges, w ten sposób:

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

Teraz działa również z wtyczką (dzięki @ Alfonso). Ale myślę, że wtyczka sprawia, że zmiany zdarzenia ogień zbyt dużo, wolę pierwsze rozwiązanie, gdzie zmiany są oceniane tylko na blur.

CKEditor posiada funkcję a 'checkDirty()'. Najprostszym sposobem sprawdzenia, czy wartość CKEditor została zmieniona, jest dodanie tego fragmentu JS do kodu.

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

Uwaga: emailBody - jest id twojego pola textarea

Najlepsze, co mogę zrobić, w zasadzie daje wskazówkę, czy Zawartość edytora zmieniła się ze stanu pierwotnego.

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

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

Nie wymyśliłem rozwiązania, ale poniższy link mówi więcej o wydarzeniach dostępnych w witht he CKEditor:

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

Nie jest to idealne rozwiązanie, którego szukałem, ale używam następującego oznaczenia, aby zaznaczyć, że moja zawartość została zmodyfikowana:

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

To nie znaczy, że treść została zmodyfikowana, ale że użytkownik skupił się lub rozmazał z edytora (co jest lepsze niż nic).

Dla zmiany zdarzenia Pobierz wtyczkę onchange http://ckeditor.com/addon/onchange i zrób to

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

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

Etc

Z tego co widzę na stronie dokumentacji CKEditor CKEditor posiada wbudowaną obsługę zdarzeń. Oznacza to, że powinieneś użyć tego zamiast JQuery do nasłuchania zdarzenia onChange. Dzieje się tak głównie dlatego, że gdy redaktorzy tacy jak CKEditors tworzą swój "fantazyjny" interfejs użytkownika, dla odmiany będziesz słuchał niewłaściwego elementu. Uważam, że jeśli można uzyskać odniesienie do obiektu javascript CKEditor powinieneś być w stanie napisać coś takiego:

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

Ten kod powiadomi użytkownika po kliknięciu dowolnego linku na pasku bocznym

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

Najwyraźniej nie mogę po prostu dodać komentarza, ponieważ jestem nowy na stronie, ale odpowiedź jest poprawna i niezależnie ją zweryfikowałem, więc chciałem dodać to.

CKEDITOR.instancje [xxx].on ('change', function () {alert ('wartość zmieniona!!')});

To działa dla CKEditor 4+ i przechwytuje wszystkie zdarzenia zmiany, w tym undo i redo, przez co praca js staje się zbędna dla nowych użytkowników.

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

Nie wiem o zdarzeniu 'change', ale zdarzenie 'blur' działa dla mnie doskonale, gdy używam CKeditor w wersji 3.6

Dla późniejszych Googlerów zauważyłem, że jeśli utworzysz CKEditor używając tego

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

Działa, ale na formularzu submit nie aktualizuje mytextarea wartości, więc wysyła starą wartość

Ale

If you do like this

CKEDITOR.replace('mytextarea');

W formularzu submit wysyła nową wartość