How to integrate Baidu UE (ueditor 1.4.3) under PHP

How to integrate Baidu UE (ueditor 1.4.3) under PHP

Recently, many bloggers have come to ask me how to integrate Baidu UE (ueditor 1.4.3), but I really can't answer it, so I will write down 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 the 1.4.3PHP version. Just download the version you are using.

Unzip the files into your project

2. Deployment. Introduce the JS files required by UE in the front-end Html page, and then use getEditor to instantiate

<span><</span><span>body</span><span>></span> <span><!--</span><span> 加载编辑器的容器 </span><span>--></span> <span><</span><span>script </span><span>id</span><span>="container"</span><span> name</span><span>="content"</span><span> type</span><span>="text/plain"</span><span>></span><span> 这里写你的初始化内容 </span><span></</span><span>script</span><span>></span> <span><!--</span><span> 配置文件 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="ueditor.config.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 编辑器源码文件 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="ueditor.all.js"</span><span>></</span><span>script</span><span>></span> <span><!--</span><span> 实例化编辑器 </span><span>--></span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span> <span>var</span><span> ue </span><span>=</span><span> UE.getEditor(</span><span>'</span><span>container</span><span>'</span><span>); </span><span></</span><span>script</span><span>></span> <span></</span><span>body</span><span>></span>

​

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, configure ueditor.config.js in the ueditor directory. For specific configuration items, please refer to http://fex-team.github.io/ueditor/#start-config

Dynamic configuration: that is, when instantiating the UE, the configuration parameters are dynamically passed in.

<span>var</span> ue = UE.getEditor('container'<span>, { </span><span>//</span><span>这里写你的自定义配置项</span> <span> toolbars: [
        [</span>'fullscreen', 'source', 'undo', 'redo', 'bold'<span>]
    ],
    autoHeightEnabled: </span><span>true</span><span>,
    autoFloatEnabled: </span><span>true</span><span> });</span>

​

Backend configuration items:

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.

UE defaults to obtaining 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 backend configuration content in json format (other formats are also available, please see the official documentation for details). The format is roughly as follows. If there is an error in this request, such as 400, 500, etc., the editor upload-related functions will not work properly.

<span>{ </span>"imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage"<span>, </span>"imagePath": "/ueditor/php/"<span>, </span>"imageFieldName": "upfile"<span>, </span>"imageMaxSize": 2048<span>, </span>"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"<span>] </span>"其他配置项...": "其他配置值..."<span> }</span>

​

Integrate

As mentioned before, all operations of UE are to 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.

​

The above introduces how to integrate Baidu UE (ueditor 1.4.3) under PHP, including the content of Baidu UE. I hope it will be helpful to friends who are interested in PHP tutorials.