web-dev-qa-db-ja.com

TinyMCEの変更を検出する方法は？

プロジェクト（PHP、Codeigniter）の既存のHTMLフォームにTinyMCE（version 4.0.2）エディターを追加しました。私の最後の目標は、TinyMCEエディターを含むフォームで変更が発生した場合にフォーム送信ボタンを有効にすることです。 TinyMCEエディター以外のフォームでのみできます。 TinyMCEの変更を検出できませんでした。

キーアップ時に変更が発生したかどうかを検出したい。 tinymceには以下のようなonchange機能があることがわかりました。

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

上部のセットアップコードを以下のinit関数に入れましたが、出力が見つかりませんでした。

tinymce.init({ });

変更を検出する方法、またはより良いアイデアを教えてもらえますか？

jquerytinymce
34
user2603482

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

編集：

Keyup wo n'tはすべてのケースをキャプチャすることに注意してください。たとえば、copyからではなく、pasteからのcut/menu/keyboard

あなたが望むなら、あなたはそれらをキャプチャすることができます

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

                });

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

                });

[〜＃〜] note [〜＃〜] tinymceからcutおよびpasteをキャプチャする場合、おそらくキーアップからのイベントを処理しないでください。私がやったことは、キーが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();

},

この関数をキーアップイベントから呼び出します。このようにして、カットアンドペーストでいくつかのアクションを2回実行することで、自分自身を保存できます。

[〜＃〜] note [〜＃〜]すぐに、style changesから発生するmenu will [〜＃〜] not [〜＃〜]これらのイベントもトリガーします。

私はまだスタイルの変化を捉えるための答えを探しています。

31
user2603482

私はパーティーに遅れていますが、今後の参考のために、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());
       });
   }
});
59
sica07

それは私のために働く：

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 Section Event

12
Martin

以下は、「キーアップ」およびその他の変更イベント（コピー、貼り付け、中央揃えなど）をキャプチャします。

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

私は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
Syukri Hakim Abdul Rahman
tinymce.init({
    // ...
    setup: function(editor) {
        editor.on('Paste Change input Undo Redo', function () {
            if (editorChangeHandler) {clearTimeout(editorChangeHandler);}
            editorChangeHandler = setTimeout(function() {
                console.log('changed');
            }, 100);
        });
    }
    // ,...
});
4
Nagy Zoltán

これを試して：

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

参照はこちら を選択します

3
Nil'z

これはすべての条件で私にとってうまくいくキーアップ、カット、コピー、ペースト

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

変更イベントは、Enterキーを押した後にのみ発生することがあります。 ndo processingに結びついているようです。また、shiftまたはCMD-Aが押されたときなど、コンテンツが変更されていないときに、keyupイベントが発生します。

したがって、changeと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);
    }
});
2
Steven Spungin

上記のソリューションは、tinymce updoボタンが使用されたかどうかを検出しません。残念ながら、どちらもこれはしませんが、もう少し意味的に正しいです。

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

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

1
user1032531