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

配置完成之后就可以看到，这个地方多个一个小工具。点击弹出对话框。

输入你需要的空格数，点击保存。
空格数已经展出出来了。
到这一步，自定义插件已经完成了。

总结

由于这个插件国内的文档比较少，在开发的过程中找不到合适的案例，只能自己一点点的摸索。api文档地址