Vue中使用quill-editor富文本编辑器之修改工具栏(toolbar)

1.代码中的使用方式

<template xmlns:v-quill="http://www.w3.org/1999/xhtml">
    <div class="wrapper release-tc">
        <div class="release-box">
            <h3>发布吐槽h3>
            <div class="editor">
                <div class="quill-editor" @change="onEditorChange($event)" :content="content" v-quill:myQuillEditor="editorOption">
                div>
                <div class="btns">
                    <button class="sui-btn btn-danger btn-release" @click="save">发布button>
                div>
                <div class="clearfix">div>
            div>
        div>
        <div class="clearfix">div>
    div>
template>

<script>
    import "~/assets/css/page-sj-spit-submit.css";
    import spitApi from "@/api/spit";

    export default {
        data() {
            return {
                content: '',
                editorOption: {
                    // some quill options
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            ['blockquote', 'code-block']
                        ]
                    }
                },
            }
        },
        methods: {
            onEditorChange({ editor, html, text }) {
                this.content = html;
            },
            save() {
                spitApi.save({content: this.content}).then((response) => {
                    this.$message({
                        showClose: true,
                        message: response.data.message,
                        type: (response.data.flag ? 'success' : 'error'),
                    });
                    if (response.data.flag) {
                        // 提交成功，跳转到吐槽首页
                        this.$router.push("/spit");
                    }
                });
            },
        },
    }
script>

<style scoped lang="stylus">
    .quill-editor
        min-height 200px
        max-height 400px
        overflow-y auto
style>

2.网上的第二种使用方法

经测试也是可以的

<template>
  <quill-editor
    v-model="content"
    ref="editorRef"
    :options="editorOption"
    @focus="onEditorFocus($event)"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
    class="editor"
  />
template>
<script>
import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
// 定制toolbar
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ["blockquote", "code-block"], // 引用  代码块-----['blockquote', 'code-block']
  [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ header: 1 }, { header: 2 }],
  [{ script: "sub" }, { script: "super" }], // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: [] }], // 配置字号
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  [{ font: [] }], //显示字体选择
  [{ align: [] }], // 对齐方式-----[{ align: [] }]
  ["clean"], // 清除文本格式-----['clean']
  ["link"], // 链接、图片、视频-----['link', 'image', 'video']
];
export default {
  name: "TestQuillEditor",
  components: { quillEditor },
  data() {
    return {
      content: "",
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: toolbarOptions,
        },
      },
    };
  },
  computed: {
    //当前富文本实例
    editor() {
      return this.$refs.editorRef.quillEditor;
    },
  },
  methods: {
    // 准备富文本编辑器
    onEditorReady() {},
    // 富文本编辑器 失去焦点事件
    onEditorBlur() {},
    // 富文本编辑器 获得焦点事件
    onEditorFocus() {},
    // 富文本编辑器 内容改变事件
    onEditorChange({ html }) {
      //内容改变事件
      // console.log('内容改变事件');
    },
  },
};
script>
<style>
style>

参考链接