TinyMCE插件开发

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

等待安装完成后。

第三步：安装 generator-tinymce 脚手架模板

npm install -g generator-tinymce

继续等待安装完成后。

第四步：建立生成插件项目
首先，在硬盘上创建工做空间，例如：D:\tinymce\demoplugin
cd 进入文件目录

cd D:\tinymce\demoplugin

使用 yo 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插件了，这里咱们使用vscode做为开发工具
打开工做空间后，能够看到项目结构以下：

如图所示 src/index.js是插件的声明文件；src/plugin.js 是插件的主体文件，全部功能代码都在这里编写。具体调用TinyMCE接口能够参照接口文档（https://www.tinymce.com/docs/...）
这里demo初始化实现了一个弹窗输入文字插入到编辑器中的插件。

第六步：调试插件

npm start

在打开的网页中能够看到TinyMCE工具栏中实现了demoplugin插件。

第7步：打包插件
也很是简单使用命令

npm run build

稍等片刻就编译打包好了，在项目的 dist/demoplugin目录下有插件相关的3个文件：

• plugin.js //未经压缩的插件文件
• plugin.min.js //压缩过的插件文件
• LICENSE //插件开源协议文件

注：由于默认示例中引入了lodash打包后文件很是大，lodash实际使用中并没必要须

第8步：插件的使用只须要将打包的文件拷贝TinyMCE的tinymce/plugins 目录下，在须要地方引入并配置调用，就能够在生产项目中实用咱们开发好的插件了。