How does quill-editor add a custom button to the header in Vue?

after eating quill-editor, in Vue, the toolbar, of the header is defined in data as follows:

    toolbar: {
          container: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [{"header": 1}, {"header": 2}],
            [{"list": "ordered"}, {"list": "bullet"}],
            [{"indent": "-1"}, {"indent": "+1"}],
            [{"size": ["small", false, "large", "huge"]}],
            [{"header": [1, 2, 3, 4, 5, 6, false]}],
            [{"color": []}, {"background": []}],
            [{"align": []}],
            ["clean"],
            ["link", "image", "video"]
          ],
          handlers: {
            "image": function () {
              document.getElementById("QEFileTxt").click()
            }
          }
        },
        

how do I add a custom button and bind an event at the end?

Mar.16,2021

are you using vue-quill-editor? the official website has code examples of custom button .

Menu