Vue implements rich text

The implementation of Vue rich text can use some ready-made third-party libraries, such as Quill, Vue-quill-editor, wangEditor, etc.

1. Quill

Quill is a powerful rich text editor that supports multiple formats and custom styles. To use Quill in Vue, you can refer to the Vue integration section in the official documentation. Official website: Quill - Your powerful rich text editor

First you need to install Quill and Vue-quill-editor:

npm install quill --save
npm install vue-quill-editor --save

Then introduce and register Vue-quill-editor in the components that Vue needs or the global main.js component:

<template>
  <div>
    <quill-editor v-model="content"></quill-editor>
  </div>
</template>

<script>
  import QuillEditor from 'vue-quill-editor'
  import 'quill/dist/quill.snow.css'

  export default {
    components: {
      QuillEditor
    },
    data () {
      return {
        content: ''
      }
    }
  }
</script>

        2. Vue-quill-editor

Vue-quill-editor is a Quill-based Vue rich text editor that can be easily used in Vue.

First you need to install Vue-quill-editor:

npm install vue-quill-editor --save

Then import and register Vue-quill-editor in the applicable Vue components:

<template>
  <div>
    <vue-quill-editor v-model="content"></vue-quill-editor>
  </div>
</template>

<script>
  import VueQuillEditor from 'vue-quill-editor'

  export default {
    components: {
      VueQuillEditor
    },
    data () {
      return {
        content: ''
      }
    }
  }

        3. wangEditor

wangEditor is an easy-to-use rich text editor that supports multiple formats and custom styles. To use wangEditor in Vue, you can refer to the Vue integration section in the official documentation.

First you need to install wangEditor:

npm install wangeditor --save

Then introduce wangEditor in the Vue component and register:

<template>
  <div>
    <div ref="editor"></div>
  </div>
</template>

<script>
  import WangEditor from 'wangeditor'

  export default {
    mounted () {
      const editor = new WangEditor(this.$refs.editor)
      editor.create()
      editor.$text.on('change', () => {
        this.content = editor.$text.html()
      })
    },
    data () {
      return {
        content: ''
      }
    }
  }
</script>

The above are three commonly used Vue rich text editor implementation methods, and you can choose the appropriate method according to your needs.