tinymce custom plug-in development

foreword

Due to the need to use the plug-in of tinymce mathematical formula recently, the version of tinymce was upgraded from 4.x to 5.x, which caused the previously written plug-in to be incompatible in the 5.x version. Here is a record for the development process of version 5.x.

Preparation

You need to download the tinymce package first, and put the plugin files to be developed into the plugins folder.

custom placeholder

Create a button first, click the button to pop up a dialog box, and enter the desired number of spaces.

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

To use this plugin, add the above code to TinyMCE's configuration options. For example:

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

After the configuration is complete, you can see that there is one more gadget in this place. Click to pop up a dialog box.

Enter the number of spaces you need and click Save.
The number of spaces is already displayed.
At this point, the custom plugin has been completed.

Summarize

Since there are relatively few domestic documents for this plug-in, no suitable case can be found during the development process, so I can only explore a little bit by myself. api document address