vue-quill-editor富文本编辑器上传图片

 先看下效果图

1.安装 vue-quill-editor

npm install vue-quill-editor -S

2.在使用的页面进行引入

import axios from "axios";

import Quill from "quill"; // 引入编辑器

import { quillEditor } from "vue-quill-editor";

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

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

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

 3.页面上使用，el-upload是自定义图片上传，Uploadfwb是自定义图片上传的方法

  失去焦点事件 onEditorBlur(quill) {},

 获得焦点事件 onEditorFocus(quill) {},

 准备富文本编辑器 onEditorReady(quill) {},

 内容改变事件 onEditorChange({ quill, html, text }) {  this.content = html },

 <el-upload
      class="avatar-uploader"
      :http-request="Uploadfwb"
      action=""
      name="img"
      accept=".jpg,.png"
      :show-file-list="false"
      style="height: 1px"
    >
    </el-upload>
    <quill-editor
      class="ql-editor"
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    >
    </quill-editor>

4.注册quillEditor组件，在data里进行富文本编辑器的配置

components: {
    quillEditor,
  },
 data() {
    return {
      content: "", //双向数据绑定数据
      // 富文本编辑器配置
      editorOption: {
        theme: "snow",
        history: {
          delay: 1000,
          maxStack: 50,
          userOnly: false,
        },
        placeholder: "请在这里输入",
        modules: {
          toolbar: {
            container: [
              ["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: [
                    "SimSun",
                    "SimHei",
                    "Microsoft-YaHei",
                    "KaiTi",
                    "FangSong",
                    "Arial",
                  ],
                },
              ], // 字体
              [{ align: [] }], // 居中
              ["clean"], // 清除样式,
              ["link", "image"], // 上传图片、上传视频
            ],
            handlers: {
              image: (value) => {
                if (value) {
                  // 调用element的图片上传组件
                  document.querySelector(".avatar-uploader input").click();
                } else {
                  this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
  },

5.  配置 鼠标悬浮在图表上有中文提示

  mounted() {
    //鼠标悬浮在图表上有 中文提示
    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: "删除列" },
    ];

    for (let item of titleConfig) {
      let tip = document.querySelector(".quill-editor " + item.Choice);
      if (!tip) continue;
      tip.setAttribute("title", item.title);
    }

    // 自定义字体大小
    const Size = Quill.import("attributors/style/size");
    Size.whitelist = ["10px", "12px", "16px", "18px", "20px", "30px", "32px"];
    Quill.register(Size, true);

    // 自定义字体类型
    var fonts = [
      "SimSun",
      "SimHei",
      "Microsoft-YaHei",
      "KaiTi",
      "FangSong",
      "Arial",
      "sans-serif",
    ];
    var Font = Quill.import("formats/font");
    Font.whitelist = fonts;
    Quill.register(Font, true);
  },

6. 富文本编辑器自动获取焦点处理 ，this.content.length是在data里给富文本进行双向数据绑定的数据      

this.$nextTick(() => {

        this.$refs.myQuillEditor.quill.enable(true);

        // this.$refs.myQuillEditor.quill.blur();

        // this.$refs.myQuillEditor.quill.focus();

        this.$refs.myQuillEditor.quill.setSelection(this.content.length);

  });

 7.自定义图片上传的方法，在哪个页面用就一定要在该页面引入axios  （import axios from "axios";）

// 自定义图片上传

    Uploadfwb(file) {

      let fileName = `uid=${file.file.uid}&name=${file.file.name}`;

      axios({

        method: "get",

        url: " ", // 找后台要接口，返回new OSS需要的参数

        headers: {

          "Content-Type": "application/json",

        },

        params: {

          pfAppName: "com.ucheshenghuo",

        },

      }).then((res) => {

        const client = new OSS({

          // yourRegion填写Bucket所在地域。Region填写为oss-cn-hangzhou。

          region: "oss-cn-beijing",

          // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。

          accessKeyId: res.data.AccessKeyId,

          accessKeySecret: res.data.AccessKeySecret,

          // 从STS服务获取的安全令牌（SecurityToken）。

          stsToken: res.data.SecurityToken,

          // 填写Bucket名称。

          bucket: "o2o-web",

        });

        client.put(fileName, file.file).then((result) => {

          // 获取富文本组件实例

          let quill = this.$refs.myQuillEditor.quill;

          // 如果上传成功

          if (result) {

            // 获取光标所在位置

            let length = quill.getSelection().index;

            // 插入图片，res为服务器返回的图片链接地址

            quill.insertEmbed(length, "image", result.res.requestUrls[0]);

            // 调整光标到最后

            quill.setSelection(length + 1);

          } else {

            // 提示信息，需引入Message

            this.$message.error("图片插入失败！");

          }

        });

      });

    },

最后是富文本编辑器的样式 ，直接拿去用就没问题

<style scoped lang="less">

// 给文本内容加高度，滚动条
.quill-editor /deep/ .ql-container {
  min-height: 500px;
}

.ql-container {
  min-height: 500px;
}

::v-deep {
  .ql-snow .ql-tooltip [data-mode="link"]::before {
    content: "请输入链接地址:";
    left: 0;
  }

  .ql-snow .ql-tooltip.ql-editing {
    left: 0 !important;
  }

  .ql-snow .ql-tooltip {
    left: 0 !important;
  }

  .ql-snow .ql-editor {
    min-height: 450px;
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0px;
    content: "保存";
    padding-right: 0px;
  }

  .ql-snow .ql-tooltip[data-mode="video"]::before {
    content: "请输入视频地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: "14px" !important;
    font-size: 14px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: "10px" !important;
    font-size: 10px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: "12px" !important;
    font-size: 12px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: "16px" !important;
    font-size: 16px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: "18px" !important;
    font-size: 18px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: "20px" !important;
    font-size: 20px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="30px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="30px"]::before {
    content: "30px" !important;
    font-size: 30px;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
    content: "32px" !important;
    font-size: 32px;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体" !important;
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
    content: "宋体" !important;
    font-family: "SimSun";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
    content: "黑体" !important;
    font-family: "SimHei";
  }

  .ql-snow
    .ql-picker.ql-font
    .ql-picker-label[data-value="Microsoft-YaHei"]::before,
  .ql-snow
    .ql-picker.ql-font
    .ql-picker-item[data-value="Microsoft-YaHei"]::before {
    content: "微软雅黑" !important;
    font-family: "Microsoft YaHei";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
    content: "楷体" !important;
    font-family: "KaiTi";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
    content: "仿宋" !important;
    font-family: "FangSong";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
    content: "Arial" !important;
    font-family: "Arial";
  }

  .ql-snow
    .ql-picker.ql-font
    .ql-picker-label[data-value="Times-New-Roman"]::before,
  .ql-snow
    .ql-picker.ql-font
    .ql-picker-item[data-value="Times-New-Roman"]::before {
    content: "Times New Roman" !important;
    font-family: "Times New Roman";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
    content: "sans-serif" !important;
    font-family: "sans-serif";
  }

  .ql-font-SimSun {
    font-family: "SimSun";
  }

  .ql-font-SimHei {
    font-family: "SimHei";
  }

  .ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
  }

  .ql-font-KaiTi {
    font-family: "KaiTi";
  }

  .ql-font-FangSong {
    font-family: "FangSong";
  }

  .ql-font-Arial {
    font-family: "Arial";
  }

  .ql-font-Times-New-Roman {
    font-family: "Times New Roman";
  }

  .ql-font-sans-serif {
    font-family: "sans-serif";
  }

  .ql-snow.ql-toolbar .ql-formats .ql-revoke {
    //   background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
    width: 20px;
    height: 20px;
    filter: grayscale(100%);
    opacity: 1;
  }

  .ql-snow.ql-toolbar .ql-formats .ql-revoke:hover {
    //   background-image: url("../../../../assets/images/icons8-rotate-left-18.png");
    width: 20px;
    height: 20px;
    filter: none;
    opacity: 0.9;
  }

  img {
    opacity: 1;
  }

  img:hover {
    filter: none;
    opacity: 0.9;
  }

  /*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
  .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
    border-color: #ccc;
    height: 300px;
    overflow: auto;
  }
}
/*加上height和滚动属性就可以，滚动条样式是系统默认样式，可能不同*/
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
  height: 300px;
  overflow: auto;
}
</style>