Vue 实现富文本功能 vue-quill-editor

1. 安装架包 ： npm install vue-quill-editor --save
2. 封装富文本控件：quillEditor.vue

• <template>
    <quill-editor ref="text" :disabled="disabled" v-model="content.value" :options="editorOption" class="myQuillEditor" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
      @change="onEditorChange($event)">
    </quill-editor>
  </template>
  
  <script>
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  
  const toolbarConfig = [
    ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
    ['blockquote', 'code-block'], // 引用，代码块
    [{ header: 1 }, { header: 2 }], // 几级标题
    [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
    [{ script: 'sub' }, { script: 'super' }], // 下角标，上角标
    [{ indent: '-1' }, { indent: '+1' }], // 缩进
    [{ direction: 'rtl' }], // 文字输入方向
    [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
    [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
    [{ color: [] }, { background: [] }], // 颜色选择
    [{ font: [] }], // 字体
    [{ align: [] }], // 居中
    ['clean'],
    [('link', 'image', 'video')] // 链接、图片、视频
  ]
  
  export default {
    name: 'vueQuillEditor',
    props: { content: { value: '' }, disabled: false },
    data() {
      return {
        editorOption: {
          theme: 'snow',
          boundary: document.body,
          modules: {
            toolbar: toolbarConfig
          },
          placeholder: '请输入内容... ...',
          readOnly: false
        }
      }
    },
    components: {
      quillEditor
    },
  
    methods: {
      onEditorReady(editor) {
        // 准备编辑器
      },
      onEditorBlur() {}, // 失去焦点事件
      onEditorFocus() {}, // 获得焦点事件
      onEditorChange() {}, // 内容改变事件
      beforeEditorUpload() {
        // 显示loading动画
        this.quillUpdateImg = true
      },
      editorUploadSuccess(res, file) {
        // 获取富文本组件实例
        const quill = this.$refs.myQuillEditor.quill
        // 如果上传成功
        if (res.code === 0) {
          // 获取光标所在位置
          const length = quill.getSelection().index
          // 插入图片  res.info为服务器返回的图片地址
          quill.insertEmbed(length, 'image', res.data.filepath)
          // 调整光标到最后
          quill.setSelection(length + 1)
        } else {
          this.$message.error('图片插入失败')
        }
        // loading动画消失
        this.quillUpdateImg = false
      },
      // 富文本图片上传失败
      editorUploadError() {
        // loading动画消失
        this.quillUpdateImg = false
        this.$message.error('图片插入失败')
      }
    }
  }
  </script>
  

•  调用封装好的控件：

<template>
    <el-card class="box-card">
        <el-form :model="modelInfo" label-width="80px" label-position="top">
            <el-form-item label="填写审核信息">
                <vueQuillEditor :content="content"></vueQuillEditor>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
// 引用控件
import vueQuillEditor from '@/components/quillEditor/quillEditor'

export default {
 components: {
    //引入组件
    vueQuillEditor,
  },
 data() {
    return {
      // 定义变量
      content: { value: '' },
    }
 }
}
</script>