2020-03-25に更新

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

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

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

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

19. Customizing Toolbar Buttons

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

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

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

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

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

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

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

有料記事を販売できるようになりました!

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

コメント