Reactベースで動作するWYSIWYGエディタ
始めに
Next(React)、TypeScript、Material UI環境で扱えるWYSIWYGエディタを調査し、実際に使用し、どのエディタが一番適しているかを調査しましたので、その結果をご紹介します。
WYSIWYGエディタとは
「WYSIWYGエディタって何？」と思われる方向けにWYSIWYGエディタって何かを簡単にご説明させていただきます。
What You See Is What You Get（見たままが得られる）の頭文字をとったものでWYSIWYGと呼ばれます。
最近では、コンテンツマネジメントシステム(CMS)などでよく使われているエディタです。
実際のコンテンツそのものを編集しながら確認することができ、そのままをウェブページなどで表示する事が出来ます。
（実際は環境（ブラウザ等）に依存するので必ずしも全く同じ結果が得られるわけではないみたいですが。。。）
使用する側からすると、markdown形式やHTMLと違い、事前知識が無くても、簡単に使用することが出来ます。
Reactベースで動作するWYSIWYGエディタ
ここからは本題に入りまして、Reactベースで動作するWYSIWYGエディタについて記載をしていこうかと思います。
今回調べてみたWYSIWYGエディタ
- CKEdtior5 React
- React ProseMirror
- rich-markdown-editor
- Draft.js
- Slate.js
- Editor.js
結論から言ってしまうと、今回はdraft.jsを使用することにしました。
下記にそれぞれのエディタの特徴等をまとめておりますので、良ければご参考にしてください。
CKEditor React
こちらは単体でHTMLもMarkdownもサポートしており、簡単にエディタを作成出来るフレームワークです。
学習コストも抑えられ、使いやすそうだと思ったのですが、無料では5人のユーザと2人の開発者までしか利用できないようです。
React ProseMIrror
WYSIWYGエディタとMarkdown、XML等との間にあるギャップを埋める挑戦をしているeditorで、prosemirror-markdownを使用することで、簡単にmarkdown化する事が出来るみたいです。
ただ、こちらを使用するうえでパッケージをインストールすると、next.js上でエラーが発生してしまうのでnext.js上で使用する分には難しそうでしたので、断念。
rich-markdown-editor
ProseMirrorをベースにして作られたエディタ。
デモを使用してみると分かるのですが、1つのエディタでMarkdownとWYSIWYG HTML エディタの両方が利用できたりとすごく便利なエディタです。
実際に使用する上で、styled-componentsのインストールが必要。
今回はMUIでemotionをスタイルエンジンとしているため、使用しないことにしました。
styled-componentsを元々のスタイルエンジンとしている場合はこれが非常に良いのかなと思います。
Draft.js
facebook社製のWYSIWYGエディタで、ざっと見た感じですが、一番使用されているWYSIWYGエディタ。
ライブラリの為、ほとんどの機能を自分で作成しなくてはいけないので、結構の学習コストがかかりそうではありますが、かなり自由な作りが実現できそう。他のエディタと比べてかなり参考資料が充実しているようにも思いました。
また、draft.jsのconvertToRaw, convertFromRawを使えばmarkdown等の形式に簡単に変換できるみたいです。
markdownはmarkdown-draft-jsなどの別のpackageインストールすれば簡単に使用できそうです。
Next(React)、TypeScript、Material UIの環境でも問題なく動作しました。
Slate.js
2番目くらいにインストール数が多く感じたエディタ。
Draft.js、Prosemirror、Quill等からひらめいたライブラリのようです。
ドキュメントが結構しっかりと書かれているため、かなり分かりやすく、簡単に使用できそうだなと思いました。
Next(React)、TypeScript、Material UIの環境でも問題なく動作しました。
ただ、まだbeta版との事で、今後突然大きな変更が加えられる恐れもある為、今回は使用を見送りました。
Editor.js
最後ですが、これは個人的には一番面白いなと感じたエディタで、従来のsingle contenteditableではなく、block-styled（independent contenteditable）で提供のされているエディタ。
single contenteditableのエディタではバグが多いため、block-styled形式を取っているんだそうです。
toolをインストールすることで、実装も簡単に行えるエディタです。
また、作成したデータはhtml形式でなく、json形式で取得できる為、簡単にwebサイトや、ネイティブモバイル、デスクトップアプリケーション、facebookや、チャットボットなどに使用することが出来ます。
tool系がtypescriptに対応しておらず、今回の使用は見送りました。
まとめ
今回はDraft.jsを使用することとしましたが、かなり魅力的なWYSIWYGエディタが存在していることが分かりました。
違う機会があればまた別のWYSIWYGエディタを使用するのも面白そうだなと思います。
皆さんがご自身の環境で使用できるWYSIWYGエディタを探す為の手助けになれば幸いです。
今後はインストール手順を始め、Draft.jsについての記事も書いていけたらと思いますので、興味のある方は良ければまた覗いてみて頂けたらと思います。
今回参考にしたサイト
Discussion