To create a custom editor:
Copy Code code as follows:
Introduce the Editor_config.js,editor_api.js,ueditor.css file and create the editor instance and the 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 (' Myeditor ');
</script>
Configure the Pop-up tool button:
Copy Code code as follows:
Toolbars Labelmap iframeurlmap btncmds dialogbtns Five parameters found in the Editor_config.js editorui.js file configuration
Toolbars: tool or Drop-down box parameter,
Labelmap: Tool button Hint info
Iframeurlmap: Pop-up plugin URL path
Btncmds: Tool button Uniform trigger command
Dialogbtns: Pop-up command
Registering a plugin [] passed in a parameter in toolbars
Ue.plugins[] = function () {
....
Execcommand:function (Cmdname,myobject) {
....
}
}
To configure a command tool button:
Copy Code code as follows:
Toolbars Labelmap found in editor_config.js editorui.js file Btncmds
Register the Command tool button [] The argument passed in toolbars
Ue.commands[] = function () {
.....
Execcommand:function () {
.....
}
}
Right-button configuration:
Copy Code code as follows:
Editor_config.js contextmenu.js files found toolbars labelmap items three parameters are configured
Command Right key configuration
Items
{
Label: "", [right-name]
CmdName: "", [name configured in toolbars parameter]
Exec:function () {
This.execcommand (""); [the name configured in the Toolbars parameter]
}
}
Register right button command
Ue.commands[] = function () {
Execcommand:function () {
.......
}
}
Note: The Registered right button command [] is still the name configured in the Toolbars parameter
Plug-in right-key configuration [] Incoming parameters are parameters in toolbars
Items
{
Label: "",
CmdName: "",
Exec:function () {
if (ue.ui[]) {
New ue.ui[] (this);
}
This.ui._dialogs[' ... Dialog '].open ();
}
}
Register the right key plug-in [] Incoming parameter is a parameter in toolbars
Ue.plugins[] = function () {
....
Execcommand:function (Cmdname,myobject) {
....
}
}
Plug-in command configuration:
Copy Code code as follows:
Ue.plugins[] = function () {
var me = this;
Registering Mouse and keyboard events
Me.addlistener (' MouseDown ', _mousedownevent);
Me.addlistener (' KeyDown ', function (type,evt) {...});
Me.addlistener (' MouseUp ', function () {});
Querying the current command status
Querycommandstate:function (cmdName) {}
Command execution Principal
Execommand:function (cmdname,myobject) {}
Get Command Execution results
Querycommandvalue:function (cmdName) {}
}
Plugin Eject perform registration:
Copy Code code as follows:
Dialog.onok = function () {
Editor.execcommand ("", ""); Two parameters, function parameters, we ourselves need to pass in the value
Dialog.close ();
}
Some operation class, practical:
Copy Code code as follows:
Editor.selection.getRange () query scope method
Editor class, which is used to initialize some of the settings, such as getting content, setting the width, setting editor content, and so on.
Domutils class, which is used to manipulate DOM nodes in different frames, such as getting parent nodes, node attributes, text content, and so on.
Browser class, this class is used to detect the browser, such as the decision IE Firefox.
Eventbase class, this class uses the underlying event's registration class, such as the mouse, keyboard events, and so on.
Ajax classes, which are used in AJAX tool classes.
Temporarily in the work only to use the above, the Code of the organizational structure, are still wood research.
How to extend editor to Baidu editor
Baidu Editor of the editor object, is the Baidu editor of all method objects, in the expansion, only in the first instance, add methods. editor.xx = {}.
Editor objects in any page, you can point to the extension method we defined on the homepage.
