Tutorial and usage of ueditor

First: Baidu ueditor official

Ueditor official address: http://ueditor.baidu.com/website/index.html

Development Documentation address: http://ueditor.baidu.com/website/document.html

: Http://ueditor.baidu.com/website/download.html (developer or mini)

Second: select the functional version of Baidu ueditor

When we go to the official Baidu ueditor website and click the download option, we find that there are two versions available for us to choose from: ubuilder and development, we can see the difference between ubuilder and the development edition through the red text below. Generally, you can select the ubuilder version.

 

Unlike the previous method for downloading software, ueditor uses selective downloading. The first is the selection of the visible function. There are four groups: basic, insert, format, and table. There are several functional buttons in each group. We can select them as needed, if you double-click the four groups, all the buttons are selected. If you are not satisfied with the selected button, you can also click "clear" to clear all the options you have selected.

 

The next step is to select the hidden function, language, and server version. By default, the hidden function is all selected. It is better not to change it unless necessary. The language options are divided into Chinese and English. By default, only the Chinese Language Pack is downloaded. If you need to use English, you can add the English pack. Currently, three types of server versions are available: PHP,. net, and JSP. After the selection, we can click to download the resource package.

Third: Baidu ueditor's configuration methods and techniques

1. Download the complete source code package from the official website and decompress it to any directory. The decompressed source code directory structure is as follows:

_ Examples: Example page of the full editor

Dialogs: Resources and JS files corresponding to the pop-up dialog box

Themes: style image and Style File PHP/JSP/. Net: background file involving server operations. Different Background versions will vary here. Here we select PHP

Third-party: third-party plug-ins (including code highlighting, source code editing, and other components)

Editor_all.js: Package files of all files under the _ src directory (for version release)

Editor_api.js: API interface configuration file (Development Version)

Editor_all_min.js: compression version of The editor_all.js file. We recommend that you use

Editor_config.js: configuration file of the editor. It is recommended that the editor instantiation page be placed in the same directory.

2. on the editor instantiation page, import the three entry files required by the editor. The sample code is as follows:

 

<SCRIPT type = "text/JavaScript" charset = "UTF-8" src = ".../umeditor. config. js"> </SCRIPT>

<! -- Use version -->

<! -- <SCRIPT type = "text/JavaScript" charset = "UTF-8" src = ".../umeditor. All. js"> </SCRIPT> -->

<! -- Developer -->

<SCRIPT type = "text/JavaScript" charset = "UTF-8" src = "editor_api.js"> </SCRIPT>

<SCRIPT type = "text/JavaScript" src = "../lang/ZH-CN/zh-cn.js"> </SCRIPT>

3. Create an editor instance and its dom container on the editor instantiation page. The sample code is as follows:

 

<Textarea name = "Key of the background value" id = "myeditor"> write your initialization content here </textarea>

<SCRIPT type = "text/JavaScript">

VaR editor = new UE. UI. Editor ();

Editor. Render ("myeditor ");

// 1.2.4 you can use the code instantiation editor later

// UE. geteditor ('myeditor ')

</SCRIPT>

4. Search for the URL variable configuration editor path in your project in editor_config.js.

Official Website example:

 

// We strongly recommend that you use this method for absolute path configuration.

Url = Window. ueditor_home_url | "/uetest/ueditor /";

My Configuration:

 

