百度富文字自定義 命令
阿新 • • 發佈:2018-12-25
百度富文字雖然是一款功能強大的富文字編輯器,但是在工作中往往會遇到更多想象不到的問題,那麼就需要我們擴充套件百度富文字的功能,分享一下如何擴充套件百度富文字。
以做過的替換表頭為例:
首先,找到ueditor.all.js ,新增一下程式碼:此程式碼功能是 將table 表頭 <table ...... > 替換為'<table border="1" cellpadding="0" cellspacing="0" style="width:100%;border-collapse: collapse;">'
/** * 一鍵替換表頭 * @command replacetable * @method execCommand * @param { String } cmd 命令字串 * @example */ UE.commands['replacetable'] = { execCommand: function (cmdName) { var me = this; var content = me.getContent(); var reg = /<table("[^"]*"|'[^']*'|[^'">])*>/g; var tableTemp = '<table border="1" cellpadding="0" cellspacing="0" style="width:100%;border-collapse: collapse;">'; var replace = content.replace(reg, tableTemp); me.setContent(replace); } };
第二步將 該命令新增到命令列工具中
找到 ueditor.config.js ----》 toolbars 【//工具欄上的所有的功能按鈕和下拉框,可以在new編輯器的例項時選擇自己需要的重新定義】 ----》 將第一步定義好的命令名稱【replacetable】新增進去
新增提示功能
/當滑鼠放在工具欄上時顯示的tooltip提示,留空支援自動多語言配置,否則以配置值為準
labelMap:{
'replacetable':'一鍵替換表頭'
},
新功能圖示:百度富文字有預設的主題,如果新增加的功能不設定圖示則預設為第一個B加粗的圖示
可在 themes ----> default- ----> css---->ueditor.css 增加更改圖示。【新增功能會有一個主類 edui-for-replacetable】以區別其他的功能按鈕