Recently many friends have come to ask me how to integrate Baidu UE (ueditor 1.4.3), but I really can’t answer it, so Let me write here about the idea of integrating Baidu UE. The latest version of UE1.4.3 is used in this article.
Download and install
1. First go to the official website to download the latest version of UE1.4.3
UE official download address: http://ueditor.baidu.com/website/download.html#ueditor
What I downloaded here is version 1.4.3PHP. Just download the version you are using.
Extract the files to your project
2. Deployment. Introduce the JS files required by UE in the front-end Html page, and then use getEditor to instantiate
Copy the code as follows:
Browse your page and you will see Ueditor. Isn't it very simple to say?
Configure Ueditor
UEditor’s configuration items are divided into two categories: front-end configuration items and back-end configuration items.
The front-end and front-end configurations are written in the back-end (the PHP version of the config is in php/config.json). When the editor is instantiated, the back-end configuration information is read asynchronously and overwritten into the front-end configuration.
Configuration items obtained by the backend > Instantiate the incoming configuration items > Configuration items of the ueditor.config.js file
Front-end configuration items: Officially provides two configuration methods, static configuration and dynamic configuration.
Static configuration: that is, configuring ueditor.config.js in the ueditor directory. For specific configuration items, please refer to http://fex-team.github.io/ueditor/#start-config
Dynamic configuration: When instantiating the UE, the configuration parameters are dynamically passed in.
Copy the code as follows:
var ue = UE.getEditor('container', {
//Write your custom configuration items here
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
],
autoHeightEnabled: true,
autoFloatEnabled: true
});
Backend configuration items:
Here let’s talk about UE’s request first: all operations of UE are to request serverUrl to pass the value of the action variable through get method for the next operation. Get configuration, upload pictures, get pictures and other operations.
By default, UE obtains the backend configuration items by reading the serverUrl parameter in ueditor.config.js in the directory and then passing action=config through the get method. The default request is: serverUrl?action=config to obtain configuration items. serverUrl can be dynamically configured on the front-end page or statically configured in ueditor.config.js.
You can test whether the path ueditor/php/controller.php?action=config under your website returns the back-end configuration content in json format (other formats are also available, please see the official documentation for details). The format is roughly as follows . If this request goes wrong and errors such as 400 or 500 occur, the editor upload-related functions will not work properly.
Copy the code as follows:
{
"imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
"imagePath": "/ueditor/php/",
"imageFieldName": "upfile",
"imageMaxSize": 2048,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
"Other configuration items...": "Other configuration values..."
}
Integration
As mentioned before, all operations of UE request the serverUrl to pass the value of the action variable through the get method for the next operation. Get configuration, upload pictures, get pictures and other operations. Got this, for integrating PHP. Or other languages are very simple. For specific code, please refer to the official Demo.
Okay, friends, you have already understood how to integrate Baidu Ueditor. This article is some of my own experience. I hope it can help everyone
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
