The first step: Find the Toolbars array in the Ueditor.config.js file, add a "Hougelou" string, and then find the Labelmap array, and add a labelmap for the pointer when you move the button.
Copy Code code as follows:
All the function buttons and Drop-down boxes on the toolbar, you can select the new definition you want in the instance of the new editor
, 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 '
]
ToolTip prompts that appear when the mouse is placed on the toolbar, leave blank to support automatic multilanguage configuration, otherwise the configuration value is the
, labelmap:{
' Hougelou ': ' Hello, back loft '
}
Step two: Find the BTNCMDS array in the Ueditor.all.js file you're referencing, adding a "Hougelou" string.
The third step: empty the cache to refresh the next page! Does the toolbar have a defined button in its corresponding position? As shown in the following illustration:
The default "B" character is displayed because the picture style of the corresponding button is not set at this time. To display the icon style you want, follow the steps below.
Step Fourth: Locate the Themes/default/css/ueditor.css file and add a style definition:
Copy Code code as follows:
. Edui-for-hougelou. Edui-icon {
Background-position: -700px-40px;
}
The style here defines the position offset of the showmsg icon in the Ueditor default sprite icon picture (themes/default/images/icons.png). To change to another icon, simply add an icon to the picture file, and then set the offset value.
Step Fifth: So far, the UI level has completed a display of toolbar icons and the logic of various state changes, but we found no response after clicking the button. That is inevitable, and we must also bind the button to its own event-handling method.
Essentially, a default event-handling method has been Ueditor bound to the button, except that since we haven't defined the exact content of the method, there is no change after the click.
Here's what we'll define the method:
When initializing the editor, add your own event handling (insert a picture), the following code:
Copy Code code as follows:
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: ""
}); Use a newline without paragraph labels when you enter
Implementing the plug-in's functional code
baidu.editor.commands[' Hougelou '] = {execcommand:function () {this.execcommand (' inserthtml ', ' '); return true; }, Querycommandstate:function () {}};
End
-------------------------------------------------------------------------------
In Images.ashx found Baidu editor return picture path is to use the separator "Ue_separate_ue" connected.
