it-swarm.com.de

Wie erkennt man Änderungen in TinyMCE?

Ich habe den TinyMCE-Editor (Version 4.0.2) in ein vorhandenes HTML-Formular in meinem Projekt (PHP, Codeigniter) eingefügt. Mein letztes Ziel ist es, die Schaltfläche zum Senden des Formulars zu aktivieren, wenn sich Änderungen im Formular einschließlich des TinyMCE-Editors ergeben. Ich kann das nur mit dem Formular, außer dem TinyMCE-Editor. Ich konnte keine TinyMCE-Änderungen feststellen.

Ich möchte herausfinden, ob beim Schlüsselwechsel Änderungen auftreten. Ich habe gesehen, dass Tinymce eine stetige Funktion hat, wie unten beschrieben.

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

Ich habe den oberen Setup-Code in die unten beschriebene Init-Funktion eingefügt, aber keine Ausgabe, die ich gefunden habe.

tinymce.init({ });

Kannst du sagen, wie man Veränderungen erkennt oder eine bessere Idee?

29
user2603482

Für Tinymce 4 funktioniert es für mich,

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

BEARBEITEN:

Beachten Sie, dass keyup not nicht alle Fälle erfasst. zum Beispiel copy/paste/cut von menu und nicht von keyboard

wenn Sie möchten, können Sie diese mit erfassen 

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

                });

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

                });

NOTE Wenn Sie cut und paste von tinymce erfassen, sollten Sie diese Ereignisse wahrscheinlich nicht mit keyup verarbeiten. Was ich getan habe, ist das Speichern nur, wenn die Schlüssel keine Schlüssel für cut und paste sind.

 /**
 * 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();

},

und rufen Sie diese Funktion vom keyup-Ereignis auf. Auf diese Weise sparen Sie sich einige Aktionen beim Ausschneiden und Einfügen 

NOTEBald werden Sie herausfinden, dass jeder style changes, der von menu passiert,NICHTdieses Ereignis ebenfalls auslösen wird.

Ich bin immer noch auf der Suche nach einer Antwort, um den Stil zu ändern.

27
user2603482

Ich bin zu spät zur Party, aber in Zukunft wird hier in TinyMCE 4.X beschrieben:

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

Das ist für mich in Ordnung:

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

ebenfalls

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

oder 

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

Gefunden auf Seite http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor in Abschnitt Ereignis

11
Martin

Im Folgenden werden "keyup" und andere Änderungsereignisse (Kopieren, Einfügen, Zentrieren usw.) erfasst:

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

Ich benutze dies in 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());
        });
   }
});

Erklärung:

ein ("Ändern") dient zum Erkennen von Änderungen beim Mausereignis, wenn Sie auf das Symbol der Symbolleiste oder eine Auswahl aus dem Menü klicken. Es kann auch das Tastaturereignis erkennen, jedoch nur nach einem verlorenen Fokus (nicht in Echtzeit).

on ("keyup") dient zum Erkennen von Änderungen an Echtzeit-Tastaturereignissen

Versuche dies:

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

Klicken Sie hier für die Referenz.

3
Nil'z

Wir haben festgestellt, dass das Änderungsereignis manchmal erst ausgelöst wird, nachdem Sie die Eingabetaste gedrückt haben. Es scheint in die Rückgängig-Bearbeitung eingebunden zu sein. Das Keyup-Ereignis wird auch ausgelöst, wenn sich der Inhalt nicht geändert hat, z. B. wenn shift oder CMD-A gedrückt wird.

Wir verwenden also change und keyup und vergleichen den zuletzt bearbeiteten Wert mit dem aktuellen Wert, um eine echte Änderung zu erkennen.

Diese Lösung funktioniert auch zum Ausschneiden, Einfügen und Ändern von Menüelementen.

//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

Diese Arbeit funktioniert für mich in jeder Hinsicht. eintippen, ausschneiden, kopieren, einfügen

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

Die oben genannten Lösungen erkennen nicht, ob der Tinymce-Updo-Button verwendet wurde. Leider auch nicht, aber es ist etwas semantisch korrekt.

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

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

0
user1032531