vue-quill-editor副文本编辑器自定义工具栏内的工具及新增工具按钮绑定事件调用vue方法

最新推荐文章于 2024-07-12 15:45:55 发布

C1rq99

最新推荐文章于 2024-07-12 15:45:55 发布

阅读量1.2k

点赞数 2

分类专栏： quill vue-quill-editor 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/c1rq99/article/details/121232492

版权

quill 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

vue-quill-editor

1 篇文章 0 订阅

订阅专栏

如果没有安装先npm

 npm install vue-quill-editor --save

引入

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

初始化编辑器

<template>
  <quill-editor ref="myTextEditor" v-model="content" :options="quillOption">
  </quill-editor>
</template>

配置

export default {
  components: {
    quillEditor,
  },
  mounted() {
    this.quillOption.initButton();
  },
  data() {
    return {
      content: "<h2>freddy</h2>",
      quillOption: {
        theme: "snow", // 主题
        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: [] }],
              [{ align: [] }],
              ["clean", "link", "image", "video"],
              ["addBtn"],      //新添加的工具
            ], // 自定义工具栏选项
            
            handlers: {   
              addBtn: () => {    //新增按钮绑定事件 自定义  调用vue实例上的method   这里注意名字要和上面新增按钮的名字一样
                this.btnMethod();
              },
            },
          },
        },
        initButton: function () {
          //在使用的页面中初始化按钮样式
          const addBtn= document.querySelector(".ql-addBtn");
          addBtn.style.cssText =
            "width:40px; border:1px solid #ccc; border-radius:5px;font-size:20px;padding-bottom:30px;";
          addBtn.className = "iconfont icon-reset";


        },
      },
    };
  },

  methods: {
    btnMethod() {
      console.log(this);
    },
  },
};