vue-quill-eidtor——在Vue项目中应用及实现自定义功能

背景：vue-cli3 + ant-design-vue 搭建的后台管理系统，wangEditor3做为其中的富文本编辑器
需求：在富文本中插入自定义样式的卡片

最终效果：

接下来开始了解我是如何实现这个功能的吧~
step1：安装及引用（参考①）

npm install vue-quill-editor --save

引用组件：新建一个editor.vue

<template>
  <div id="Test">
    <quill-editor ref="myTextEditor"
              v-model="content">
    </quill-editor>
  </div>
</template>
 
<script>
import { quillEditor } from 'vue-quill-editor'
 
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: '
hello quill-editor
',
    }
  }
}
</script>

step2:撰写自定义的标签（即卡片标签内容）
创建一个goodsBox.js

import Quill from 'quill';
// 注册需要的模块（inline(行内)；block(块级);Embed(不可编辑)）
const Inline = Quill.import('blots/inline');
const Block = Quill.import("blots/block");
const BlockEmbed = Quill.import("blots/block/embed"); 
class goodsBox extends BlockEmbed {
  static create(value) {
    const node = super.create();
    // 给这个“节点”添加需要的内容
    node.dataset.title = value.title;

    const img = document.createElement('img')
    img.className = 'goodsImg'
    img.setAttribute('src', value.mainImage)
   ...
   // 此处根据你需要注册的卡片结构，通过js原生方法创建并添加相关属性等 

    node.appendChild(img)
    node.appendChild(span1)
    node.appendChild(div)
    ...
    // 根据结构将子元素放进父元素中

    node.setAttribute("contenteditable", false);  // 设置该模块为不可编辑的
    return node;
  }

  static value(node) {
    return node.dataset;
  }
  static formats(node) {
    return node;
  }
}
goodsBox.blotName = 'goodsBox';
goodsBox.tagName = 'div';
goodsBox.className = 'goodsBox';

export default goodsBox;

step3:在editor.vue中注册这一个模块

<script>
import { quillEditor, Quill } from "vue-quill-editor";
import GoodsBox from "./goodsBox"; // 引入刚刚创建的模块js
import AddCard from "./add-card"; // 实现业务的组件
Quill.register(GoodsBox); // 用于自定义标签
export default {
  name: "App",
  components: {
    AddCard
  },
  mounted() {
    // ！！添加自定义标签 一定要在一开始就注册这一按钮
    const goodsBoxButton = document.querySelector(".ql-goodsBox");
    goodsBoxButton.innerHTML = this.icon
  },
  data() {
    return {
      content: `输入正文内容`,
      quillSelection: null,
      editorOption: {
        modules: {
          toolbar: {
            container: [
            ... // 此处根据需要引入需要的模块
              ["goodsBox"]
            ],
            handlers: {
              goodsBox: () => {
                // 自定义标签处理方法
                this.quillSelection = this.editor.getSelection(true);
                this.isShowCard = true; // 触发弹窗
              }
            }
          }
        },
        theme: "snow"
      },
      isShowCard: false, // 卡片组件展示
      icon: ``
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
};
</script>
<style>
// 卡片相关样式
</style>

接下来就大功告成可以使用啦~~
希望我的实践过程能给你带来一些帮助哦~٩(๑>◡<๑)۶ 欢迎很多很多的赞嚯~

参考资料：
①安装及使用

②自定义上传图片功能

③自定义字体列表

④quill部分API说明