vue-quill-editor富文本编辑器的使用

富文本编辑器  封装组件可用于信息、新闻编辑、商品内容编辑等等。常用的文本编辑、文字样式段落、对齐、大小、上传图片、标题等基础模板。

还要在基础模块之上进行一些扩展如 上传图片修改成url格式（默认base64 不便于存储传输）

参考的一些文章：

vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案_cplvfx的博客-CSDN博客_quill修改源码vue-quill-editor富文本编辑器使用方法，最全，含部分源码解读，含图片上传，如果页面有多个富文本，图片上传解决方案https://blog.csdn.net/cplvfx/article/details/125557966?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166815875216782388063005%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=166815875216782388063005&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~rank_v31_ecpm-1-125557966-null-null.nonecase&utm_term=quill&spm=1018.2226.3001.4450入基础版

安装：

npm install vue-quill-editor

npm install quill

全局引入：main.js

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor);

按需某个组件引入：

import { quillEditor } from 'vue-quill-editor'
 
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
export default {
  components: {
    quillEditor
  }
}

模板中使用：

后面事件用的不多 需要的话在 methods配置回调即可

<template>
<quill-editor
    v-model="content"  双向绑定的数据
    ref="myQuillEditor" ref标识
    :options="editorOption" 配置项
    @blur="onEditorBlur($event)" 失去焦点事件 可传入 quill 实例
    @focus="onEditorFocus($event)" 获得焦点事件 可传入 quill 实例
    @change="onEditorChange($event)" 值发生改变事件 可传入 quill 实例
    @ready="onEditorReady($event)"> 加载完成事件 可传入 quill 实例
quill-editor> 
template>

绑定数据和配置项

鼠标悬浮在图表上有 中文提示

实现本质就是为元素添加上titile 属性

先定义数据 Chiice 就是类名  title就是要添加的title

在组件渲染到页面上时开始循环 查找Chiice 找到了就设置 title 

const titleConfig = [
  { Choice: '.ql-insertMetric', title: '跳转配置' },
  { Choice: '.ql-bold', title: '加粗' },
  { Choice: '.ql-italic', title: '斜体' },
  { Choice: '.ql-underline', title: '下划线' },
  { Choice: '.ql-header', title: '段落格式' },
  { Choice: '.ql-strike', title: '删除线' },
  { Choice: '.ql-blockquote', title: '块引用' },
  { Choice: '.ql-code', title: '插入代码' },
  { Choice: '.ql-code-block', title: '插入代码段' },
  { Choice: '.ql-font', title: '字体' },
  { Choice: '.ql-size', title: '字体大小' },
  { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
  { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
  { Choice: '.ql-direction', title: '文本方向' },
  { Choice: '.ql-header[value="1"]', title: 'h1' },
  { Choice: '.ql-header[value="2"]', title: 'h2' },
  { Choice: '.ql-align', title: '对齐方式' },
  { Choice: '.ql-color', title: '字体颜色' },
  { Choice: '.ql-background', title: '背景颜色' },
  { Choice: '.ql-image', title: '图像' },
  { Choice: '.ql-video', title: '视频' },
  { Choice: '.ql-link', title: '添加链接' },
  { Choice: '.ql-formula', title: '插入公式' },
  { Choice: '.ql-clean', title: '清除字体格式' },
  { Choice: '.ql-script[value="sub"]', title: '下标' },
  { Choice: '.ql-script[value="super"]', title: '上标' },
  { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
  { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
  { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
  { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' },
  { Choice: '.ql-upload', title: '上传文件' },
  { Choice: '.ql-table', title: '插入表格' },
  { Choice: '.ql-table-insert-row', title: '插入行' },
  { Choice: '.ql-table-insert-column', title: '插入列' },
  { Choice: '.ql-table-delete-row', title: '删除行' },
  { Choice: '.ql-table-delete-column', title: '删除列' }
];
 
mounted(){
    for (let item of titleConfig) {
      let tip = document.querySelector('.quill-editor ' + item.Choice)
      if (!tip) continue
      tip.setAttribute('title', item.title)
    }
}

到这里 基础的富文本编辑器就能使用了

 改造图片上传

原因：quill 自动将上传的图片转成了 base64格式 传输和储存起来不方便、转成url模式、更加方便的储存及使用

思路：劫持quill本身上传图片的事件 、走向自己的方法

1. 操作点击一个隐藏的上传文件按钮、将选择的图片发送到服务器
2. 上传操作 成功后 服务器返回 图片的url地址
3. 将图片插入到编辑器显示区域（光标的最后面）

留一个隐藏的上传按钮放在模板里

<template>
<div id="RichText">
<quill-editor   .../>
<input type="file" ref="uploadInput" @change="EditorUpload" class="uploadImgEditor" hidden  />
div>
template>

 设置里 toolbar => handler => image 标识点击上传图片图表的回调  更改为 点击上面新增的输入框 输入框 选择好图片 再触发 @change='EditorUpload' 

 editorOption: {
        placeholder: '请在这里输入', // 默认提示 被上面覆盖了
        theme: 'snow', //主题 snow：有工具栏的；bubble：只有文本域的
        history: { // 历史记录 可回退步数相关配置
          delay: 1000,
          maxStack: 50,
          userOnly: false
        },
        toolbar: { //工具栏相关配置
            container: toolbarOptions, // 抽离出啦一个对象 
            handlers: {
              image: function (value) {
                if (value) {
                  document.querySelector(".uploadImgEditor").click();
                } else {
                  this.Quill.format("image", false);
                }
              }
        }
        }

收集图片以 formData格式  新增  配置好 请求头和携带内容发送请求 请求成功后 then 将图片插入到内容区、此时就是url格式的

  methods:{ 
   //富文本-点击图片上传事件
    EditorUpload() {
      var file = this.$refs.uploadInput.files[0];
      var fd = new FormData();
      fd.append("file", file);
      this.uploadLogo(fd);
    },
    //富文本-图片上传请求
    uploadLogo(fd) {
      let config = {
        headers: { //添加请求头
          "Content-Type": "multipart/form-data",
          "Authorization":"Bearer ....",
      },
      };
       // 发起请求
      axios
        .post(
          "http://127.0.0.1:8888/api/private/v1/upload",fd,config
        )
        .then((res) => {
          let quill = this.$refs.myTextEditor.quill;//获取富文本编辑器dom对象
          let length = quill.getSelection().index;//光标位置
          quill.insertEmbed(length, 'image',res.data.data.url); // 插入图片  图片地址
          quill.setSelection(length + 1);// 调整光标到最后
        });
    },
  }