How to add a common button in. Net UEditor,. netueditor

How to add a common button in. Net UEditor,. netueditor

Step 1: Find ueditor. config. add a "hougelou" string to the toolbars array in the js file, find the labelMap array, and add a labelMap for the prompt when the mouse moves the button.

Copy codeThe Code is as follows:
// All function buttons and drop-down boxes on the toolbar. You can select the new definition you need when you are using the new editor instance.
, Toolbars :[
['Fullscreen', 'source', '|', 'undo ', 'redo', '| ',
'Bold ', 'italic', 'underline', 'fontborder', 'strikethangout', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'hougelou ', 'autotypeset', 'blockquote', 'pasteplain ',' | ', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc ', '| ',
'Rowspacingtop', 'rowspacingbottom ', 'lineheight',' | ',
'Customstyle', 'paragraph', 'fontfamily ', 'fontsize',' | ',
'Ctionityalityltr', 'ctionctionalityrtl ', 'indent', '| ',
'Justifyleft', 'justifycenter', 'justifyright', 'justifyjustify ',' | ', 'touppercase', 'tolowercase',' | ',
'Link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft ', 'imageright', 'imagecenter', '| ',
'Insertimage', 'effect', 'scrawl ', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframework', 'insertcode ', 'webapp', 'pagebreak', 'template', 'background', '| ',
'Horizontal ', 'date', 'time', 'spechars', 'snapscreen', 'wordimage',' | ',
'Inserttable', 'deleteable', 'delete', 'insertrow', 'deleteterow ', 'insertcol', 'deletecol', 'mergecells ', 'mergeright', 'mergelow ', 'splittocell', 'splittorows ', 'splittocols',' | ',
'Print ', 'preview', 'searchreplace', 'help']
]
// Tooltip prompt displayed when you move the cursor over the toolbar. If you leave it blank, automatic multilingual configuration is supported. Otherwise, the configuration value prevails.
, LabelMap :{
'Hougelou ': 'Hello, backlogin'
}

Step 2: Find the btnCmds array in the ueditor. all. js file you reference, and add a "hougelou" string to it.

Step 3: Clear the cache and refresh the next page! Does a Custom button appear in the corresponding position of the toolbar? As shown in:

 

Because the image style of the corresponding button is not set at this time, the default "B" character is displayed. To display the icon style as needed, follow these steps.

Step 4: Find the themes/default/css/ueditor.css file and add a style definition:

Copy codeThe Code is as follows:
. Edui-for-hougelou. edui-icon {
Background-position:-700px-40px;
}

 

The style defines the position offset of the showmsg Icon in the UEditor default sprite Icon image (themes/default/images/icons.png. To change to another icon, add the icon to the image file and set the offset value.

Step 5: At this point, the UI Layer has completed the display of a toolbar icon and the logic of various state changes, but we found that there is no response after clicking the button. That is inevitable. We must also bind the button to its own event handling method.

In essence, a default event processing method has been bound to the button by UEditor, but since we have not defined the specific content of this method, there is no change after clicking it.

Next we will define the specific content of this method:

When initializing the editor, add your own event processing (insert an image), as shown in the following code:

Copy codeThe Code is as follows:
Ueditor = UE. getEditor ('txtcontent ',{
"Initialframehigh": "200 ",
Toolbars: [['fullscreen', 'source', 'hougelou ', 'bold', 'italic ', 'underline', 'fontborder', 'strikethangout', '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', 'expression', 'insertvideo ', 'music', 'insert', 'background', '|', 'horizontal ', 'date', 'time', 'spechars',' | ', 'inserttable ', 'deleteable', 'delete', 'insertrow', 'deleteterow ', 'insertcol', 'deletecl', 'mergecells', 'mergeright ', 'mergelow', 'splittocell ', 'splittorows ', 'splittocols',' | ', 'preview', 'searchreplace', 'help'],
EnterTag :""
}); // When you press enter, use line breaks without section labels.
// Code for implementing plug-in Functions
Baidu. editor. commands ['hougelou '] = {execCommand: function () {this.exe cCommand ('insertml', " "); return true ;}, queryCommandState: function (){}};

 

End

-------------------------------------------------------------------------------

In images. ashx, we found that the path returned by Baidu editor is connected by the separator "ue_separate_ue.