Some materials from Baidu open-source Editor

: Http://ueditor.baidu.com/website/

API reference address: http://ueditor.baidu.com/doc/

 

File directory description: Dialogs (folder): Used as a function tool button to store HTML pages. Themes (folder): stores files in editor styles and images. Third-party (folder): stores third-party plug-in files. Editor_config.js: it belongs to the UE editor configuration file.

Editor_all.js (JS file): Implemented by the editor FunctionCode, Written here.

Configuration editor description:

For example, an HTML page has the following structure. <SCRIPT type = "text/plain" id = "billeditor" style = "width: 1000px"> </SCRIPT>. ID and type are required. Then, instantiate the editor as follows:

 

1	VaR Editoroption = {toolbars: [['undo '……], Fullscreen:True} [1]

2	VaR Billeditor =New Baidu. Editor. UI. Editor (editoroption); [2]

3	Billeditor. Render ('billeditor '); [3]

 

 

Note:

[1] editoroption object is a custom configuration item that includes all tool buttons.

[2] The editoroption parameter must be passed to the UE editor.

[3] The parameter of the render method is the ID set by yourself. The editor starts rendering to the DOM structure of the ID.

 

How to configure and implement command-type buttons and function-type buttons [1] In the configure command type Custom button, you must first configure the following parameters in the editor_all.js file. Toolbars {array configuration button parameter}, labelmap {object configuration button eye-catching title parameter}, and btncmds {array is a unified configuration trigger command }. [All parameter configurations must be the same .] After the configuration is complete, you can write the implementation Code as follows:

1	UE. commands ['toolbars'] = {// This method is used to configure the command type

2	Execcommand:Function(Partition name ){

3	[Specific execution content, how to compile the code to view the current business needs],ThisPoint to current object

4

}

5

}

Note: The UE is a large object in the editor, and the toolbars parameter is a parameter configured in the toolbars array. All the implementation code is written in the anonymous function of the Execcommand object literal. [2] In the configure function type Custom button, you need to configure the following parameters first. The pop-up window is placed in the dialogs folder. Configure the toolbars array parameters, labelmap header parameters, iframeurlmap page path parameters, btncmds trigger command parameters, and dialogbtns parameters in the editor_all.js file.

1	Baidu. Editor. plugins ['toolbars'] =Function(){// This anonymous function is used to device the function type

2	VaR me =This;

3	Me. commands ['toolbars'] = {

4	Execcommand:Function(){

5	[The specific execution content, how to compile the code, and view the current business requirements.],ThisPoint to current object

6

}

7

}

8

}

Note: Baidu. editor. plugins is used to compile the function plug-in button. In the function plug-in button, you can configure the editor method described above, or write the implementation code on the window page you need to configure. As follows: Dialog. onok = function (){ } Both are written, in the form of parameters editor.exe ccommand (), in the Code of the window editor plug-in. [3] configure the right-click button. If you need to configure the command and function type buttons, you must perform the preceding steps [1] [2]. The only difference is that if you need to configure the right-click button, you must configure a new parameter in the items parameter of the contextmenu plug-in type. The example is as follows:

01	Items = me. Options. contextmenu | [

02

{

03	Label: '', [name of the right-click button]

04	Parameter Name: '', [parameters you configured in the toolbars array]

05	Exec:Function(){

06	If(UE. UI ['toolbar']) {

07	New UE. UI ['toolbar'] (This); [Specify the type of the pop-up window, which parameter is configured in toolsbar]

08

}

09	This. UI. _ dialogs ['toolbar + dialog ']. open ();

10

}

11

}

12

];

5. Some practical functions, such as selecting the current element with the cursor

1	VaR Range = editor. selection. getrange (); [cursor position]

2	VaR TD = domutils. findparentbytagname (range. startcontainer, 'td ',True);

Other function methods need to print the editor object or ue object in the Firefox browser, with comments.