Tui.editor: (Doc) better doc for customize Toolbar function (Bold, etc)

[1c7]

1. For example, I don't want to use default toolbar at all.

Let's take Taskade for example. assuming I want copy their UI

2. The default way of add toolbar item. the UI is not gonna work

like the following

var editor = new tui.Editor({
        el: document.querySelector('#editSection'),
        previewStyle: 'vertical',
        height: '400px',
        initialEditType: 'markdown',
        useCommandShortcut: true,
        initialValue: content,
        exts: ['scrollSync', 'uml', 'chart', 'mark', 'table', 'taskCounter'],
        toolbarItems: [
          'heading',
          'bold',
          'divider',
          'indent',
          'outdent',
          {
            type: 'button',
            options: {
              name: 'test',
              className: 'custom-button-1',
              event: 'lol',
              tooltip: 'custom button 1'
            }
          },
          {
            type: 'button',
            options: {
              $el: $('<div style="float:left;width:100px;font-size: 10px;text-align:center;line-height: 30px">custom element</div>'),
              name: 'test2',
              className: 'custom-button-2',
              command: 'CustomCommand',
              tooltip: 'custom button 2'
            }
          }
        ]
      });

Code from: https://github.com/nhnent/tui.editor/pull/124

3. I figure out (by reading doc) I could code like following

to make Customize toolbar work (click a button that I build. to make bold text)

//... some not relate code here
    this.editor = new Editor({
      el: document.querySelector("#content"),
      initialEditType: "wysiwyg", 
      hideModeSwitch: true,  
      language: 'zh',
      toolbarItems: [
        'heading',
        'bold',
        'italic',
        'strike',
        'divider',
        'hr',
        'quote',
        'divider',
        'ul',
        'ol',
        // 'task',
        // 'indent',
        // 'outdent',
        // 'divider',
        // 'table',
        'image',
        'link',
        // 'divider',
        // 'code',
        // 'codeblock'
      ],
      // We just remove some menu item here.
    });
//... some not relate code here

And then write our own HTML and JS

take Vue for example

   <button @click='my_bold'>My Bold Button<button>

my_bold(){
    this.editor.exec('Bold')
}

exec is from Doc: http://nhnent.github.io/tui.editor/api/latest/CommandManager.html

this work.

MORE example is better.

So what you guys think? would you guys add more example?

Thanks.

[kyuwoo-choi]

Yes. I should write a document for this. (maybe you can help on this 😉 )
Thanks for a good example @1c7

I'll mark it as a help wanted.
Feel free to send a PR for it. any of you.

[1c7]

@kyuwoo-choi no problem, Thanks for reply! also thank you for building this text editor.
I am not sure If I have time to PR, but I may.
Thanks again~

[1c7]

you guys can close this issue anytime

[1c7]

PR here: https://github.com/nhnent/tui.editor/pull/244

[kyuwoo-choi]

Good Job @1c7
Thanks for the contribution 🎉

[1c7]

@kyuwoo-choi you are welcome~
glad you like it haha