成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

TinyMCE插件開發(fā)

aboutU / 1692人閱讀

摘要：目前網(wǎng)上關(guān)于插件開發(fā)的文章少得可憐，下面分享最近的經(jīng)歷，如何快速上手開發(fā)一個插件。第六步調(diào)試插件在打開的網(wǎng)頁中可以看到工具欄中實現(xiàn)了插件。

TinyMCE是一個非常優(yōu)秀的輕量級的所見即所得HTML編輯器，歷史悠久，開源，在github的start也非常高的，且長期保持更新。
TinyMCE的官方插件不少，基本能滿足日常需求，但是有時候我們還需要一些結(jié)合業(yè)務(wù)的功能。這時官方插件無法滿足，就需要我們自己開發(fā)插件。目前網(wǎng)上關(guān)于TinyMCE插件開發(fā)的文章少得可憐，下面分享最近的經(jīng)歷，如何快速上手開發(fā)一個TinyMCE插件。
資料
TinyMCE官方提供了正確開發(fā)插件的文檔說明（https://www.tinymce.com/docs/...）、提供相關(guān)接口文檔（https://www.tinymce.com/docs/...）
根據(jù)TniyMCE文檔說明，開發(fā)插件需要使用 Yeoman generator 構(gòu)建開發(fā)環(huán)境

第一步：安裝nodejs和npm
根據(jù)自己的操作系統(tǒng)到https://nodejs.org/ 下載nodejs安裝

第二步：安裝Yeoman yo腳手架

npm install -g yo

等待安裝完成后。

第三步：安裝 generator-tinymce 腳手架模板

npm install -g generator-tinymce

繼續(xù)等待安裝完成后。

第四步：創(chuàng)建生成插件項目
首先，在硬盤上建立工作空間，例如：D: inymcedemoplugin
cd 進(jìn)入文件目錄

cd D:	inymcedemoplugin

使用 yo tinymce 命令生成項目

yo tinymce

首次運(yùn)行會出現(xiàn)一個詢問提示， 輸入 y 回車即可。

之后就是進(jìn)入到項目的配置選項了。

根據(jù)提示配置選項如下：

? 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創(chuàng)建庫
? What"s your name: xxx //插件作者名稱
? Your email (optional): [email protected] //插件作者email
? Your website (optional): //插件作者網(wǎng)站
? Which license do you want to use? Apache 2.0 //采用的開源協(xié)議，可選 No License 不開源，或者Apache2.0 MIT  BSD 等


等待一會項目文件初始化創(chuàng)建完成。

第五步：插件項目結(jié)構(gòu)
使用開發(fā)工具載入文件目錄，就可以開發(fā)調(diào)試發(fā)布TinyMCE插件了，這里我們使用vscode作為開發(fā)工具
打開工作空間后，可以看到項目結(jié)構(gòu)如下：

如圖所示 src/index.js是插件的聲明文件；src/plugin.js 是插件的主體文件，所有功能代碼都在這里編寫。具體調(diào)用TinyMCE接口可以參照接口文檔（https://www.tinymce.com/docs/...）
這里demo初始化實現(xiàn)了一個彈窗輸入文字插入到編輯器中的插件。

第六步：調(diào)試插件

 npm start

在打開的網(wǎng)頁中可以看到TinyMCE工具欄中實現(xiàn)了demoplugin插件。

第7步：打包插件
也非常簡單使用命令

 npm run build

稍等片刻就編譯打包好了，在項目的 dist/demoplugin目錄下有插件相關(guān)的3個文件：

plugin.js //未經(jīng)壓縮的插件文件

plugin.min.js //壓縮過的插件文件

LICENSE //插件開源協(xié)議文件

注：因為默認(rèn)示例中引入了lodash打包后文件非常大，lodash實際使用中并不必須

第8步：插件的使用
只需要將打包的文件拷貝TinyMCE的tinymce/plugins 目錄下，在需要地方引入并配置調(diào)用，就可以在生產(chǎn)項目中實用我們開發(fā)好的插件了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95910.html

相關(guān)文章

  • tinymce與prism代碼高亮實現(xiàn)及漢化的配置

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

    番茄西紅柿 評論0 收藏0

  • vue 集成富文本tinymce

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

    qpal 評論0 收藏0

  • django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

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

    HackerShell 評論0 收藏0

  • django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

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

    Honwhy 評論0 收藏0

  • django項目admin后臺整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

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

    k00baa 評論0 收藏0

發(fā)表評論

0條評論

aboutU

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<