How to implement a rich text editor in Vue2.0

This time I will show you how to implement a rich text editor in Vue2.0 Editor , what are the precautions for implementing a rich text editor in Vue2.0, as follows This is a practical case, let’s take a look at it.

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 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 /<a href="http://www.php.cn/wiki/188.html" target="_blank">static</a>/ue/ static directory.

(I put UEditor under the static static directory. The files here will not be packaged by webpack. Of course, you can also selectively put them in src)

Edit UEditor Editor Configuration File

We open ueditor.config.js and 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. You can make some initialized global configurations here, 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 documentation 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 public components UE.vue

We create the UE.vue file in the /src/components/ directory as our editor component file.

The following code provides simple functions. For specific use, just improve the component according to your needs.

<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 editor configuration parameters

Use this component in other pages

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

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

After configuring the above content, an error message "The return format of the background configuration item is incorrect, and the upload function will not work properly!" may appear on the console.
When we upload images or videos in the editor, a response error message will also appear. 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 mastered the method after reading the case in this article. More exciting Please pay attention to other related articles on php Chinese website!

Recommended reading:

What are the techniques for Vue component development

Detailed explanation of the BAE steps for packaging and uploading vue projects to Baidu

The difference between @HostBinding() and @HostListener() in AngularJS

The above is the detailed content of How to implement a rich text editor in Vue2.0. For more information, please follow other related articles on the PHP Chinese website!