中文文档

此页更新时间：2019-05-04 21:52

此页英文文档：https://www.tiny.cloud/docs/advanced/creating-a-plugin/

为TinyMCE制作插件，可以使用Yeoman generator，也可以参考如下入门教程。在了解如何制作插件后，建议继续参阅API文档，并查看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", //作者网址
      };
    }
  };
});

example插件示例。

有关插件的本地化问题

在插件中或多或少会涉及到自定义的词语，如果想要让插件获得多语言支持，需要自定义语言。

在插件文件夹里，再新建一个langs文件夹，里面存放自定义的多语言文件。还以example插件为例，自定义的语言为“zh_CN”,则语言包文件路径应是：tinymce/plugins/example/langs/zh_CN.js

该js文件内容的结构类似.po文件，左侧是英文字符串，右侧是对应的翻译。

一个例子：

tinymce.addI18n('zh_CN', {
    'Example plugin': 'Example插件'
});

如果插件包内不包含编辑器language参数指定的语言，会报404错误，在制作插件时可将如下声明添加到顶部以避免报错。

tinymce.PluginManager.requireLangPack('example', 'zh_CN,es_ES');