vue-quill-editor (好用的富文本编辑器，带表格编辑)

最新推荐文章于 2024-07-25 15:19:10 发布

代意如

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量4.3k

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_52137696/article/details/131540118

版权

安装依赖

npm i vue-quill-editor@"^3.0.6" //3版本以上

组件QuillEditor.vue文件：

<template>
  <keep-alive>
    <div class="vue-quill-editor">
      <div class="editor"></div>
    </div>
  </keep-alive>
</template>

<script>
import Quill from "quill";
import "quill/dist/quill.snow.css";
// 设置字体大小
const fontSizeStyle = Quill.import("attributors/style/size"); // 引入这个后会把样式写在style上
fontSizeStyle.whitelist = [
  "12px",
  "14px",
  "16px",
  "18px",
  "20px",
  "24px",
  "28px",
  "32px",
  "36px",
];
Quill.register(fontSizeStyle, true);
// 设置字体样式
const Font = Quill.import("attributors/style/font"); // 引入这个后会把样式写在style上
const fonts = ["SimSun", "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong"];
Font.whitelist = fonts; // 将字体加入到白名单
Quill.register(Font, true);
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: Object,
  },
  data() {
    return {
      quill: null,
      options: {
        theme: "snow",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
              [{ align: [] }], // 对齐方式-----[{ align: [] }]
              [
                {
                  size: fontSizeStyle.whitelist,
                },
              ], // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
              [{ font: fonts }], // 字体种类-----[{ font: [] }]
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ direction: "ltl" }], // 文本方向-----[{'direction': 'rtl'}]
              [{ direction: "rtl" }], // 文本方向-----[{'direction': 'rtl'}]
              [{ indent: "-1" }, { indent: "+1" }], // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
              [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
              ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
              ["clean"], // 清除文本格式-----['clean']
              // ['link', 'image', 'video'] // 链接、图片、视频-----['link', 'image', 'video']
              [
                { table: "TD" },
                { "table-insert-row": "TIR" },
                { "table-insert-column": "TIC" },
                { "table-delete-row": "TDR" },
                { "table-delete-column": "TDC" },
              ],
            ],
            handlers: {
              table: function (val) {
                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,
        },
        placeholder: "",
      },
    };
  },
  methods: {
    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]];
      });
    },
    getContentData() {
      return this.quill.getContents();
    },
  },
  mounted() {
    const dom = this.$el.querySelector(".editor");
    this.quill = new Quill(dom, this.options);
    // this.quill.setContents(this.value)
    this.quill.on("text-change", () => {
      //   console.log(this.quill.getContents())
      //   this.$emit('contentData', this.quill.getContents())
      //   console.log(this.quill.root.innerHTML)
      this.$emit("contentData", this.quill.root.innerHTML);
    });
    this.$el.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>`;
    this.$el.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>`;
    this.$el.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>`;
    this.$el.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>`;
    this.addQuillTitle();
  },
  activated() {
    this.quill.setContents({});
  },
};
</script>
<style lang="scss">
.vue-quill-editor {
  line-height: normal;
  .ql-container.ql-snow {
    line-height: normal !important;
    height: 460px !important;
    font-size: 14px;
  }
  .ql-snow {
    .ql-tooltip[data-mode="link"]::before {
      content: "请输入链接地址:";
    }
    .ql-tooltip.ql-editing a.ql-action::after {
      border-right: 0px;
      content: "保存";
      padding-right: 0px;
    }
    .ql-tooltip[data-mode="video"]::before {
      content: "请输入视频地址:";
    }
    .ql-picker.ql-size {
      .ql-picker-label[data-value="12px"]::before,
      .ql-picker-item[data-value="12px"]::before {
        content: "12px";
      }
      .ql-picker-label[data-value="14px"]::before,
      .ql-picker-item[data-value="14px"]::before {
        content: "14px";
      }
      .ql-picker-label[data-value="16px"]::before,
      .ql-picker-item[data-value="16px"]::before {
        content: "16px";
      }
      .ql-picker-label[data-value="18px"]::before,
      .ql-picker-item[data-value="18px"]::before {
        content: "18px";
      }
      .ql-picker-label[data-value="20px"]::before,
      .ql-picker-item[data-value="20px"]::before {
        content: "20px";
      }
      .ql-picker-label[data-value="24px"]::before,
      .ql-picker-item[data-value="24px"]::before {
        content: "24px";
      }
      .ql-picker-label[data-value="28px"]::before,
      .ql-picker-item[data-value="28px"]::before {
        content: "28px";
      }
      .ql-picker-label[data-value="32px"]::before,
      .ql-picker-item[data-value="32px"]::before {
        content: "32px";
      }
      .ql-picker-label[data-value="36px"]::before,
      .ql-picker-item[data-value="36px"]::before {
        content: "36px";
      }
    }
    .ql-picker.ql-header {
      .ql-picker-label::before,
      .ql-picker-item::before {
        content: "文本";
      }
      .ql-picker-label[data-value="1"]::before,
      .ql-picker-item[data-value="1"]::before {
        content: "标题1";
      }
      .ql-picker-label[data-value="2"]::before,
      .ql-picker-item[data-value="2"]::before {
        content: "标题2";
      }
      .ql-picker-label[data-value="3"]::before,
      .ql-picker-item[data-value="3"]::before {
        content: "标题3";
      }
      .ql-picker-label[data-value="4"]::before,
      .ql-picker-item[data-value="4"]::before {
        content: "标题4";
      }
      .ql-picker-label[data-value="5"]::before,
      .ql-picker-item[data-value="5"]::before {
        content: "标题5";
      }
      .ql-picker-label[data-value="6"]::before,
      .ql-picker-item[data-value="6"]::before {
        content: "标题6";
      }
    }
    .ql-picker.ql-font {
      .ql-picker-label[data-value="SimSun"]::before,
      .ql-picker-item[data-value="SimSun"]::before {
        content: "宋体";
        font-family: "SimSun" !important;
      }
      .ql-picker-label[data-value="SimHei"]::before,
      .ql-picker-item[data-value="SimHei"]::before {
        content: "黑体";
        font-family: "SimHei";
      }
      .ql-picker-label[data-value="Microsoft-YaHei"]::before,
      .ql-picker-item[data-value="Microsoft-YaHei"]::before {
        content: "微软雅黑";
        font-family: "Microsoft YaHei";
      }
      .ql-picker-label[data-value="KaiTi"]::before,
      .ql-picker-item[data-value="KaiTi"]::before {
        content: "楷体";
        font-family: "KaiTi" !important;
      }
      .ql-picker-label[data-value="FangSong"]::before,
      .ql-picker-item[data-value="FangSong"]::before {
        content: "仿宋";
        font-family: "FangSong";
      }
    }
  }
  .ql-align-center {
    text-align: center;
  }
  .ql-align-right {
    text-align: right;
  }
  .ql-align-left {
    text-align: left;
  }
}
</style>

父组件使用：

// 编辑状态 
<QuillEditor v-if="isEdit" ref="QuillEditor" />
// 展示状态（为保证格式正确，要命名为"ql-editor",外面盒子要命名为"ql-container ql-snow"）
 <div v-else class="ql-container ql-snow">
           <div
              class="ql-editor"
              style="height: 500px; padding: 20px 20px; width: 100%"
              v-html="content"
            />
 </div>

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)