PHP integrates Baidu Ueditor 1.4.3, ueditor1.4.3_PHP tutorial

PHP integrates Baidu Ueditor 1.4.3, ueditor1.4.3

Recently, many group friends have come to ask me how to integrate Baidu UE (ueditor 1.4.3), and I really can’t answer it. So here I will write about the idea of ​​integrating Baidu UE. The latest version of UE1.4.3 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 on 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 the get method for the next operation. Get configuration, upload pictures, get pictures and other operations.

UE by default 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 the path under your website ueditor/php/controller.php?action=config Whether the backend in json format is returned normally (other formats are also available, please see the official documentation for details) Configuration content, 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.

<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>

Integration

As mentioned beforeAll 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.

I am also a novice and my language expression skills are not good. If there are any errors in the article, please leave a message to correct me. Details http://www.xiangloveqin.cn/2031.html