「TOASTUIEditor」の記事 - Crieit

NextJSでマークダウンエディタを扱う際の注意点

2020-06-07T23:44:07+09:00

SSR(サーバサイドレンダリング)の影響

draft.jsやtui-editorに共通して言えることですが、
元々ブラウザでの動作を想定して作られているので、
NextJSなどのSSR環境下ではwindow、documentなどの変数の中身がundefinedになり、動作しなくなります。

Next.JSではSSRを無効にできる

With no SSR

インポート方法を変えることでSSRを無効にできるオプションがあります。
dynamic import自体はES2020で導入される構文だとか。

const DraftEditorNoSSR = dynamic(
  () => import('../components/DraftEditor') as any,
  { ssr: false }
)

Draft.jsを断念した理由

draft.jsでは再描画した際にカーソルが行の先頭に戻るというバグがあります。
公式リポジトリでは行の最後に移動する対処も議論されていますが、文章の中で編集したくなったらどうするんだ....という声もちらほら。

How to stop DraftJS cursor jumping to beginning of text?

さっさと見切りをつけてToastUI editorに移りました。
そうです、crieitにも採用されているエディタですね。

Toast UI Editorで実装できた!

ただし、Toast UI Editorはrefを使わないと値が取れず、
マウントされていない状態でrefがnullになってしまうことにかなり苦しめられました。

changeイベントがeditorで発火するのでフラグを更新するようにして、外側でrefを使ってデータを取り出すという実装になりました。
それから、画像アップロードをdisabledにしました。

editorコンポーネントを使いまわしたかったので、
表示用の初期値initialValueと値を更新して外部に渡すsetFuncをpropsとして与えています。

const DraftEditor = ({ initialValue, setFunc }) => {
  const editorRef = createRef();
  const [changed, setChanged] = useState(false);

  useEffect(() => {
    if (editorRef.current && changed) {
      setFunc(editorRef.current.getInstance().getMarkdown());
      console.log("set");
      setChanged(false);
    }
  }, [editorRef.current, changed]);

  return (
    {{
        width: "100vw",
      }}
    >
      
        {{
            change: (e) => {
              setChanged(true);
            },
          }}
        />
      
    
  );
};

export default DraftEditor;

export type DraftEditorProp = {
  initialValue: string;
  setFunc: Dispatch;
};

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

2020-03-25T08:31:01+09:00

このサービスでも使っている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 = `help_outline`

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

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

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

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

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

2018-12-13T23:38:58+09:00

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: $(''),
              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: $(
          ''
        )
      });

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

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

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

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

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