UEditor文本編輯器自定義工具按鈕的詳細(xì)教程

UEditor文本編輯器中文版是百度Web前端研發(fā)部開(kāi)發(fā)的，能夠獲得所見(jiàn)即所得的富文本在線(xiàn)編輯器。該編輯器中能夠提供可定制、輕量，以及注重用戶(hù)體驗(yàn)等等特點(diǎn)。UEditor文本編輯器功能非常強(qiáng)大，開(kāi)源基于BSD協(xié)議，并且該編輯器的設(shè)計(jì)界面非常的簡(jiǎn)潔清晰，設(shè)計(jì)得很人性化，能夠?yàn)橛脩?hù)提供更加方便快捷的操作，Ueditor中文版允許互聯(lián)網(wǎng)開(kāi)發(fā)者自由傳播和使用代碼，使開(kāi)發(fā)者可以根據(jù)實(shí)際應(yīng)用和需求自由定制。并且能夠幫助更多的網(wǎng)站開(kāi)發(fā)者解決各項(xiàng)問(wèn)題，節(jié)約用戶(hù)在使用過(guò)程中的花費(fèi)時(shí)間，更加有效的降低了各大企業(yè)的開(kāi)發(fā)成本等等，有需要的用戶(hù)可以在本站直接進(jìn)行下載！

UEditor文本編輯器圖一

1. 用戶(hù)體驗(yàn)：支持多種瀏覽器的使用，能夠屏蔽各種瀏覽器之間的差異，提供良好的文本編輯體驗(yàn)。

2. 定制下載：通過(guò)細(xì)粒度拆分核心代碼，能夠?yàn)橛脩?hù)提供可視化的功能選擇和自定義文件下載。

3. 開(kāi)源免費(fèi)：編輯器中的開(kāi)源基于MIT協(xié)議，完美的支持商業(yè)和非商業(yè)用戶(hù)的免費(fèi)使用和任意修改。

4. 功能全面：UEditor文本編輯器中涵蓋有流行的富文本編輯器特色功能，擁有獨(dú)創(chuàng)多種全新編輯操作模式。

5. 專(zhuān)業(yè)穩(wěn)定：該軟件由百度專(zhuān)業(yè)QA團(tuán)隊(duì)持續(xù)跟進(jìn)，通過(guò)上千自動(dòng)化測(cè)試案例，能夠?yàn)橛脩?hù)帶來(lái)良好的使用體驗(yàn)。

如果用戶(hù)在該編輯器中想要使用自定義工具的按鈕，首先需要進(jìn)行自定義的參數(shù)設(shè)置，在軟件中需要加入按鈕UI，然后再對(duì)UI進(jìn)行更改，接下來(lái)為UI添加事件。但是很多用戶(hù)卻不知道具體的操作方法，接下來(lái)小編就給大家來(lái)詳細(xì)介紹一下自定義工具按鈕UI的具體使用流程，幫助小伙伴們更快的上手使用該軟件，一起來(lái)詳細(xì)了解一下吧！

第一步：打開(kāi)軟件之后，我們需要找到editor_config.js，或者是ueditor.config.js)文件中的toolbars參數(shù)，并且需要增加“camnpr”字符串，根據(jù)對(duì)應(yīng)事項(xiàng)將labelMap進(jìn)行添加，可以用于鼠標(biāo)上按鈕時(shí)的提示功能。

UEditor文本編輯器圖二

第二步：接下來(lái)找到ui/editorui.js文件中的btnCmds數(shù)組，同樣的方法需要增加一個(gè)“camnpr”字符串。如果找不到editorui.js文件的話(huà)，可以直接在ueditor.all.js文件里搜索var btnCmds = [，找到此位置就能看到。

UEditor文本編輯器圖三

第三步：在這里我們需要添加一個(gè)'camnpr': '~/dialogs/emotion1/camnpr.html'。這個(gè)camnpr.html頁(yè)面時(shí)自定義的頁(yè)面，如果你要點(diǎn)擊此按鈕彈出這個(gè)頁(yè)面，還需要加入如下代碼。先在ueditor.all.js頁(yè)面找到 editorui["emotion"] = function 在這段代碼下邊加入即可。

UEditor文本編輯器圖四

如果是需要這項(xiàng)功能的用戶(hù)，在這里就不用添加代碼了，就可以直接進(jìn)行操作啦！

UEditor文本編輯器圖五