UEditor自定義工具使用技巧圖文介紹

Ueditor是一款所見即所得的富文本在線編輯器，其中文版是由百度Web前端研發(fā)部設計推出的產(chǎn)品，開源基于BSD協(xié)議。具有可定制，輕量等特點，還特別注重用戶體驗，軟件界面簡潔明晰、功能非常強大，一直致力于提升用戶的使用體驗，設計得很人性化和操作方便快捷。Ueditor使開發(fā)者可以根據(jù)實際應用和需求自由定制，允許互聯(lián)網(wǎng)開發(fā)者使用代碼和自由傳播，感興趣的用戶快來本站下載體驗吧。

UEditor自定義工具使用技巧圖文介紹圖1

1、功能全面

獨創(chuàng)多種全新編輯操作模式，涵蓋流行富文本編輯器特色功能。

2、用戶體驗

提供良好的富文本編輯體驗，屏蔽各種瀏覽器之間的差異。

3、開源免費

支持商業(yè)和非商業(yè)用戶的免費使用和任意修改，開源基于MIT協(xié)議。

4、定制下載

提供可視化功能選擇和自定義下載， 細粒度拆分核心代碼。

5、專業(yè)穩(wěn)定

上千自動化測試用例支持，百度專業(yè)QA團隊持續(xù)跟進。

UEditor自定義工具使用技巧圖文介紹圖2

1.軟件體積小巧，性能優(yōu)良，使用十分簡單；

2.分成架構，方便定制和擴展；

3.滿足不同層次用戶的需求，更加適合團隊開發(fā)；

4.豐富和完善中文文檔；

5. 多個瀏覽器支持： MSIE，F(xiàn)ireFox和Chrome

6. 擁有專業(yè)QA團隊持續(xù)支持，帶給用戶更好的使用體驗

7.已應用在百度各大產(chǎn)品線上

自定義工具按鈕

首先需要進行自定義的參數(shù)設置，很多用戶不知道整體的操作方法，在軟件中使用自定義工具按鈕，軟件對UI進行更改，加入按鈕UI，然后為UI添加事件，下面小編就為大家?guī)�來一個具體的流程。

第一步：打開ueditor.config.js或者editor_config.js文件，找到其中的toolbars參數(shù)，對應著添加一個labelMap，增加一個“camnpr”字符串，用于鼠標移上按鈕時的提示。

UEditor自定義工具使用技巧圖文介紹圖3

第二步：找到ui/editorui.js文件中，選擇其中的btnCmds數(shù)組，同樣地在其中增加“camnpr”字符串一個。也可以直接在ueditor.all.js文件里，搜索var btnCmds = [，如果找不到editorui.js的話；

UEditor自定義工具使用技巧圖文介紹圖4

找到如下圖所示的位置，在此位置我們可以看到一些參數(shù)：

UEditor自定義工具使用技巧圖文介紹圖5

在此我們可以添加一個'camnpr': '~/dialogs/emotion1/camnpr.html'

如果你要點擊此按鈕彈出這個頁面， 這個camnpr.html頁面時自定義的頁面，還需要加入如下代碼：

先找到ueditor.all.js頁面，在這個頁面選擇 editorui["emotion"] = function，接著在這段代碼下邊加入，如下圖所示的代碼：