Comment détecter les changements de TinyMCE?

je suis en retard à la fête, mais pour référence future voici comment vous le faites dans TinyMCE 4.X:

tinyMCE.init({
   setup:function(ed) {
       ed.on('change', function(e) {
           console.log('the event object ', e);
           console.log('the editor object ', ed);
           console.log('the content ', ed.getContent());
       });
   }
});

Qui fonctionne pour moi:

tinyMCE.init({
    setup : function(ed){
         ed.on('NodeChange', function(e){
             console.log('the event object ' + e);
             console.log('the editor object ' + ed);
             console.log('the content ' + ed.getContent());
         });
    }
});

ed.on('SaveContent', function(e) {  

ou

ed.on('submit', function(e) {

Trouvé sur la page http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor dans la Section Événement

ce qui suit va capturer "keyup" et d'autres événements de changement (copier, coller, center, etc.):

tinymce.init({
    setup: function (ed) {
        ed.on('keyup', function (e) {
            tinyMceChange(ed);
        });
        ed.on('change', function(e) {
            tinyMceChange(ed);
        });
    }
});

function tinyMceChange(ed) {
    console.debug('Editor contents was modified. Contents: ' + ed.getContent());
}

Je l'utilise dans tinymce 4.x

tinymce.init({
    selector: "#tinymce-textarea",
    setup : function(ed) {
        ed.on("change", function(e){
            $('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
        });
        ed.on("keyup", function(){
            $('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
        });
   }
});

Explication:

on ("change") est pour détecter les changements sur l'événement de la souris si u cliquez sur l'icône de la barre d'outils ou la sélection dans le menu. Il peut également détecter l'Événement du clavier, mais seulement après avoir perdu la mise au point (pas en temps réel).

("keyup") pour détecter les changements en temps réel d'événements de clavier

essaye ceci:

tinyMCE.init({
   setup : function(ed) {
          ed.onChange.add(function(ed, l) {
                  var editorContent = l.content;    // editorContent will hold the values of the editor
                  alert(editorContent);
          });
   }
});

Cliquez pour le Rreference here

nous avons constaté que l'événement de changement ne se déclenche parfois qu'après avoir appuyé sur Entrée; il semble être lié au annuler le traitement. De plus, l'événement keyup se déclenche lorsque le contenu n'a pas changé, comme lorsque maj ou CMD-A sont pressés.

donc nous utilisons les deux modifier et keyup, et comparez la dernière valeur traitée à la valeur courante pour détecter un changement réel.

Cette solution fonctionne aussi pour couper et coller, et les modifications à partir d'éléments de menu.

//Sometimes does not fire unless enter is pressed
editor.on('change', () => {
    var value = editor.getContent();
    if (value !== editor._lastChange) {
        editor._lastChange = value;
        window.console.log(editor._lastChange);
    }
});

//Sometimes fires even if content did not change
editor.on('keyup', () => {
    var value = editor.getContent();
    if (value !== editor._lastChange) {
        editor._lastChange = value;
        window.console.log(editor._lastChange);
    }
});

Ce beau travail pour moi dans tous les condtion clé , couper, copier , coller

    setup: function (editor) {
        editor.on('KeyUp', function(e){
            alert(editor.getContent());
         });
}

tinymce.init({
    // ...
    setup: function(editor) {
        editor.on('Paste Change input Undo Redo', function () {
            if (editorChangeHandler) {clearTimeout(editorChangeHandler);}
            editorChangeHandler = setTimeout(function() {
                console.log('changed');
            }, 100);
        });
    }
    // ,...
});

Salut, j'ai essayé d'utiliser ceci:

setup : function(ed) {
    ed.onChange.add(function() {
        $('#changed').val(1);
    });
}

ceci est pour mettre à jour un champ caché "modifié" avec la valeur de 1 de sorte que lorsqu'un utilisateur essaye de fermer la page ou de quitter celle-ci, il est informé qu'il a des données non sauvegardées.

ma faute est que cela ne fonctionne que si 2 ou plusieurs modifications sont apportées - par exemple, si j'ai remarqué que je n'avais pas fini avec un arrêt complet "."je suis retourné pour ajouter ceci puis pour une raison quelconque cliqué près je serais en mesure de quitter la page sans être averti de la les modifications