自定义 vue2-editor 工具栏

Question

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

这是依赖页面的示例

<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