富文本quill.js使用

富文本Quill.js

背景

项目中使用vue-quill-editor 不能兼容table所以重新使用了quill.js

使用

1. 引入

Editor: () => import("@/components/editor/Editor")

2. template

<editor
   :id="dialogFrom[item.prop] + '--only'"
   v-model="dialogFrom[item.prop]"
   :prop="item.prop"
   :dialogTitle="dialogTitle"
   @getQuill="getQuillChange($event, item.prop)"
></editor>

3. methods

// 获取富文本最新内容
 getQuillChange(e, name) {
 	console.log(e, name)
    // this.dialogFrom[name] = e;
 },

封装组件完整代码

// QuillEditor.vue
<template>
  <div class="editor-wapper" style="width: 335px;padding:0">
    <div ref="editor" :id="id"></div>
  </div>
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.snow.css";
const titleConfig = {
  "ql-bold": "加粗",
  "ql-color": "颜色",
  "ql-font": "字体",
  "ql-code": "插入代码",
  "ql-italic": "斜体",
  "ql-link": "添加链接",
  "ql-background": "颜色",
  "ql-size": "字体大小",
  "ql-strike": "删除线",
  "ql-script": "上标/下标",
  "ql-underline": "下划线",
  "ql-blockquote": "引用",
  "ql-header": "标题",
  "ql-indent": "缩进",
  "ql-list": "列表",
  "ql-align": "文本对齐",
  "ql-direction": "文本方向",
  "ql-code-block": "代码块",
  "ql-formula": "公式",
  "ql-image": "图片",
  "ql-video": "视频",
  "ql-clean": "清除字体样式",
  "ql-upload": "文件",
  "ql-table": "插入表格",
  "ql-table-insert-row": "插入行",
  "ql-table-insert-column": "插入列",
  "ql-table-delete-row": "删除行",
  "ql-table-delete-column": "删除列"
};

export default {
  name: "Editor",
  props: {
    value: String,
    id: String,
    prop: String,
    dialogTitle:String
  },

  data() {
    return {
      quill: null,
      currentValue: null,
      options: {
        theme: "snow",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              [{ header: 1 }, { header: 2 }],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ indent: "-1" }, { indent: "+1" }],
              [{ color: [] }, { background: [] }],
              [{ font: [] }],
              [{ align: [] }],
              ["clean"],
              ["link", "image", "video"],
              ["formula"], // 支持数学公式
              // 支持table
              [
                { table: "TD" },
                { "table-insert-row": "TIR" },
                { "table-insert-column": "TIC" },
                { "table-delete-row": "TDR" },
                { "table-delete-column": "TDC" }
              ]
            ],
            handlers: {
              table: function(val) {
              // 默认3列 2排
                this.quill.getModule("table").insertTable(2, 3);
              },
              "table-insert-row": function() {
                this.quill.getModule("table").insertRowBelow();
              },
              "table-insert-column": function() {
                this.quill.getModule("table").insertColumnRight();
              },
              "table-delete-row": function() {
                this.quill.getModule("table").deleteRow();
              },
              "table-delete-column": function() {
                this.quill.getModule("table").deleteColumn();
              }
            }
          },
          table: true // 开启table
        },
        placeholder: "",
        readonly: false // 选填
      }
    };
  },
  watch: {
    value(newVal, oldVal) {
      if (newVal && !oldVal) {
        this.quill.root.innerHTML = newVal;
      }
    },
    // 监听是否禁用富文本 因为我是应用在弹窗中的查看的时候需要禁用富文本编辑功能 
    dialogTitle(val) {
      val && val == "查看" ? this.quill.enable(true) : 		     this.quill.enable(false);
    }
  },
  beforeDestroy() {
    this.quill = null;
    delete this.quill;
  },
  mounted() {
    this.init();
    this.setTable();
    this.addQuillTitle();
  },
  methods: {
  // 设置操作table的svg
    setTable() {
      document.querySelector(
        ".ql-table-insert-row"
      ).innerHTML = `<svg t="1591862376726" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6306" width="18" height="200"><path d="M500.8 604.779L267.307 371.392l-45.227 45.27 278.741 278.613L779.307 416.66l-45.248-45.248z" p-id="6307"></path></svg>`;
      document.querySelector(
        ".ql-table-insert-column"
      ).innerHTML = `<svg t="1591862238963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6509" width="18" height="200"><path d="M593.450667 512.128L360.064 278.613333l45.290667-45.226666 278.613333 278.762666L405.333333 790.613333l-45.226666-45.269333z" p-id="6510"></path></svg>`;
      document.querySelector(
        ".ql-table-delete-row"
      ).innerHTML = `<svg t="1591862253524" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6632" width="18" height="200"><path d="M500.8 461.909333L267.306667 695.296l-45.226667-45.269333 278.741333-278.613334L779.306667 650.026667l-45.248 45.226666z" p-id="6633"></path></svg>`;
      document.querySelector(
        ".ql-table-delete-column"
      ).innerHTML = `<svg t="1591862261059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6755" width="18" height="200"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z" p-id="6756"></path></svg>`;
    },
    addQuillTitle() {
      const oToolBar = document.querySelector(".ql-toolbar");
      const aButton = oToolBar.querySelectorAll("button");
      const aSelect = oToolBar.querySelectorAll("select");
      aButton.forEach(function(item) {
        if (item.className === "ql-script") {
          item.value === "sub" ? (item.title = "下标") : (item.title = "上标");
        } else if (item.className === "ql-indent") {
          item.value === "+1"
            ? (item.title = "向右缩进")
            : (item.title = "向左缩进");
        } else {
          item.title = titleConfig[item.classList[0]];
        }
      });
      aSelect.forEach(function(item) {
        item.parentNode.title = titleConfig[item.classList[0]];
      });
    },
    init() {
      const editor = this.$refs.editor;
      // 初始化编辑器
      this.quill = new Quill(editor, this.options);
      //  默认值
      this.quill.root.innerHTML = this.value;
      // 富文本内容发生变化传给父组件
      this.quill.on("text-change", () => {
        this.$emit("getQuill", this.quill.root.innerHTML);
      });
    }
  }
};

</script>