vue-quill-editor富文本编辑器超详细入门使用步骤

介绍

vue-quill-editor是一个基于Vue框架的富文本编辑器，相比其他富文本编辑器，它有更好的用户体验和更完善的文档说明，使用起来也更加方便。

安装

在使用vue-quill-editor之前，需要先安装它。

使用npm进行安装：

npm i vue-quill-editor

如果需要引用的是最新版本，可以使用以下命令：

npm i vue-quill-editor@latest

在安装完成后，需要引入vue-quill-editor，并注册组件。

在main.js中进行引入和注册：

import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';

Vue.use(VueQuillEditor)

使用

最简单的富文本编辑器

具有最基本功能的富文本编辑器使用可以通过添加如下代码实现：

<template>
  <div>
    <vue-quill-editor></vue-quill-editor>
  </div>
</template>

在页面中添加上述代码之后，就可以使用vue-quill-editor的最基本功能。

配置富文本编辑器

VueQuillEditor提供了丰富的配置项，可以根据自己的需求对富文本编辑器进行配置。

以下是一些常用的配置项：

配置限制字节数

quillOption: {
  // 编辑器标题
  modules: {
      toolbar: [
          [{
              header: [1, 2, false]
          }],
          ['bold', 'italic', 'underline'],
          ['image', 'code-block']
      ]
  },
  // 限制字节数
  maxLength: 1000,
  placeholder: '请输入内容'
}

设置图片上传接口

// 图片上传接口
uploadConfig = {
  action: '/upload/image', // 图片上传api
  method: 'POST', // 方法
  name: 'file', // 名称
  headers: {
      Authorization: `Bearer ${getToken()}` // token
  },
  withCredentials: true, // 是否支持跨域
  callback(response) {
      console.log(response);
  }
}

初始化内容

// 初始化内容
editorValue: `<p style="color: #666;">Hello World</p>`

将以上配置项添加至vue组件对应变量中即可完成富文本编辑器的配置。

方法和事件

VueQuillEditor提供了许多的方法和事件，可以根据自己的需求对富文本编辑器进行自定义。

以下是一些常用的方法和事件：

获取编辑器内容

this.$refs.myEditor.quill.getContents()

清空编辑器内容

this.$refs.myEditor.quill.setText('')

监听编辑器内容变化

<vue-quill-editor
  ref="myEditor"
  @change="handleChange"
></vue-quill-editor>

handleChange(content, delta) {
  console.log(content)
}

在编辑器内容发生变化时，handleChange方法会被调用，并将最新的内容和delta值（内容差异）作为参数传入。

示例

简单的富文本编辑器

以下示例展示如何使用VueQuillEditor创建一个在文本框中输入富文本内容并实时显示的简单富文本编辑器。

<template>
  <div>
    <vue-quill-editor
      ref="myEditor"
      @change="handleChange"
    ></vue-quill-editor>
    <div v-html="editorValue"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editorValue: ''
    }
  },
  methods: {
    handleChange() {
      this.editorValue=this.$refs.myEditor.quill.root.innerHTML;
    }
  }
}
</script>

支持图片上传的富文本编辑器

以下示例展示如何使用VueQuillEditor创建一个支持上传图片功能的富文本编辑器，使用了接口/api/upload/image实现图片上传的功能。

<template>
  <div>
    <vue-quill-editor
      ref="myEditor"
      :options="quillOption"
    ></vue-quill-editor>
    <button @click="submitContent">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      quillOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            [{ direction: 'rtl' }],
            [{ align: [] }],
            ['link', 'image', 'video', 'formula'],
            ['clean']
          ]
        },
        theme: 'snow',
        // 限制字节数
        maxLength: 1000,
        // 图片上传配置
        imageDropAndPaste: true,
        formats: ['image', 'video', 'code-block'],
        // 图片上传api
        imageUploadFunction(file) {
          const formData = new FormData()
          formData.append('file', file)
          return this.$http.post('/api/upload/image', formData).then(res => {
            if (res.status === 200) {
              return res.data
            } else {
              throw new Error('上传出错')
            }
          })
        },
      },
    }
  },
  methods: {
    submitContent() {
      this.$http.post('/api/subContent', {
        content: this.$refs.myEditor.quill.root.innerHTML
      }).then(res => {
        if (res.status === 200) {
          console.log('提交成功')
        }
      })
    }
  }
}
</script>

总结

以上就是使用VueQuillEditor创建富文本编辑器的完整攻略，如果对VueQuillEditor还不熟悉的话，建议先从最基础的使用开始学习，一步步加深对这个工具的了解。