vue-quill-editor 富文本编辑器

效果：

安装：

npm install vue-quill-editor --save

# or
yarn add vue-quill-editor

组件方式使用：引入样式及组件

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

页面使用：

<!-- 计数内容可以自己写，定位到编辑器右下角即可 -->
<quill-editor 
  ref="myTextEditor" 
  class="editor_shop" 
  :options="quillOption"
  v-model="announForm.content"
  style="width: 100%;"
  @change="onEditorChange($event)"
></quill-editor>

change方法：

onEditorChange({ quill, html, text }) {
            quill.deleteText(2000,1); // 操作编辑器文本内容(删除文本内容)
            // 字数超过两千字，编辑器显示的是删除了多余字体，但是实际内容依然存在，
            // 所以自己对内容进行截取
            let textcont = text;
            if(textcont.length > 2000) {
                textcont = textcont.slice(0,2001)
            } else {
                textcont = textcont;
            }
            // quilleditorLength 为自定义的编辑器字数计数
            if(this.announForm.content == "") {
                this.quilleditorLength = 0;
            } else {
                this.quilleditorLength = quill.getLength() - 1;
            }
             // 保存输入的内容
             this.createAnnounQuillConent = textcont;
        },

quillOption 对象为编辑器配置对象，可用于操作按钮配置，及重写编辑器操作方法，如：

import cookie from '@/storage/cookies'
import { Message } from 'element-ui'
import emojiList from "@/components/chat/announcement/js/emojiList"

const emojiIcon = '<svg class="i" viewBox="0 0 24 24"><use href="#emoticon-happy"></use></svg>';
// let that = this
/* 富文本编辑图片上传配置 */
const uploadConfig = {
  action: process.env.VUE_APP_APIMATERIALS,
  methods: 'POST', // 必填参数 图片上传方式
  token: cookie.cookieRead('token'), // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
  name: 'file', // 必填参数 文件的参数名
  size: 500, // 可选参数   图片大小，单位为Kb, 1M = 1024Kb
  accept: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon' // 可选 可上传的图片格式
}

// toolbar工具栏的工具选项（默认展示全部）
const toolOptions = [
  ['bold', 'italic', 'underline', 'strike'], // bold加粗  italic斜体  underline下划线  strike删除线
  ['blockquote', 'code-block'], // blockquote引用  code-block代码块
  [
    {'header': 1}, // h1
    {'header': 2}, // h2
  ],
  [
    {'list': 'ordered'}, // 有序列表
    {'list': 'bullet'} // 无序列表
  ], 
  // [{'script': 'sub'}, {'script': 'super'}], // sub右下角输入(上标)   super右上角输入(下标)
  // [{'indent': '-1'}, {'indent': '+1'}], //缩进   -1左移一个tab距离    +1右移一个tab距离
  // [{'direction': 'rtl'}], // 文字居左居右切换
  // [{'size': ['small', false, 'large', 'huge']}], // 大小
  // [{'header': [1, 2, 3, 4, 5, 6, false]}], // 标题
  [
    {'color': []}, // 颜色
    {'background': ["#ccc"]} // 背景
  ],
  // [{'font': []}], // 字体
  // [{'align': []}], // 文字位置(居左 居右 居中)
  // ['emoji'],
  // ['clean'], // 清除效果
  // ['link', 'image', 'video'] // 链接  图片  视频
]
const handlers = {
  image: function image () {
    var self = this
    var fileInput = this.container.querySelector('input.ql-image[type=file]')
    if (fileInput === null) {
      fileInput = document.createElement('input')
      fileInput.setAttribute('type', 'file')
      // 设置图片参数名
      if (uploadConfig.name) {
        fileInput.setAttribute('name', uploadConfig.name)
      }
      // 可设置上传图片的格式
      fileInput.setAttribute('accept', uploadConfig.accept)
      // fileInput.setAttribute('size', uploadConfig.size);
      fileInput.classList.add('ql-image')
      // 监听选择文件
      fileInput.addEventListener('change', function (t) {
        // 创建formData
        var formData = new FormData()
        if (fileInput.files[0].size / 1000 > 500) {
          Message.error('图片大小不能超过500kb')
          return false
        }
        formData.append(uploadConfig.name, fileInput.files[0])
        formData.append('object', 'product')
        // 如果需要token且存在token
        if (uploadConfig.token) {
          // formData.append('token', uploadConfig.token)
        }
        // 图片上传
        var xhr = new XMLHttpRequest()
        xhr.open(uploadConfig.methods, uploadConfig.action + '/file/add', true)
        xhr.setRequestHeader('Authorization', 'Bearer ' + uploadConfig.token)
        // 上传数据成功，会触发

        xhr.onload = function (e) {
          if (xhr.status === 200) {
            var res = JSON.parse(xhr.responseText)
            let length = self.quill.getSelection(true).index
            self.quill.insertEmbed(length, 'image', `https://shigongbang.oss-cn-hangzhou.aliyuncs.com/${res.data}`)
            self.quill.setSelection(length + 1)
          }
          fileInput.value = ''
        }
        // 开始上传数据
        xhr.upload.onloadstart = function (e) {
          fileInput.value = ''
          console.log(fileInput.files[0])
        }
        // 当发生网络异常的时候会触发，如果上传数据的过程还未结束
        xhr.upload.onerror = function (e) {
          console.log(fileInput.files[0])
        }
        // 上传数据完成（成功或者失败）时会触发
        xhr.upload.onloadend = function (e) {
          console.log(fileInput.files[0])
          // console.log('上传结束')
        }
        xhr.send(formData)
      })
      this.container.appendChild(fileInput)
    }
    fileInput.click()
  },
}

export default {
  placeholder: '请输入公告内容',
  theme: 'snow', // 主题
  modules: {
    toolbar: {
      container: toolOptions,// 工具栏选项 
      handlers: handlers // 事件重写
    },
    
  }
}

说明一点：toolOptions 数组中的参数项即为编辑器操作按钮，需要什么按钮传入即可，默认全部都有，对于toolOptions  中的参数数组之间的嵌套关系可不用理会，其实可以把全部项目用一个数组包裹即可，出现那么多数组是因为  为了区分组别，在一个数组中的按钮之间会挨得比较近，两个数组之间会存在一点距离，不太明白的可以自己写写，把多个项放在一个数组中演示一下。 

更多使用方法参见下面，自己看吧 

https://blog.csdn.net/senmage/article/details/82388728

https://github.com/surmon-china/vue-quill-editor

Quill官方中文文档

https://www.npmjs.com/package/vue-quill-editor

基于Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题