web-dev-qa-db-fra.com

Comment détecter les changements dans TinyMCE?

J'ai ajouté l'éditeur TinyMCE (version 4.0.2) dans un formulaire HTML existant dans mon projet (PHP, Codeigniter). Mon objectif final est d'activer le bouton d'envoi du formulaire si des modifications sont apportées au formulaire, y compris l'éditeur TinyMCE Je ne peux le faire qu'avec le formulaire, à l'exception de l'éditeur TinyMCE. Je n'ai pas pu détecter les modifications de TinyMCE.

Je veux détecter si un changement se produit lorsque la clé est en place. J'ai vu que tinymce a une fonction onchange similaire à celle ci-dessous.

            setup : function(ed) {
            ed.onChange.add(function(ed, l) {
                console.debug('Editor contents was modified. Contents: ' + l.content);
            });

J'ai inséré le code d'installation supérieur dans la fonction d'initialisation ci-dessous, mais aucune sortie n'a été trouvée.

tinymce.init({ });

Pouvez-vous dire comment détecter un changement, ou une meilleure idée?

jquerytinymce
29
user2603482

Pour Tinymce 4 cela fonctionne pour moi,

        editor.on('keyup', function(e) {
            alert('keyup occured');
            //console.log('init event', e);
            console.log('Editor contents was modified. Contents: ' + editor.getContent());
            check_submit(); //another function calling
        });

MODIFIER:

Notez que keyup will not capturera tous les cas. par exemple copy/paste/cut de menu et non de keyboard

si vous voulez, vous pouvez capturer ceux avec 

editor.on('paste', function(e) {
                    console.debug('paste event');

                });

editor.on('cut', function(e) {
                    console.debug('cut event');

                });

NOTE Si vous capturez cut et paste de tinymce, vous ne devriez probablement pas traiter ces événements depuis keyup. Ce que j'ai fait est de ne sauvegarder que si les clés ne sont pas des clés pour cut & paste

 /**
 * MCE keyup callback, update the master model selected attribute
 * 
 * @method tinyMCEKeyup
 */
 tinyMCEKeyUp : function(e) {
        console.log('tinymce:keyup');


         var ctrlDown = false;
         var ctrlKey = 17, vKey = 86, xKey = 88;


         if ((e.ctrlKey) && (e.keyCode === vKey)) {
             console.log('paste from keyboard')
             /* got here. do nothing. let paste event handle this one  */
             return;
         } else if ((e.ctrlKey) && (e.keyCode === xKey)) {
             console.log('cut from keyboard')
             /* got here. do nothing. let paste event handle this one  */
             return;
         }

         this.doSave();

},

et appelez cette fonction à partir de l'événement keyup. De cette façon, vous éviterez de faire quelques actions deux fois sur le copier/coller. 

NOTEvous allez bientôt comprendre que tout style changes qui survient à partir de menu seraPASdéclenchera aussi ces événements ..

Je cherche toujours une réponse pour saisir le changement de style.

27
user2603482

Je suis en retard pour 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());
       });
   }
});
55
sica07

Ça marche 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());
         });
    }
});

également

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

ou 

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

Trouvé à la page http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor in Section Event

11
Martin

Ce qui suit va capturer "keyup" et d'autres événements de changement (copier, coller, centrer, 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());
}
8
oalbrecht

Je l'utilise en 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") sert à détecter les modifications sur un événement de souris si vous cliquez sur l’icône de la barre d’outils ou sur une sélection dans le menu. Il est également capable de détecter l'événement de clavier mais seulement après une perte de focus (pas en temps réel).

on ("keyup") sert à détecter les modifications sur un événement de clavier en temps réel

6
Syukri Hakim Abdul Rahman

Essaye ça:

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 Référence ici

3
Nil'z

Nous avons constaté que l'événement change parfois ne se déclenche qu'après avoir appuyé sur entrée; Il semble être lié au traitement de annuler . De plus, l'événement keyup se déclenche lorsque le contenu n'a pas changé, par exemple lorsque vous appuyez sur shift ou CMD-A .

Nous utilisons donc à la fois change et keyup et comparons la dernière valeur traitée à la valeur actuelle pour détecter un changement réel.

Cette solution fonctionne également pour couper, coller et modifier les é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);
    }
});
2
Steven Spungin
tinymce.init({
    // ...
    setup: function(editor) {
        editor.on('Paste Change input Undo Redo', function () {
            if (editorChangeHandler) {clearTimeout(editorChangeHandler);}
            editorChangeHandler = setTimeout(function() {
                console.log('changed');
            }, 100);
        });
    }
    // ,...
});
2
Nagy Zoltán

Ce travail me convient en toutes conditions clé en main, couper, copier, coller 

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

Les solutions ci-dessus ne détecteront pas si le bouton tinymce updo a été utilisé. Malheureusement, cela ne le sera pas non plus, mais c'est un peu plus correct sur le plan sémantique.

if (tinymce.activeEditor.isDirty()) {
    alert("Your content is changed.");
}

http://archive.tinymce.com/wiki.php/api4:method.tinymce.Editor.isDirty

0
user1032531