tinymce制作一个插件

文件结构

首先在TinyMCE/plugins文件夹中创建一个与插件同名的文件夹。该文件夹内的插件js文件命名方式有两种。一种为plugin.js，当开发人员使用未压缩的tinymce.js时，会使用该文件。同样，在使用tinymce.min.js时，会加载加载plugin.min.js。所以如果你不确定会使用tinymce.js还是tinymce.min.js，干脆两个都留着，一个叫plugin.js，一个叫plugin.min.js。

插件的文件结构示例：

/tinymce/plugins/example/plugin.js
/tinymce/plugins/example/plugin.min.js

使用插件的方法与自带插件是一样的：

tinymce.init({
    selector: 'textarea',
    plugins: 'example',
});

一个插件示例

这个插件示例演示了如何添加一个简单的工具栏按钮和菜单项。此按钮打开一个对话框，允许在编辑器中输入标题。菜单项将打开与按钮相同的对话框。

tinymce.PluginManager.add('example', function(editor, url) {
  var openDialog = function () {
    return editor.windowManager.open({
      title: '这里是弹窗标题',
      body: {
        type: 'panel',
        items: [
          {
            type: 'input',
            name: 'title',
            label: 'Title'
          }
        ]
      },
      buttons: [
        {
          type: 'cancel',
          text: 'Close'
        },
        {
          type: 'submit',
          text: 'Save',
          primary: true
        }
      ],
      onSubmit: function (api) {
        var data = api.getData();
        // 将输入框内容插入到内容区光标位置
        editor.insertContent('插入的文字是: ' + data.title);
        api.close();
      }
    });
  };
  
  // 注册一个工具栏按钮名称
  editor.ui.registry.addButton('example', {
    text: '工具栏按钮名',
    onAction: function () {
      openDialog();
    }
  });

  // 注册一个菜单项名称 menu/menubar
  editor.ui.registry.addMenuItem('example', {
    text: 'Example菜单名',
    onAction: function() {
      openDialog();
    }
  });

  return {
    getMetadata: function () {
      return  {
        //插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
        name: "Example plugin",//插件名称
        url: "http://exampleplugindocsurl.com", //作者网址
      };
    }
  };
});