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

このサービスでも使っているTOAST UI Editorはいつの間にかバージョン２が出ていたようです。npmのパッケージも別になったので入れ直しが必要です。プラグインなども別パッケージになったので、軽くなっていると思います（元々すごく容量が大きいので……アップグレード推奨だと思います）

また、微妙にカスタマイズ方法も変わっており、以前投稿した TOAST UI Editorのツールバーに独自のボタンアイコンを追加する ではエラーになるようです。うまく行った方法をメモしておきます。

ちなみに公式の説明は下記です。

19. Customizing Toolbar Buttons

ツールバーにボタンなどを追加する

以前書いたような、addDividerやaddButtonはなくなりました。基本的に addItem に type を指定して使うことになります。

    const toolbar = editor.getUI().getToolbar()
    editor.eventManager.addEventType('event1')
    editor.eventManager.listen('event1', () => {
      alert('button click!');
    })
    toolbar.addItem({ type: 'divider' })

    const button = document.createElement('button')
    button.className = 'tui-toolbar-icons custom'
    button.innerHTML = `<i class="material-icons">help_outline</i>`

    toolbar.addItem({
      type: 'button',
      options: {
        name: 'buttonname',
        event: 'event1',
        tooltip: 'ツールチップ',
        el: button
      }
    })

バージョン1との違いとして、jQueryは削除されたので指定する el はcreateElementで作成した生のものになります。また、elのドルマークも不要です。

ちなみに型定義が入っているのでTypeScriptで使いやすくはなっているのですが、こういうカスタマイズをすると型定義が足りずにビルドができなくなります。そのためanyにするなり独自の型定義を入れなければなりません。ここはまだ微妙ですがまだ2がリリースされたばかりなので今後改善されていくでしょう。

CSSをいじらないとボタンがうまく表示されなかったかもしれませんので、それは前述した以前の投稿を確認してみてください。