TinyMCE: Wie binden Sie auf Ereignis nach seiner initialisiert

Ich such schon eine ganze Menge, aber durch google-fu'ing nicht bekommen, mir irgendwelche Ergebnisse 🙁

Habe ich ein bereits initialisiert tinyMCE editor die Initialisierung Prozess, den ich nicht kontrollieren kann, so dass code wie der folgende nicht funktionieren:

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

Code wie der folgende funktioniert auch nicht, da die jQuery tinymce plugin ist nicht definiert:

$('textarea').tinymce({
    setup: function(ed) {
        ed.onClick.add(function(ed, e) {
            alert('Editor was clicked: ' + e.target.nodeName);
        });
    }
});

Ich meine, es hat mit der tinymce.something syntax.

Wie kann ich binden, callback-Funktion, die unabhängig von tinyMCE Veranstaltung nach der tinyMCE ist bereits initialisiert?

InformationsquelleAutor diosney | 2013-08-29

10

Nachdem Hacker in das tinymce-Editor-Objekt mit console.log(), fand ich eine funktionierende Lösung:
```
setTimeout(function () {
       for (var i = 0; i < tinymce.editors.length; i++) {
             tinymce.editors[i].onChange.add(function (ed, e) {
             //Update HTML view textarea (that is the one used to send the data to server).
         ed.save();
       });
            }
}, 1000);
```
Innen, die callback-Funktion kann man den jedem Fall verbindlich will.

Den setTimeout Aufruf zur überwindung der racing Zustand tinymce und jQuery, da beim Aufruf tinymce.editors[i].onChange.add() gemacht wird tinymce nicht initialisiert, noch nicht.
- In meiner Implementierung dieser code war zu 90% die Lösung, aber es gab mir noch die Warnung "Deprecated TinyMCE API-Aufruf: <target>.onChange.add(...)" - die restlichen 10% war der fix Ersatz von onChange.add(function() {}) mit on('change', function() {}) - gerade als Ed Zavade unten vorgeschlagen.
InformationsquelleAutor diosney
10

Obwohl dieser Beitrag nun alt ist, aber ich denke, andere Leute müssen diese beantworten. Ich hatte das gleiche problem und um es zu beheben ich Tat dies:
```
tinyMCE.init({
        ...
        init_instance_callback : "myCustomInitInstance"
});
```
Basierend auf http://www.tinymce.com/wiki.php/Configuration3x:init_instance_callback
- den link aktualisieren
InformationsquelleAutor Luci

EDIT: oops - ich dachte, das war eine andere Frage ich war auf der Suche zu diesem speziellen WordPress - + TinyMCE, denke nicht. Aber ich lasse die Antwort hier kann es hilfreich sein für andere.

Den richtigen Weg, dies zu tun wäre, zum Anhängen an die tinyMCE init mit der WordPress-filter. Zum Beispiel:

PHP (in functions.php oder an einen anderen Ort führen Sie auf Bearbeiten, laden der Seite):

  add_action( 'init', 'register_scripts' );     
  function register_scripts(){
    if ( is_admin() ) {
      wp_register_script(
        'admin-script',
        get_stylesheet_directory_uri() . "/js/admin/admin.js",
        array('jquery'),
        false,
        true
      );
    }
  }

  add_action( 'admin_enqueue_scripts', 'print_admin_scripts' );
  function print_admin_scripts() {        
    wp_enqueue_script('admin-script');
  }

  add_filter( 'tiny_mce_before_init', 'my_tinymce_setup_function' );
  function my_tinymce_setup_function( $initArray ) {
    $initArray['setup'] = 'function(ed){
      ed.onChange.add(function(ed, l) {
        tinyOnChange(ed,l);
      });
    }';
    return $initArray;
  }

JavaScript (/js/admin/admin.js)

  (function($){
    window.tinyOnChange = function(ed, l){        
      console.log('Editor contents was modified. Contents: ' + l.content);      
    }
  }(jQuery);

Dies ist getestet und funktioniert in WordPress 3.9 (obwohl ich bin einfach immer die Ausgabe der Konsole:

Deprecated TinyMCE API call: <target>.onChange.add(..)

Aber das ist aufgrund der tinyMCE veralteten code, den Sie versuchen zu verwenden. Diese Methode funktioniert immer noch, um zu ändern, um eine der tinyMCE init - Optionen-ich bin derzeit mit es für init_instance_callback es funktioniert und es ist toll.

-Thomas

Ich fand dies sehr hilfreich, vielen Dank für das verlassen Sie es
kein Problem - froh, dass es sinnvoll war .

InformationsquelleAutor tsdexter

3

Hier ist meine Lösung für die verbindliche Ereignisse an eine oder mehrere Texteingabefelder zu jeder Zeit, angesichts dieser code ist angehängt nach Einbindung des tinymce javascript-Datei in Ihre Seite. (In anderen Worten, das einzige, was erforderlich für diese zu arbeiten, ist die Existenz der 'tinymce' - variable).
```
//Loop already initialised editors
for(id in tinymce.editors){
    if(id.trim()){
        elementReady(id);
    }
}

//Wait for non-initialised editors to initialise
tinymce.on('AddEditor', function (e) {
    elementReady(e.editor.id);
});

//function to call when tinymce-editor has initialised
function elementReady(editor_id){

    //get tinymce editor based on instance-id
    var _editor = tinymce.editors[editor_id];

    //bind the following event(s)
    _editor.on("change", function(e){

        //execute code
    });
}
```
Beachten Sie, dass der 'change' - Ereignis ist nicht verpflichtet, immer trigger sofort, nachdem sich etwas geändert hat. Laut der Dokumentation, es "wird ausgelöst, wenn sich änderungen im editor, die zu einem undo-Ebene Hinzugefügt werden." Die in meiner Erfahrung passiert nicht immer, wenn Sie erwarten, dass es geschehen wird.

Einen Weg, dies zu überwinden, ist durch die Bindung mehrerer Ereignisse, wie "input ändern", es gibt jedoch einige überschneidungen, die dann gefiltert werden.

InformationsquelleAutor Gabe Hiemstra
2

In TinyMCE 4, onChange, gibt es nicht. Sie haben zu verwenden:
```
tinymce.get('myeditorname').on("change", function() { alert("stuff"); });
```
InformationsquelleAutor Ed Zavada

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.