第一步：找到ueditor.config.js文件中的toolbars數(shù)組，增加一個(gè)“hougelou”字符串，然后找到labelMap數(shù)組，對(duì)應(yīng)著添加一個(gè)labelMap，用于鼠標(biāo)移上按鈕時(shí)的提示。
復(fù)制代碼 代碼如下:
//工具欄上的所有的功能按鈕和下拉框，可以在new編輯器的實(shí)例時(shí)選擇自己需要的從新定義
, toolbars:[
['fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'hougelou', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe','insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|',
'print', 'preview', 'searchreplace', 'help']
]
//當(dāng)鼠標(biāo)放在工具欄上時(shí)顯示的tooltip提示,留空支持自動(dòng)多語(yǔ)言配置，否則以配置值為準(zhǔn)
,labelMap:{
'hougelou': 'hello,后閣樓'
}
第二步：找到你所引用的ueditor.all.js文件中的btnCmds數(shù)組，在其中同樣增加一個(gè)“hougelou”字符串。
第三步：清空緩存刷新下頁(yè)面吧！工具欄的對(duì)應(yīng)位置是否出現(xiàn)了一個(gè)自己定義的按鈕呢？如下圖所示：
由于此時(shí)未設(shè)置對(duì)應(yīng)按鈕的圖片樣式，所以會(huì)顯示默認(rèn)的“B”字符。要想讓其顯示成自己需要的圖標(biāo)樣式，接著按照下面的步驟動(dòng)手吧。
第四步：找到themes/default/css/ueditor.css文件，增加一條樣式定義:
復(fù)制代碼 代碼如下:
.edui-for-hougelou .edui-icon {
background-position: -700px -40px;
}
此處的樣式定義了showmsg圖標(biāo)在UEditor默認(rèn)的精靈Icon圖片（themes/default/images/icons.png）中的位置偏移。如需更改成另外圖標(biāo)，只需添加圖標(biāo)到該圖片文件中，然后設(shè)置偏移值即可。
第五步：到此為止，在UI層面已經(jīng)完成了一個(gè)工具欄圖標(biāo)的顯示和各種狀態(tài)變化的邏輯，但是我們發(fā)現(xiàn)點(diǎn)擊按鈕之后毫無(wú)反應(yīng)。那是必然的，我們還必須為該按鈕綁定屬于它自己的事件處理方法。
實(shí)質(zhì)上，此時(shí)一個(gè)默認(rèn)的事件處理方法已經(jīng)被UEditor綁定到按鈕上了，只不過(guò)由于我們還沒(méi)有定義該方法的具體內(nèi)容，所以點(diǎn)擊之后無(wú)任何變化。
下面我們就來(lái)定義該方法的具體內(nèi)容：
在初始化編輯器的時(shí)候，加上自己的事件處理（插入一張圖片），如下代碼：
復(fù)制代碼 代碼如下:
ueditor = UE.getEditor('txtContent', {
"initialFrameHeight": "200",
toolbars: [['fullscreen', 'source', 'hougelou', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'emotion', 'insertvideo', 'music', 'insertcode', 'background', '|', 'horizontal', 'date', 'time', 'spechars', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', '|', 'preview', 'searchreplace', 'help']],
enterTag: "nbsp;"
}); //回車(chē)的時(shí)候用換行不用段落標(biāo)簽
//實(shí)現(xiàn)插件的功能代碼
baidu.editor.commands['hougelou'] = { execCommand: function() { this.execCommand('insertHtml', "img src='http://www.xxx.com/images/logo.png' />"); return true; }, queryCommandState: function() { } };
End
-------------------------------------------------------------------------------
在images.ashx里發(fā)現(xiàn)百度編輯器返回圖片路徑是用分隔符“ue_separate_ue”連起來(lái)的。
您可能感興趣的文章:- .NET UEditor使用方法說(shuō)明
- .NET下為百度文本編輯器UEditor增加圖片刪除功能示例
- ASP.NET中集成百度編輯器UEditor
- 利用ASP.NET MVC+Bootstrap搭建個(gè)人博客之修復(fù)UEditor編輯時(shí)Bug(四)
- 一步步教你在Asp.net Mvc中使用UEditor編輯器
- UEditor編輯器自定義上傳圖片或文件路徑的修改方法
- 關(guān)于UEditor編輯器遠(yuǎn)程圖片上傳失敗的解決辦法
- ueditor編輯器不能上傳圖片問(wèn)題的解決方法
- ASP.NET百度Ueditor編輯器實(shí)現(xiàn)上傳圖片添加水印效果
