vue 项目中常用富文本 vue-quill-editor

一，前言

vue-quill-editor 是基于 Quill, 适用于Vue 的富文本编辑器， 支持服务端渲染和单页面应用， 不过具有一定的兼容性， 就是兼容 IE10+。

涉及到内容：

1.1 图片上传到服务器

1.2 图片拖拽

1.3 选取前后追加内容

二， 使用

2.1 安装

npm install vue-quill-editor -S

2.2挂载到项目 

2.2.1 全局挂载

// main.js

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

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor, /* { default global options } */)

2.2.2 组件中挂载

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  }
}

我们在开发中，使用富文本，最多也就那么几个地方，所以不用使用全局挂载，直接封装成组件，在组件中挂载即可

2.3 组件中使用

<template>
 <!-- Two-way Data-Binding -->
  <quill-editor
    ref="myQuillEditor"
    v-model="content"
    :options="editorOptionJieDa"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />    
</template>

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
import {container, ImageExtend, QuillWatch} from 'quill-image-extend-module';
Quill.register('modules/ImageExtend', ImageExtend)

import ImageResize from "quill-image-resize-module";

export default {
  components: {
    quillEditor
  },
   data () {
      return {
        // 富文本编辑器默认内容
        content: ' ',
        //富文本编辑器配置
        editorOption: {
              placeholder: "",
        modules: {
          ImageExtend:{//图片上传模块
              loading: false,
              name: 'file',
              action: '/api/xcmanager/v1/pub/uploadPicture', //图片上传接口地址
              response: (res) => {
                return res.result
              }
            },
          formula: true,
          imageResize: {//图片可伸缩模块
            displayStyles: {
              backgroundColor: "black",
              border: "none",
              color: "white",
            },
            modules: ["Resize", "DisplaySize", "Toolbar"],
          },
          toolbar: {//工具栏配置
            container: [
              ["formula"],
              ["bold", "italic", "underline"], // toggled buttons
              [{ list: "ordered" }, { list: "bullet" }],
              [{ script: "sub" }, { script: "super" }], // superscript/subscript
              [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }], // dropdown with defaults from theme
              [{ font: [] }],
              [{ align: [] }],
              ["image"],
              ["strike"],//当前位置添加横线
               ['clean'] //选区前后添加$$
            ],
            handlers: {//事件处理函数
              image: function (value) {
                QuillWatch.emit(this.quill.id)
              },
              strike: function (value) {//当前位置添加横线
                if (value) {
                  var length = this.quill.selection.savedRange.index
                  // this.quill.insertText(length,'_____')
                  // this.quill.insertText(length,'666')
                  this.quill.insertText(length,"$$\\underline{\\qquad}$$")
                  this.quill.setSelection(length + 24)
                }
              },
              clean:function (value) {//选取所在前后位子添加$$ --katex解析latex数学公式需求
                var weizhi = this.quill.getSelection().index //选区位置
                var length = this.quill.getSelection().length //选区字符长度
                var houLength = (weizhi + length + 2)
                this.quill.insertText(weizhi,'$$')
                this.quill.insertText(houLength,'$$')
              },
              'formula':function(value){
                if(value){
                  var length = this.quill.selection.savedRange.index
                  this.quill.insertText(length,'$$$$')
                  this.quill.setSelection(length + 2)
                }
              }
            },
          },
        },
        }
      }
    },
    methods: {
      //失去焦点事件
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      //获得焦点事件
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      // 准备富文本编辑器
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      //内容改变事件
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html
      }
    }
}

CSS样式配置
 

.quill-editor /deep/ .ql-snow .ql-tooltip[data-mode="formula"]::before {
  content: "请输入公式:";
}
.quill-editor /deep/ .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: "保存";
  padding-right: 0px;
}
.selectQuil /deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow{
  height:100px;
}

vue-quill-editor 官方文档：https://www.kancloud.cn/liuwave/quill/1409373