I have been working on Secondary Development of Baidu editor recently. I have been busy for some time. Today, I will sort out some common materials for future review.
Create a custom Editor:
// Import the editor_config.js, editor_api.js, ueditor.css file, and then create the editor instance and parent container in the body.<Div id = "myeditor"> </div> <SCRIPT type = "text/JavaScript">VaREditoroption ={Toolbars :[['Fullscreen', 'source', 'undo ', 'redo', 'bold'], Autoclearinitialcontent:True, Wordcount:False,};VaREditor_a =NewBaidu. Editor. UI. Editor (editoroption); editor_a.render ('Myeditor');</SCRIPT>
Configure the pop-up tool button:
//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:
//In the editor_config.js editorui. js file, find toolbars labelmap btncmds.
// Register the command tool button [] to pass in the parameters in toolbars
UE. commands [] = function (){
.....
Execcommand: function (){
.....
}
}
Right-click Configuration:
//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:
ue. plugins [] = function () { var me = This ;< br> // register the mouse and keyboard event me. addlistener ( 'mousedownload' , _ mousedownevent); me. addlistener ( 'keydownload', function (type, EVT ){...}); me. addlistener ( 'mouseup', function () {});
// query the current command status queryCommandState: function (Subject name) {}< br> // Command Execution subject execommand: function (callback name, myobject) {}< br> // obtain the command execution result queryCommandValue: function {}
Execute registration in the plug-in pop-up:
Dialog. onok =Function() {Editor.exe ccommand ("","");//Two parameters, function parameters, which we need to pass inDialog. Close ();}
Some operations are useful:
//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 the parent node, 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.
// Only the above is used at work for the moment,CodeThe organizational structure is still under research.