Как изменить TinyMce?

Ответ 1

Для Tinymce 4 это работает для меня,

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

EDIT:

Обратите внимание, что keup не будет захватывать все случаи. например copy/paste/cut из menu, а не от keyboard

если вы хотите, вы можете захватить их с помощью

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

                });

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

                });

Примечание если вы захватили cut и paste из tinymce, вы, вероятно, не должны обрабатывать это событие из keyup. то, что я сделал, это сохранить, только если ключи не являются ключами для cut и paste i.e:

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

},

и вызовите эту функцию из события keyup. таким образом вы сэкономите себя, сделайте несколько действий дважды при вырезании и вставке

ПРИМЕЧАНИЕ скоро вы поймете, что любой style changes, который происходит из menu, будет НЕ запускать это событие.

Я все еще ищу ответ, чтобы снять изменения стиля.

Ответ 2

Я опаздываю на вечеринку, но для дальнейших ссылок вот как вы это делаете в 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());
       });
   }
});

Ответ 3

Это работает для меня:

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) {  

или

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

Найдено на странице http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor в разделе Событие

Ответ 4

Далее будут записаны "keyup" и другие события изменения (копирование, вставка, центр и т.д.):

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

Ответ 5

Im, используя это в 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());
        });
   }
});

Объяснение:

on ( "change" ) предназначен для обнаружения изменений в событии мыши, если вы нажмете значок панели инструментов или выберите из меню. Он также способен обнаруживать событие клавиатуры, но только после потери фокуса (не в реальном времени).

on ( "keyup" ) предназначен для обнаружения изменений в событии клавиатуры в реальном времени

Ответ 6

Попробуйте следующее:

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

Нажмите для Rreference здесь

Ответ 7

Мы обнаружили, что событие изменения иногда срабатывает только после нажатия клавиши enter; Кажется, это связано с обработкой отмены. Кроме того, событие keyup срабатывает, когда содержимое не изменилось, например, когда сдвиг или CMD-A нажаты.

Итак, мы используем как изменение, так и keyup, и сравниваем последнее обработанное значение с текущим значением для обнаружения реального изменения.

Это решение также работает для вырезания, вставки и изменения элементов меню.

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

Ответ 8

Привет, я пробовал использовать это:

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

Это обновление скрытого поля "изменено" со значением 1, так что, когда пользователь пытается закрыть панель или оставить страницу, они сообщаются, что у них есть несохраненные данные.

Моя ошибка в том, что это работает, только если сделаны 2 или более изменений - например, если я заметил, что я не закончил с полной остановкой ". вернулся, чтобы добавить это, а потом по какой-то причине нажал закрыть, я мог бы оставить страницу, не будучи предупрежденной об изменениях