Secondary Development of Baidu Editor

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.