TinyMCE: ソースコード保存後に変更イベントをトリガーする方法

イベントリスナーを使用する方法: TinyMCEには、エディタ内のテキストが変更されたときに発生する「change」イベントをキャプチャするイベントリスナーを設定することができます。以下はその例です。

tinymce.init({
  selector: '#myTextarea',
  setup: function (editor) {
    editor.on('change', function (e) {
      // 変更イベントの処理
    });
  }
});

上記のコードでは、#myTextareaというIDを持つ要素にTinyMCEを初期化しています。setupコールバック関数内で、changeイベントが発生したときに実行される処理を定義しています。

カスタムコマンドを使用する方法: TinyMCEでは、execCommandメソッドを使用してカスタムコマンドを実行できます。ソースコードの保存後にこのカスタムコマンドを実行し、変更イベントをトリガーすることができます。以下はその例です。

tinymce.init({
  selector: '#myTextarea',
  setup: function (editor) {
    editor.addCommand('saveAndTriggerChange', function () {
      // ソースコードの保存処理
      editor.fire('change');
    });
    editor.addButton('saveButton', {
      text: '保存',
      icon: 'save',
      cmd: 'saveAndTriggerChange'
    });
  }
});

上記のコードでは、saveAndTriggerChangeというカスタムコマンドを定義し、fireメソッドを使用してchangeイベントを発火させています。また、addButtonメソッドを使用して、エディタに「保存」ボタンを追加しています。

これらの方法を使用することで、TinyMCEのソースコード保存後に変更イベントをトリガーすることができます。必要に応じて、上記のコードをカスタマイズして使用してください。