TOAST UI Editorのツールバーに独自のボタンアイコンを追加する

TOAST UI Editorには元々ツールバーがついていますが、そちらはカスタマイズが可能です。

（追記：バージョン２用の記事も書きました TOAST UI Editor2のツールバーに独自のボタンアイコンを追加する）

具体的にはリポジトリのサンプルプログラムに方法が書かれています。

example16-toolbar-add-button-fontawesome.html

１つ目の方法として、エディタを初期化する際に下記のようなパラメータを指定する事ができます。

        toolbarItems: [
          'heading',
          'bold',
          'italic',
          'strike',
          'divider',
          'hr',
          'quote',
          'divider',
          'ul',
          'ol',
          'task',
          'indent',
          'outdent',
          'divider',
          'table',
          'image',
          'link',
          'divider',
          'code',
          'codeblock',
          'divider',
          {
            type: 'button',
            options: {
              $el: $('<div class="our-button-class"><i class="fas fa-briefcase-medical"></i></div>'),
              name: 'test2',
              className: '',
              command: 'Bold',
              tooltip: 'Bold'
            }
          }
        ]

ただこの方法だと全て指定しなければなりません。一つだけ追加したい場合などもサンプルに書かれています。僕が実際に対応した際は下記のようにしました。Material Iconsを使った場合の例です。Dividerの例も追加してあります。

      const toolbar = editor.getUI().getToolbar()
      editor.eventManager.addEventType('Event1');
      editor.eventManager.listen('Event1', () => {
        alert('button click!');
      });
      toolbar.addDivider()
      toolbar.addButton({
        name: 'customize',
        event: 'Event1',
        tooltip: 'Apple!!!',
        $el: $(
          '<button class="tui-toolbar-icons custom"><i class="material-icons">help_outline</i></button>'
        )
      });

一応classNameやtextのパラメータも指定できるのですが、結構調整が大変です。余裕があれば試してみてください。

今回の場合正しく表示させるためにはCSSも定義してあげる必要があります。（不具合か何かはわかりませんが、こうしないとおかしな表示になってしまいます）

.custom.tui-toolbar-icons {
  background-image: none;
  padding: 0;

  i.material-icons {
    color: #000;
    font-size: 21px;
  }
}

ちょっとこのあたりまだライブラリ自体に手探り感が残っていますね。