Tui.editor: Customize toolbar

[patriba]

It would be helpful if we could create a new toolbar item (customize toolbar) with a dropdown menu (eg.: Headings).

Another feature would be to allow to change the behaviour of an existing toolbar (eg.: Image). Today when adding an image from a file, it is converted to base64 and added in the markdown text, it would be useful if we could change the behaviour to use a custom action (event or command) before the image is added to the markdown text.

[seonim-ryu]

@patriba I have a few things to check, so the answer is late.

First, customizing the toolbar is not possible with the example? In the example, the first and last buttons are customized. And I think you can use the editor's events to create the functionality you want.

// ...

editor.eventManager.addEventType('customEvent');
editor.eventManager.listen('customEvent', () => {
  const toolbar = editor.getUI().getToolbar();

  toolbar.$el
    .find('.custom-button')
    .append(
      `<div style="position:absolute;top:0;left:0;background-color:red;">foo</div>`
    );
});

And for the second question, I think you can use the hook of the editor creation option.

hooks.addImageBlobHook

Can you check if this is possible?

[patriba]

@seonim-ryu thanks for answering

The first question is if it is possible a custom toolbar item be a dropdown as Headings toolbar item menu. This means that when you click in the toolbar item it opens a dropdown with different actions.

Figure: Toolbar item that opens a dropdown with different actions

I was able to include individual custom items in the tollbar but not an item with a dropdown.

The second question, I was able to use the hook to change the default function. (Resolved)

Thanks,
Patricia Barros - www.ssw.com.au