Skip to content
This repository has been archived by the owner on Apr 6, 2020. It is now read-only.

Question: Add toolbar button? #15

Open
dantrevino opened this issue Mar 13, 2019 · 3 comments
Open

Question: Add toolbar button? #15

dantrevino opened this issue Mar 13, 2019 · 3 comments
Labels
bug Something isn't working

Comments

@dantrevino
Copy link

Version

1.0.4

Test Environment

Chrome 72, Linux

Current Behavior

When implementing via a SFC, how can I add a toolbar button, as described here:
nhn/tui.editor#317 (comment)

Expected Behavior

Looking to customize toolbar

@dantrevino dantrevino changed the title Question Question: Add toolbar button? Mar 13, 2019
@sohee-lee7
Copy link
Contributor

First get ui instance of tui.editor using $refs and then get toolbar instance.
Using addButton method of toolbar, you can add customized button.

const ui = this.$refs.editorRef.invoke('getUI');
const toolbar = ui.getToolbar();
toolbar.addButton({
  name: 'fullscreen',
  tooltip: 'fullscreen',
  $el: $('<button type="button"><!-- iCon--></button>')
}, 1);

@dantrevino
Copy link
Author

Thank you this is helpful. How can I add to the end of the toolbar? I see that addButton takes an index, but if I addButton to position toolbar.getItems().length I do not see a button. Even addButton({...}, toolbar.getItems().length - 3) does not show up, but when I use length-4, the icon suddenly shows up between the </> and CB buttons.

Screenshot from 2019-03-26 00-45-25
"Fullscreen" button at position 16 ^^^

Screenshot from 2019-03-26 00-46-02
"Fullscreen" button at position 17 ^^^ (no button)

default toolbar size: toolbar.getItems().length = 20

@sohee-lee7
Copy link
Contributor

@dantrevino Sorry for late reply. This is a bug of tui.editor so I make issue at the issue of tui.editor.
nhn/tui.editor#458
Please wait a little while for handle tui.editor issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants