vue.js - 自定义 vue2-editor 工具栏

Question

这是 dependency我正在使用编辑器，他们有一个例子，他们修改默认工具栏以删除某些选项，我想删除一些选项，但这个例子非常缺乏并且没有显示如何添加我想要的所有选项而且我不知道如何添加它们。

这是依赖页面的例子

<template>
  <div id="app">
    <vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";

export default {
  components: {
    VueEditor
  },

  data() {
    return {
      content: "<h1>Html For Editor</h1>",
      customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }], ["image", "code-block"]]
    };
  }
};
</script>

我希望在我的工具栏中有这样的东西

customToolbar: [["bold", "italic", "underline"], [{ list: "ordered" }, { list: "bullet" }],
    [{ align: "left" }, { align: "center" }, { align: "right"}, { align: "justify"}],
    [{ color: "color-picker" }]],

然而这是结果，align: left 没有显示，color: color-picker 不起作用。如果我点击颜色选择器，没有任何反应，也没有菜单显示

我不确定如何让它工作

这是 CodeSandBox我当前的设置不起作用

Answer 1

使用以下配置应该可以解决问题:

customToolbar: [
    ["bold", "italic", "underline"],
    [{ list: "ordered" }, { list: "bullet" }],
    [
        { align: "" },
        { align: "center" },
        { align: "right" },
        { align: "justify" }
    ],
    [{ color: [] }]
]

这是工具栏标准配置的代码:

https://github.com/davidroyer/vue2-editor/blob/master/src/helpers/default-toolbar.js