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 目錄下，在須要地方引入並配置調用，就能夠在生產項目中實用咱們開發好的插件了。