jquery - TinyMCE の変更を検出するには?

Question

プロジェクト (PHP、Codeigniter) の既存の HTML フォームに TinyMCE (バージョン 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({ });

変化を検出する方法、またはより良いアイデアを教えていただけますか?

score 34 · Accepted Answer

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はすべてのケースをキャプチャするわけではないことに注意してください。たとえばcopy/ paste/cutからmenuではなくからkeyboard

必要に応じて、それらをキャプチャできます

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

                });

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

                });

注意: tinymce からキャプチャする場合はcut、pastekeyup からこれらのイベントを処理しないでください。私がしたことは、キーがcut& pasteie のキーでない場合にのみ保存することです:

 /**
 * 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 イベントからこの関数を呼び出します。このようにして、カットアンドペーストでいくつかのアクションを2回実行する必要がなくなります

すぐに、style changesから発生したものはそれらのイベントもトリガーしないmenuことがわかります..

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

score 13 · Accepted Answer

それは私のために働く：

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にあります。

score 10 · Accepted Answer

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

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

score 3 · Accepted Answer

TinyMCE 5.4.1 を使用しています

「 keyup、copy、paste、cut 」などの多くのイベントと、「 newrow」、「newcell 」などのテーブル固有のイベントを同時に試しましたが、最終的に、すべての変更を実際にキャプチャする組み合わせは'input NodeChange' (最初のイベントなどのすべてのケースをカバーします)

editor.on('input NodeChange', function() {
   console.log('content updated');
});

score 2 · Accepted Answer

上記の解決策では、tinymce updo ボタンが使用されたかどうかを検出できません。残念ながら、これもそうではありませんが、もう少し意味的に正しいです。

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

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

score 2 · Accepted Answer

Enter キーを押した後にのみ変更イベントが発生する場合があることがわかりました。元に戻す処理に結びついているようです。また、 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);
    }
});

score 0 · Accepted Answer

TinyMCE が使用するテキストエリアでフォームの変更を検出するために、イベントをトリガーしていますeditor.targetElm

setup: function(editor) {
  editor.on('change', function(e){
    editor.targetElm.dispatchEvent(new Event('change'));
  })
},

これで、フォーム検証または他のスクリプトで通常の方法でイベントをリッスンできます

inputElement.onchange = (e) => {
  // do something
};

jquery - TinyMCE の変更を検出するには?

13 に答える 13

編集：

Related

Reference