tinymce カスタムプラグインの開発

序文

最近 tinymce 数式のプラグインを使用する必要があったため、tinymce のバージョンが 4.x から 5.x にアップグレードされました。そのため、以前に作成したプラグインは 5.x バージョンでは互換性がなくなりました。バージョン 5.x の開発プロセスの記録です。

準備

まず tinymce パッケージをダウンロードし、開発するプラグインファイルをpluginsフォルダーに置く必要があります。

カスタムプレースホルダー

まずボタンを作成し、ボタンをクリックしてダイアログボックスをポップアップ表示し、必要な数のスペースを入力します。

tinymce.PluginManager.add('yxnewformat', function (editor, url) {
    
    
  // 点击事件
  editor.on('dblclick', function () {
    
    
    var sel = editor.selection.getContent();
    var path = /\<img(.*?)src="data:image\/png;base64,[A-Za-z0-9+/=]*"(.*?)data-latex="(.*?)" \/>/g;
    var path2 = /data-latex="(.*?)"/g;

    if (sel.search(path) == 0) {
    
    
      sel.replace(path2, function ($0, $1) {
    
    
        var param = encodeURIComponent($1);
        // openDialog(param);
        console.log('点击空格');
        return $0;
      });
    }
  });
  // 弹出层
  var openDialog = function (param) {
    
    
    return editor.windowManager.open({
    
    
      title: '请输入需要的空格个数',
      width: 785,
      height: 475,
      body: {
    
    
        type: 'panel',
        size: 1,
        items: [
          {
    
    
            type: 'input',
            name: 'nums',
            label: '个',
          },
        ],
      },
      buttons: [
        {
    
    
          type: 'cancel',
          text: 'Close',
        },
        {
    
    
          type: 'submit',
          text: 'Save',
          primary: true,
        },
      ],
      onSubmit: function (api) {
    
    
        var data = api.getData();
        // Insert content when the window form is submitted
        console.log('选择：' + data);
        // console.log('空格数: ' + data.nums);
        const num = '&nbsp;'.repeat(Number(data.nums));
        console.log('num', num);
        const e = `<span class="pl mceNonEditable"><b>${
      
      num}</b></span>`;
        editor.insertContent(e);
        // editor.insertContent('空格数: ' + e);
        api.close();
      },
    });
  };

  // 占位符
  editor.ui.registry.addButton('yxnewformat', {
    
    
    text: '[ ]',
    tooltip: '插入占位符',
    onAction: function () {
    
    
      openDialog();
      // openDialog1();
      console.log('addButton点击空格');
    },
  });
  editor.ui.registry.addMenuItem('yxnewformat', {
    
    
    text: '空格',
    onAction: function () {
    
    
      openDialog();
      console.log('addMenuItem点击空格');
    },
  });

  return {
    
    
    getMetadata: function () {
    
    
      return {
    
    
        name: '空格',
        url: 'http://hgcserver.gitee.io',
      };
    },
  };
});

このプラグインを使用するには、上記のコードを TinyMCE の構成オプションに追加します。例えば：

tinymce.init({
    
    
  plugins: 'yxnewformat',
  toolbar: 'yxnewformat'
});

ここに画像の説明を挿入構成が完了すると、この場所にもう 1 つガジェットがあることがわかります。クリックするとダイアログボックスが表示されます。

必要なスペースの数を入力し、「保存」をクリックします。
スペースの数はすでに表示されています。
これでカスタムプラグインが完成しました。

要約する

このプラグインは国内のドキュメントが比較的少ないため、開発中に適当なケースが見つからず、自分で少し調べるしかありません。APIドキュメントアドレス