TinyMCE插件開發

aboutU 發布于2019-08-22 18:29 / 1683人閱讀

摘要：目前網上關于插件開發的文章少得可憐，下面分享最近的經歷，如何快速上手開發一個插件。第六步調試插件在打開的網頁中可以看到工具欄中實現了插件。

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: inymcedemoplugin
cd 進入文件目錄

cd D:	inymcedemoplugin

使用 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 目錄下，在需要地方引入并配置調用，就可以在生產項目中實用我們開發好的插件了。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95910.html

tinymce與prism代碼高亮實現及漢化的配置

摘要：簡單介紹是一個輕量級的基于瀏覽器的所見即所得編輯器，由寫成。它對和都有著非常良好的支持。功能方強大，并且功能配置靈活簡單。另一特點是加載速度非常快的。所以我們使用作為代碼高亮插件。簡單介紹：TinyMCE是一個輕量級的基于瀏覽器的所見即所得編輯器，由JavaScript寫成。它對IE6+和Firefox1.5+都有著非常良好的支持。功能方強大，并且功能配置靈活簡單。另一特點是加載速度非常快的...

番茄西紅柿 2019-04-23 13:31 評論0 收藏0
vue 集成富文本tinymce

摘要：開發環境開發語言插件安裝可以使用里面的文件，下載后可以在里面查看如下未目錄結構可以將整個結構拷在里面，為了節省打包后的文件大小可以將以方式導入放在中附上封裝的代碼可以直接導入使用引入中文包地址可導入文件進行上傳圖片構造的選擇器可以把下面的開發環境 1. vscode 開發語言 1. vue 2. javaScript 插件安裝 1. npm install tinymce -S ...

qpal 2019-08-23 13:48 評論0 收藏0
django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

摘要：選擇該頁面綁定的標簽指定圖片上傳處理目錄注其中為了顯示為中文，標明了中文，同時需要下載語言包放到對應的文件夾下。前言我們常因為django的自帶admin后臺功能而選擇該框架，但也因為其自動生成的特殊性而在做出特別的更改的時候束手束腳，鑒于項目已經采用了django，而后臺要求能夠直接上傳富文本內容直接用于網頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...

HackerShell 2019-08-21 17:29 評論0 收藏0
django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

摘要：選擇該頁面綁定的標簽指定圖片上傳處理目錄注其中為了顯示為中文，標明了中文，同時需要下載語言包放到對應的文件夾下。前言我們常因為django的自帶admin后臺功能而選擇該框架，但也因為其自動生成的特殊性而在做出特別的更改的時候束手束腳，鑒于項目已經采用了django，而后臺要求能夠直接上傳富文本內容直接用于網頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...

Honwhy 2019-08-01 17:56 評論0 收藏0
django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

摘要：選擇該頁面綁定的標簽指定圖片上傳處理目錄注其中為了顯示為中文，標明了中文，同時需要下載語言包放到對應的文件夾下。前言我們常因為django的自帶admin后臺功能而選擇該框架，但也因為其自動生成的特殊性而在做出特別的更改的時候束手束腳，鑒于項目已經采用了django，而后臺要求能夠直接上傳富文本內容直接用于網頁顯示，定制性高，后來翻了目前較為知名的幾款富文本編輯框，覺得還是tiny...

k00baa 2019-07-30 14:56 評論0 收藏0