Customize vue2-editor toolbar

Question

This is the dependency I'm using for the editor and they have an example where they modify the default toolbar to remove certain options, I would like to remove some options but the example is very lacking and doesn't show how to add all the options I would like and I don't know how to add them.

This is the example from the dependency page

<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>

I would like in my toolbar something like this

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

However this is the result, the align: left is not showing up and the color: color-picker doesn't work. If I click on the color picker nothing happens and no menu shows up

I'm not sure how I could get this to work

This is the CodeSandBox my current setup that doesn't work

Answer 1

Using the following configuration should fix the issues:

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

Here is the code for the standard configuration of the toolbar:

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