How to integrate UEditor rich text editor-H5 Tutorial-php.cn

This time I will bring you the method of integrating UEditor rich texteditor, what are theprecautionsfor integrating UEditor rich text editor, the following is a practical case, let's take a look one time.

In the vue project, I encountered the need to use a rich text editor. I saw a lot of vue-encapsulated editor plug-ins on github. Many of them did not support image uploading and video uploading very well. In the end, Or decided to use UEditor.

There are many such articles on the Internet. I have explored, handwritten code, summarized, and typeset them to form this article.

Download the corresponding UEditor source code

First, go to the official website to download the source code of UEditor, and download the corresponding version (PHP, Asp, .Net, Jsp) according to your background language.

http://ueditor.baidu.com/website/download.html

After downloading, put the resources in the/static/ue/static directory. The document structure is as follows:

(I put UEditor under thestaticstatic directory, the files here will not be packaged bywebpack, of course you can also selectively put it into src)

Edit UEditor editorConfiguration file

We openueditor. config.js, modify thewindow.UEDITOR_HOME_URconfiguration as follows:

window.UEDITOR_HOME_URL = "/static/UE/"; //指定编辑器资源文件根目录 var URL = window.UEDITOR_HOME_URL || getUEBasePath();

Copy after login

ueditor.config.jsThe file has many configurations, which can be done here Some initialized global configurations, such as the default width and height of the editor:

,initialFrameWidth:1000 //初始化编辑器宽度,默认1000 ,initialFrameHeight:320 //初始化编辑器高度,默认320

Copy after login

Other parameter configurations are listed in detail in this file, or refer to the official document http://fex.baidu.com/ueditor /

Integrate the editor into the system

Open the /src/main.js file and insert the following code:

//ueditor import '../static/UE/ueditor.config.js' import '../static/UE/ueditor.all.min.js' import '../static/UE/lang/zh-cn/zh-cn.js' import '../static/UE/ueditor.parse.min.js'

Copy after login

Develop the public component UE.vue

We create theUE.vuefile in the/src/components/directory as our editor component file.

The following code provides simple functions, and you can complete the component according to your needs for specific use.

Copy after login

The component exposes two interfaces:

valueis the text of the editor
configis the configuration parameter of the editor

Use this component in other pages

Simply create a page that requires UEditor, and then use the page Use the UE.vue component just encapsulated:

Copy after login

The effect is as follows:

What's more: Configuration required on the server side

After configuring the above content, the console may display an error message "The return format of the background configuration item is incorrect, and the upload function will not work properly!"
We upload pictures or videos in the editor, There will also be a response error. This is because there is no request interface forConfiguring the server. In ueditor.config.js, configure the serverUrl:

// 服务器统一请求接口路径 , serverUrl: 'http://172.16.254.49:83/File/UEditor' //地址管你们后端要去

Copy after login

I believe you have read the case in this article. After mastering the method, please pay attention to other related articles on the php Chinese website for more exciting content!