前言
TinyMCE是一个非常优秀的轻量级的所见即所得HTML编辑器，历史悠久，开源，在github的start也非常高的，且长期保持更新。 TinyMCE的官方插件不少，基本能满足日常需求，但是有时候我们还需要一些结合业务的功能。这时官方插件无法满足，就需要我们自己开发插件。目前网上关于TinyMCE插件开发的文章少得可怜，下面分享最近的经历，如何快速上手开发一个TinyMCE插件。
官方资料
TinyMCE官方提供了正确开发插件的文档说明（https://www.tinymce.com/docs/...）、提供相关接口文档（https://www.tinymce.com/docs/...） 根据TniyMCE文档说明，开发插件需要使用 Yeoman generator 构建开发环境
开发步骤
- 第一步：安装nodejs和npm 根据自己的操作系统到https://nodejs.org/ 下载nodejs安装
- 第二步：安装Yeoman yo脚手架 npm install -g yo 或者 yarn global add yo
- 安装 generator-tinymce 脚手架模板 npm install -g generator-tinymce 或者 yarn global add generator-tinymce
- 创建制作插件的项目 首先，在硬盘上建立工作空间。在该工作空间目录下执行命令 yo tinymce 首次运行会出现一个询问提示（是否上传反馈数据）， 输入 y 回车即可。 之后就是进入到项目的配置选项了： 根据提示配置选项如下： Plugin name: demoplugin //插件项目名称 How do you want to write your plugin? ES2015 //可以选ES2015 ，TypeScript 等 Use yarn instead of npm? No //是否使用yarn替代npm，这里我们选npm Skip git repo initialization? Yes //是否使用git创建库 What's your name: xxx //插件作者名称 Your email (optional): xxx@163.com //插件作者email Your website (optional): //插件作者网站 Which license do you want to use? Apache 2.0 //采用的开源协议，可选 No License 不开源，或者Apache2.0 MIT BSD 等 等待一会项目文件初始化创建完成：
- 插件目录结构 使用开发工具载入文件目录，就可以开发调试发布TinyMCE插件了。 如图所示 src/index.js是插件的声明文件；src/plugin.js 是插件的主体文件，所有功能代码都在这里编写。具体调用TinyMCE接口可以参照接口文档（https://www.tinymce.com/docs/...）。初始化生成的demo项目实现了一个弹窗输入文字插入到编辑器中的插件。
- 调试插件 npm start 在打开的网页中可以看到TinyMCE工具栏中实现了demoplugin插件。
- 打包插件 npm run build 稍等片刻就编译打包好了，在项目的 dist/demoplugin目录下有插件相关的3个文件： plugin.js //未经压缩的插件文件 plugin.min.js //压缩过的插件文件 LICENSE //插件开源协议文件 注：因为默认示例中引入了lodash打包后文件非常大，lodash实际使用中并不必须
- 使用插件 只需要将打包的文件拷贝TinyMCE的tinymce/plugins 目录下，在需要地方引入并配置调用，就可以在生产项目中实用我们开发好的插件了。具体可以参考static/index.html的示例调用方法。
- 示例项目（gitee）
强力特性：支持 Ctrl+C/Ctrl+V 上传，支持拖拽上传，也支持 QQ/微信截图上传。
