2018-12-13に投稿

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

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

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

example16-toolbar-add-button-fontawesome.html

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

        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;
  }
}

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


だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント