當(dāng)前位置：首頁(yè) >

【UEditor】自定义插件：按钮

發(fā)布時(shí)間：2024/9/19 49 豆豆

生活随笔收集整理的這篇文章主要介紹了【UEditor】自定义插件：按钮小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

ueditor 1.4.3
【UEditor】介紹
代碼： https://gitee.com/mirrors/ueditor/tree/v1.4.3

官方自定義組件文檔

http://fex.baidu.com/ueditor/#dev-developer

示例：添加一個(gè)按鈕

參考 addCustomizeButton.js

addCustomizeButton.js源碼

UE.registerUI('button',function(editor,uiName){//注冊(cè)按鈕執(zhí)行時(shí)的command命令，使用命令默認(rèn)就會(huì)帶有回退操作editor.registerCommand(uiName,{execCommand:function(){alert('execCommand:' + uiName)}});//創(chuàng)建一個(gè)buttonvar btn = new UE.ui.Button({//按鈕的名字name:uiName,//提示title:uiName,//需要添加的額外樣式，指定icon圖標(biāo)，這里默認(rèn)使用一個(gè)重復(fù)的iconcssRules :'background-position: -500px 0;',//點(diǎn)擊時(shí)執(zhí)行的命令onclick:function () {//這里可以不用執(zhí)行命令,做你自己的操作也可editor.execCommand(uiName);}});//當(dāng)點(diǎn)到編輯內(nèi)容上時(shí)，按鈕要做的狀態(tài)反射editor.addListener('selectionchange', function () {var state = editor.queryCommandState(uiName);if (state == -1) {btn.setDisabled(true);btn.setChecked(false);} else {btn.setDisabled(false);btn.setChecked(state);}});//因?yàn)槟闶翘砑觔utton,所以需要返回這個(gè)buttonreturn btn; }/*index 指定添加到工具欄上的那個(gè)位置，默認(rèn)時(shí)追加到最后,editorId 指定這個(gè)UI是那個(gè)編輯器實(shí)例上的，默認(rèn)是頁(yè)面上所有的編輯器都會(huì)添加這個(gè)按鈕*/);

注冊(cè)command命令

上面的代碼注冊(cè)名為'button'的command命令。
注冊(cè)command命令后，可以通過代碼（editor.execCommand('button');）調(diào)用。

向UEditor添加按鈕

UE.registerUI('button',function(editor,uiName){...//創(chuàng)建一個(gè)buttonvar btn = new UE.ui.Button({//按鈕的名字name:uiName,//提示title:uiName,//需要添加的額外樣式，指定icon圖標(biāo)，這里默認(rèn)使用一個(gè)重復(fù)的iconcssRules :'background-position: -500px 0;',//點(diǎn)擊時(shí)執(zhí)行的命令onclick:function () {//這里可以不用執(zhí)行命令,做你自己的操作也可editor.execCommand(uiName);}});...//因?yàn)槟闶翘砑觔utton,所以需要返回這個(gè)buttonreturn btn; });

記得返回按鈕組件：return btn。
onclick為按鈕的點(diǎn)擊操作。將該點(diǎn)擊操作替換成自己的。
cssRules :'background-position: -500px 0;', 為按鈕圖標(biāo)。默認(rèn)的圖標(biāo)文件為themes/default/images/icons.png。圖標(biāo)尺寸為20px*20px。'background-position: -500px 0;'為圖標(biāo)文件中的偏移量，其含義為第1行第25個(gè)圖標(biāo)，通過修改偏移量更改按鈕圖標(biāo)。

按鈕狀態(tài)反射

UE.registerUI('button',function(editor,uiName){...//當(dāng)點(diǎn)到編輯內(nèi)容上時(shí)，按鈕要做的狀態(tài)反射editor.addListener('selectionchange', function () {var state = editor.queryCommandState(uiName);if (state == -1) {btn.setDisabled(true);btn.setChecked(false);} else {btn.setDisabled(false);btn.setChecked(state);}});... });

上面代碼含義為：監(jiān)聽UEditor的selectionchange事件。當(dāng)該事件發(fā)生后，檢查 Command State 。當(dāng) state == -1 時(shí)，禁用按鈕；反之啟用按鈕。

啟用按鈕截圖：

禁用按鈕截圖：

引用控件

<!DOCTYPE HTML> <html> <head><title>完整demo</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="editor_api.js"> </script><script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script><script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script><style type="text/css">.clear {clear: both;}div{width:100%;}</style> </head> <body> <div><h1>二次開發(fā)demo</h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> </div> </body> <script type="text/javascript">//實(shí)例化編輯器//建議使用工廠方法getEditor創(chuàng)建和引用編輯器實(shí)例，如果在某個(gè)閉包下引用該編輯器，直接調(diào)用UE.getEditor('editor')就能拿到相關(guān)的實(shí)例UE.getEditor('editor',{//清空了工具欄toolbars:[['source']]})</script> </html>

總結(jié)

以上是生活随笔為你收集整理的【UEditor】自定义插件：按钮的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：蓝宝石推出 RX 6750 GRE 10
下一篇：【ruoyi若依】为当前页添加显示事件