Vue实现富文本

Vue富文本的实现可以使用一些现成的第三方库，如Quill、Vue-quill-editor、wangEditor等。

Quill

Quill是一个强大的富文本编辑器，支持多种格式和自定义样式。在Vue中使用Quill可以参考官方文档中的Vue集成部分。官网：Quill - Your powerful rich text editor

首先需要安装Quill和Vue-quill-editor：

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

然后在Vue需要用的组件或者全局main.js组件中引入Vue-quill-editor并注册：

<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是一个基于Quill的Vue富文本编辑器，可以很方便地在Vue中使用。

首先需要安装Vue-quill-editor：

npm install vue-quill-editor --save

然后在适用的Vue组件中引入Vue-quill-editor并注册：

<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是一个简单易用的富文本编辑器，支持多种格式和自定义样式。在Vue中使用wangEditor可以参考官方文档中的Vue集成部分。

首先需要安装wangEditor：

npm install wangeditor --save

然后在Vue组件中引入wangEditor并注册：

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

以上是三种常用的Vue富文本编辑器实现方式，可以根据自己的需求选择合适的方式。

猜你喜欢