Baidu editor Secondary Development notes

Create a custom Editor: Copy codeThe Code is as follows: // import the editor_config.js, editor_api.js, ueditor.css file, and then create an editor instance and parent container in the body.
<Div id = "myEditor"> </div>
<Script type = "text/javascript">
Var editorOption = {
Toolbars: [['fullscreen', 'source', 'undo ', 'redo', 'bold '],
AutoClearinitialContent: true,
WordCount: false,
};
Var editor_a = new baidu. editor. ui. Editor (editorOption );
Editor_a.render ('myediter ');
</Script>

Configure the pop-up tool button:Copy codeThe Code is as follows: // In the editor_config.js editorui. js file, find the toolbars labelMap iframeUrlMap btnCmds dialogBtns five parameters for configuration.
// Toolbars: tool or drop-down box parameter,
// LabelMap: tool button prompt information
// IframeUrlMap: the URL of the plug-in is displayed.
// BtnCmds: tool button unified trigger command
// DialogBtns: The command is displayed.
// Register the plug-in [] and pass in the parameters in toolbars.
UE. plugins [] = function (){
....
ExecCommand: function (callback name, myobject ){
....
}
}

Configure the command tool button:Copy codeThe Code is as follows: // find toolbars labelMap btnCmds in the editor_config.js editorui. js File
// Register the command tool button [] to pass in the parameters in toolbars
UE. commands [] = function (){
.....
ExecCommand: function (){
.....
}
}

Right-click Configuration:Copy codeThe Code is as follows: // In the editor_config.js contextmenu. js file, find the three parameters toolbars labelMap items for configuration.
// Right-click the command to configure
Items:
{
Label: "", [Right-click a name]
Customization name: "", [name configured in the toolbars parameter]
Exec: function (){
This.exe cCommand (""); [name configured in the toolbars parameter]
}
}
// Register the right-click Command
UE. commands [] = function (){
ExecCommand: function (){
.......
}
}
Note: The registered right-click button Command [] is still the name configured in the toolbars Parameter
// Right-click the plug-in and configure []. The input parameter is a parameter in toolbars.
Items:
{
Label :"",
CommonName :"",
Exec: function (){
If (UE. ui []) {
New UE. ui [] (this );
}
This. ui. _ dialogs ['... Dialog']. open ();
}
}
// Register the right-click plug-in []. The input parameter is a parameter in toolbars.
UE. plugins [] = function (){
....
ExecCommand: function (callback name, myobject ){
....
}
}

Plug-in command Configuration:Copy codeThe Code is as follows: UE. plugins [] = function (){
Var me = this;
// Register mouse and keyboard events
Me. addListener ('mousedown', _ mouseDownEvent );
Me. addListener ('keylow', function (type, evt ){...});
Me. addListener ('mouseup', function (){});
// Query the current command status
QueryCommandState: function (partition name ){}
// Command Execution subject
ExeCommand: function (callback name, myobject ){}
// Obtain the command execution result
QueryCommandValue: function (partition name ){}
}

Execute registration in the plug-in pop-up:Copy codeThe Code is as follows: dialog. onok = function (){
Editor.exe cCommand ("", ""); // two parameters, function parameters, the value we need to pass in
Dialog. close ();
}

Some operations are useful:Copy codeThe Code is as follows: // editor. selection. getRange () query Range Method
// Editor class, which is used for initialization, such as getting content, setting height and width, and setting editor content.
// DomUtils class, which is used for dom node operations within different frames, such as obtaining parent nodes, node attributes, and text content.
// Browser class, which is used to detect the browser, such as IE Firefox.
// EventBase class. This class uses the registration class of basic events, such as mouse and keyboard events.
// Ajax class, which is used in the ajax Tool class.
// Currently, I only use the preceding code in my work. The organization structure of the code is still under research.

How to extend editor for Baidu editor

The editor object of Baidu editor contains all the method objects of Baidu editor. To expand it, you only need to add the method in the homepage instance. Editor. xx = {}.

The editor object on any page can point out the extension method we have defined on the homepage.