(Function (){

/**

* The root path of the editor resource file. It indicates that the page is instantiated as the current path by the editor, pointing to the path of the editor resource file (that is, the directory such as dialog.

* In view of the various path problems that many users encounter when using the editor, we strongly recommend that you use "relative paths relative to the website root directory" for configuration.

* "Relative path to the root directory of the Website" is a path starting with a slash, such as "/myproject/umeditor.

* If there are multiple pages at the same level on the site that need to instantiate the editor and reference the same ueditor, the URL here may not be applicable to the editor of each page.

* Therefore, ueditor provides the root path that can be separately configured for editors of different pages. Specifically, you can write the following code at the top of the page where the editor needs to be instantiated. Of course, make the URL here equal to the corresponding configuration.

* Window. umeditor_home_url = "/xxxx /";

*/

/**

* @ Author wusuopubupt

* @ Date 2013-10-24

*

* Set window. umeditor_home_url = "/ueditor /";

*

**/

Window. umeditor_home_url = "/ueditor/"; // note that it is here!

VaR url = Window. umeditor_home_url | (function (){

Function pathstack (){

5. If you use editor_api.js (that is, you do not need editor. All. JS) for development, open editor_api.js. The Code is as follows:

/**

* Development version File Import

*/

(Function (){

VaR paths = [

'Editor. js ',

'Core/browser. js ',

'Core/utils. js ',

'Core/eventbase. js ',

'Core/DTD. js ',

'Core/domutils. js ',

'Core/range. js ',

'Core/selection. js ',

'Core/editor. js ',

'Core/filterword. js ',

'Core/node. js ',

'Core/htmlparser. js ',

'Core/filternode. js ',

'Ins INS/inserthtml. js ',

'Ins INS/image. js ',

'Ins INS/justify. js ',

'Ins INS/font. js ',

'Ins INS/link. js ',

'Ins INS/print. js ',

'Ins INS/Paragraph. js ',

'Ins INS/horizontal. js ',

'Ins INS/cleardoc. js ',

'Ins INS/undo. js ',

'Ins INS/paste. js ',

'Ins INS/list. js ',

'Ins INS/source. js ',

'Ins INS/enterkey. js ',

'Ins INS/preview. js ',

'Ins INS/basestyle. js ',

'Ins INS/video. js ',

'Ins INS/selectall. js ',

'Ins INS/removeformat. js ',

'Ins INS/keystrokes. js ',

'Ins INS/dropfile. js ',

'Ui/widget. js ',

'Ui/button. js ',

'Ui/toolbar. js ',

'Ui/menu. js ',

'Ui/dropmenu. js ',

'Ui/splitbutton. js ',

'Ui/colorsplitbutton. js ',

'Ui/Popup. js ',

'Ui/scale. js ',

'Ui/colorpicker. js ',

'Ui/ComboBox. js ',

'Ui/buttoncombobox. js ',

'Ui/modal. js ',

'Ui/tooltip. js ',

'Ui/TAB. js ',

'Ui/separator. js ',

'Ui/scale. js ',

'Adapter/adapter. js ',

'Adapter/button. js ',

'Adapter/fullscreen. js ',

'Adapter/dialog. js ',

'Adapter/Popup. js ',

'Adapter/imagescale. js ',

'Adapter/autofloat. js ',

'Adapter/source. js ',

'Adapter/ComboBox. js'

],

/**

* @ Author wusuopubupt

* @ Date 2013-10-24

*

* Modified baseurl = '/ueditor/src /';

*/

Baseurl = '/ueditor/src /';

For (VAR I = 0, PI; Pi = paths [I ++];) {

Document. Write ('<SCRIPT type = "text/JavaScript" src = "' + baseurl + PI + '"> </SCRIPT> ');

}

})();

We can see that there is a baseurl, which is the routing of JS files. here we need to configure it according to the actual path of the ueditor_api.js file!

6. File Upload problems:

Open ueditor. config. js and you can see the following Configuration:

// Image Upload configuration Area

, Imageurl: URL + "PHP/imageup. php" // Image Upload submission address

//, ImagePath: URL + "PHP/" // Image Correction address, referencing fixedimagepath. You can configure it if you have special requirements.

, ImagePath: "http://test.mathandcs.com /"

, Imagefieldname: "upfile" // The Key of the image data. If this parameter is modified, modify the parameter of the corresponding file in the background.

 

Here, the imageurl is the address of the PHP file called for image uploading, while ImagePath is the host part of the image address generated for the newly uploaded image;

Then open the imageup. php file under ueditor/PHP/. The configuration is as follows:

 

$ Config = array (

"Savepath" => "/var/www/store/upload/", // storage folder

"Maxsize" => 1000, // maximum allowable file size, in KB

"Allowfiles" => array (". GIF", ". PNG", ". jpg", ". jpeg", ". BMP") // allowed file formats

);

// Upload the file directory

// $ Path = "upload /";

$ Path = "/var/www/store/upload /";

Here, you need to change the destination address (Save the uploaded file) savepath to the file address you specified.

Due to the relative path and absolute path problems, the generated address may be incorrect. In this case, we need to hack the JS file that generates the image URL:

Modify in ueditor/dialogs/image. JS:

 

/**

* @ Author wusuopubupt

* @ Date 2013-10-24

* @ Return URL modified

**/

VaR Reg = // var \/www \/test \/upload \//;

Url = URL. Replace (Reg ,"");

VaR $ IMG = $ (" "),

$ Item = $ ("<Div class = 'edui-image-item edui-image-upload-item'> <Div class = 'edui-image-close'> </Div> </div> "). append ($ IMG );

The regular expression rules here are determined based on the actual situation!

Now, ueditor is successfully configured in my environment.

Tutorial and usage of ueditor