【UEditor】自定义插件：按钮
生活随笔
收集整理的這篇文章主要介紹了
【UEditor】自定义插件：按钮
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
- ueditor 1.4.3
- 【UEditor】介紹
- 代碼： https://gitee.com/mirrors/ueditor/tree/v1.4.3
官方自定義組件文檔
http://fex.baidu.com/ueditor/#dev-developer
示例：添加一個按鈕
參考 addCustomizeButton.js
addCustomizeButton.js源碼
UE.registerUI('button',function(editor,uiName){//注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作editor.registerCommand(uiName,{execCommand:function(){alert('execCommand:' + uiName)}});//創建一個buttonvar btn = new UE.ui.Button({//按鈕的名字name:uiName,//提示title:uiName,//需要添加的額外樣式，指定icon圖標，這里默認使用一個重復的iconcssRules :'background-position: -500px 0;',//點擊時執行的命令onclick:function () {//這里可以不用執行命令,做你自己的操作也可editor.execCommand(uiName);}});//當點到編輯內容上時，按鈕要做的狀態反射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);}});//因為你是添加button,所以需要返回這個buttonreturn btn; }/*index 指定添加到工具欄上的那個位置，默認時追加到最后,editorId 指定這個UI是那個編輯器實例上的，默認是頁面上所有的編輯器都會添加這個按鈕*/);注冊command命令
UE.registerUI('button',function(editor,uiName){//注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作editor.registerCommand(uiName,{execCommand:function(){alert('execCommand:' + uiName)}});... });- 上面的代碼注冊名為'button'的command命令。
- 注冊command命令后，可以通過代碼（editor.execCommand('button');）調用。
向UEditor添加按鈕
UE.registerUI('button',function(editor,uiName){...//創建一個buttonvar btn = new UE.ui.Button({//按鈕的名字name:uiName,//提示title:uiName,//需要添加的額外樣式，指定icon圖標，這里默認使用一個重復的iconcssRules :'background-position: -500px 0;',//點擊時執行的命令onclick:function () {//這里可以不用執行命令,做你自己的操作也可editor.execCommand(uiName);}});...//因為你是添加button,所以需要返回這個buttonreturn btn; });- 記得返回按鈕組件：return btn。
- onclick為按鈕的點擊操作。將該點擊操作替換成自己的。
- cssRules :'background-position: -500px 0;', 為按鈕圖標。默認的圖標文件為themes/default/images/icons.png。圖標尺寸為20px*20px。'background-position: -500px 0;'為圖標文件中的偏移量，其含義為第1行第25個圖標，通過修改偏移量更改按鈕圖標。
按鈕狀態反射
UE.registerUI('button',function(editor,uiName){...//當點到編輯內容上時，按鈕要做的狀態反射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);}});... });-
上面代碼含義為：監聽UEditor的selectionchange事件。當該事件發生后，檢查 Command State 。當 state == -1 時，禁用按鈕；反之啟用按鈕。
啟用按鈕截圖：
禁用按鈕截圖：
引用控件
<!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><!--建議手動加在語言，避免在ie下有時因為加載語言失敗導致編輯器加載失敗--><!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型，比如你在配置項目里配置的是英文，這里加載的中文，那最后就是中文--><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>二次開發demo</h1><script id="editor" type="text/plain" style="width:1024px;height:500px;"></script> </div> </body> <script type="text/javascript">//實例化編輯器//建議使用工廠方法getEditor創建和引用編輯器實例，如果在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例UE.getEditor('editor',{//清空了工具欄toolbars:[['source']]})</script> </html>總結
以上是生活随笔為你收集整理的【UEditor】自定义插件：按钮的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 蓝宝石推出 RX 6750 GRE 10
- 下一篇： 天猫发布双11数据：共有402个品牌成交