How to integrate UEditor rich text editor

This time I will bring you the method of integrating UEditor rich text editor , what are the precautions for 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 the static static directory, the files here will not be packaged by webpack , of course you can also selectively put it into src)

Edit UEditor editorConfiguration file

We openueditor. config.js, modify the window.UEDITOR_HOME_UR configuration as follows:

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

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

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'

Develop the public component UE.vue

We create the UE.vue file 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.

<template>
  <p>
    <script type="text/plain"></script>
  </p>
</template>
<script>
  export default {
    name: 'ue',
    data () {
      return {
        editor: null
      }
    },
    props: {
      value: '',
      config: {}
    },
    mounted () {
      this.editor = window.UE.getEditor('editor', this.config);
      this.editor.addListener('ready', () => {
        this.editor.setContent(this.value)
      })
    },
    methods: {
      getUEContent () {
        return this.editor.getContent()
      }
    },
    destroyed () {
      this.editor.destroy()
    }
  }
</script>

The component exposes two interfaces:

• value is the text of the editor

• config is 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:

<template>
  <p>
    <Uediter :value="ueditor.value" :config="ueditor.config" ref="ue"></Uediter>
    <button @click="returnContent">显示编辑器内容</el-button>
    <p>{{dat.content}}</p>
  </p>
</template>
<script>
  import Uediter from '@/components/UE.vue';
  export default {
    data () {
      return {
        dat: {
          content: ''
        },
        ueditor: {
          value: '编辑器默认文字',
          config: {
            initialFrameWidth: 800,
            initialFrameHeight: 320
          }
        }
      }
    },
    methods: {
      returnContent () {
        this.dat.content = this.$refs.ue.getUEContent()
      }
    },
    components: {
      Uediter
    },
  }
</script>

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 for Configuring the server. In ueditor.config.js, configure the serverUrl:

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

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!

Recommended reading:

Web-side application implements back force refresh

How to use automatic generator in ionic2

The above is the detailed content of How to integrate UEditor rich text editor. For more information, please follow other related articles on the PHP Chinese website!