jquery - event - tinymce on init

¿Cómo detectar cambios en TinyMCE?

Question

Agregué el editor TinyMCE (versión 4.0.2) en un formulario HTML existente en mi proyecto (PHP, Codeigniter). Mi objetivo final es habilitar el botón de envío de formulario si se produce algún cambio en el formulario, incluido el editor TinyMCE. Solo puedo hacerlo con el formulario excepto el editor TinyMCE. No pude detectar los cambios de TinyMCE.

Quiero detectar si se produce algún cambio cuando la tecla arriba. He visto que Tinymce tiene una función de cambio como la de abajo.

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

Puse el código de configuración superior dentro de la siguiente función de inicio, pero no he encontrado ningún resultado.

tinymce.init({ });

¿Puedes decir cómo detectar un cambio, o alguna idea mejor?

Answer 1

Este trabajo está bien para mí en todas las claves de acceso, cortar, copiar, pegar

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

Answer 2

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

Explicación:

activado ("cambiar") es para detectar cambios en eventos de mouse si hace clic en el icono de la barra de herramientas o en la selección del menú. También es capaz de detectar el evento del teclado, pero solo después de un foco perdido (no en tiempo real).

on ("keyup") es para detectar cambios en eventos de teclado en tiempo real

Answer 3

Funciona para mi:

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

además

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

o

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

Se encuentra en la página http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor en la sección Evento

Answer 4

Hemos encontrado que el evento de cambio a veces solo se activa después de presionar enter; Parece estar vinculado al proceso de deshacer . Además, el evento keyup se dispara cuando el contenido no ha cambiado, como cuando se presionan shift o CMD-A .

Por lo tanto, utilizamos tanto el cambio como el ajuste de teclas , y comparamos el último valor procesado con el valor actual para detectar un cambio real.

Esta solución también funciona para cortar y pegar, y modificaciones de los elementos del menú.

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

Answer 5

Hola, he intentado usar esto:

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

Esto es para actualizar un campo oculto "cambiado" con el valor de 1 para que cuando un usuario intente cerrar el panel o salir de la página, se le informe que tiene datos no guardados.

Mi culpa es que esto solo funciona si se realizan 2 o más cambios, por ejemplo, si me di cuenta de que no había terminado con una parada completa "." Regresé para agregar esto y luego, por alguna razón, hizo clic en cerrar. Podría salir de la página sin que me avisaran de los cambios.

Answer 6

Llego tarde a la fiesta, pero para futuras referencias aquí es cómo lo haces en 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());
       });
   }
});

Answer 7

Lo siguiente capturará "keyup" y otros eventos de cambio (copiar, pegar, centrar, 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());
}

Answer 8

Para Tinymce 4 me funciona,

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

EDITAR:

Tenga en cuenta que keyup no capturará todos los casos. por ejemplo copy / paste / cut desde el menu y no desde el keyboard

Si quieres puedes capturarlos con

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

                });

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

                });

NOTA: si captura cut y paste desde tinymce, probablemente no debería procesar esos eventos desde keyup. Lo que hice es guardar solo si las claves no son claves para cut y paste es decir:

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

},

y llamar a esta función desde el evento keyup. De esta manera te ahorrarás algunas acciones dos veces en cortar y pegar

NOTA: pronto descubrirá que cualquier style changes que ocurra desde el menu NO desencadenará ese evento también.

Todavía estoy buscando una respuesta para capturar el cambio de estilo.

Answer 9

Prueba esto:

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

Haga clic para la referencia aquí

Answer 10

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