Reactでイケてるテキストエディターを使いたい

# Reactでイケてるテキストエディターを使いたい
自分 & 会社のプロジェクトでリッチな機能を持つテキストエディターを使いたい。
色々調べてたらDraft.jsが出てきたので、見てみました。

# 2020/08/07 追記

本記事に `draft-js-plugins-editor` を言及しておりますが、現在 `draft-js-plugins-editor` はメンテナンスされてません。Reactのバージョンによっては色んなエラーを出してくるので、使わない方が良いと思います。`draft-js` 自体はメンテナンスされ続けているので大丈夫です。


# [Draft.js](https://draftjs.org/)

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Isaac Salier-Hellendag&#39;s React.js Conf 2016 talk, &quot;Rich Text Editing with React&quot; is live! Watch it here: <a href="https://t.co/yBUkyqCPnx">https://t.co/yBUkyqCPnx</a> <a href="https://twitter.com/hellendag?ref_src=twsrc%5Etfw">@hellendag</a></p>&mdash; React (@reactjs) <a href="https://twitter.com/reactjs/status/702592569864159232?ref_src=twsrc%5Etfw">February 24, 2016</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Draft.jsはFacebook製のリッチなテキストエディターフレームワークです。
Facebook、Twitter、slack、noteなど、リッチなテキストエディターは
より書くことを楽しくしてくれるので、自分のアプリなどに入れたくなりますよね。

## 一から作る場合

### Draft.js
Draft.jsで一から実装するとなると、実装量がとても多くなります。
(シンプルなWYSIWYGではない場合）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/e6c9c4cd-189c-3578-f7b8-64669f5b13b6.png)

このようなプロパティーを一つ一つ実装していかなければなりません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/b68d41c8-9680-7c55-21ae-b067145f26d3.png)
ハッシュタグを作るためだけの正規表現もエグい量です。

### draft-js-plugins-editor

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">I liked a <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a> video <a href="https://t.co/wv55gTGJwX">https://t.co/wv55gTGJwX</a> Rich text editing with Draft.js — Nikolaus Graf</p>&mdash; Yuri Drabik (@yurist38) <a href="https://twitter.com/yurist38/status/845612453794844672?ref_src=twsrc%5Etfw">March 25, 2017</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これを解決するために、[`draft-js-plugins-editor`](https://github.com/draft-js-plugins/draft-js-plugins)というライブラリーがあります。
実装済みのプラグインをEditorに差し込むだけで、その機能が使えるようになります。
github上でシェアされているプラグインを組み合わせて使うことも可能です。

```MyEditor.jsx
import Editor from 'draft-js-plugins-editor'

import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import createMarkdownPlugin from 'draft-js-markdown-shortcuts-plugin'
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';
import createLinkPlugin from 'draft-js-anchor-plugin';
import createLinkifyPlugin from 'draft-js-linkify-plugin'

const markdownPlugin = createMarkdownPlugin();
const linkPlugin = createLinkPlugin({ theme: linkStyles, placeholder: 'http://…' });
const linkifyPlugin = createLinkifyPlugin();
const inlineToolbarPlugin = createInlineToolbarPlugin({theme: { buttonStyles, toolbarStyles: inlineToolbarStyles }});
const staticToolbarPlugin = createToolbarPlugin({ theme: { buttonStyles, toolbarStyles }});
...

<Editor
  onTab={this.onTab}
  handleKeyCommand={this.handleKeyCommand}
  editorState={this.state.editorState}
  onChange={this.onChange}
  plugins={[
    linkPlugin, 
    markdownPlugin, 
    inlineToolbarPlugin, 
    staticToolbarPlugin, 
    linkifyPlugin
  ]}
  ref={(element) => { this.editor = element; }}
  placeholder={this.renderPlaceholder('Write Something Funny',this.state.editorState)}
/>
...
```

これにも欠点があって、色んなプラグインを混ぜて使ったら、衝突して動かないこともあるし、
カスタマイズができなかったり、説明が足りなかったりするプラグインもあるので、
自分で色々試す必要があります。

[pluginを自分で作る](https://github.com/draft-js-plugins/draft-js-plugins/blob/master/HOW_TO_CREATE_A_PLUGIN.md)


# ライブラリーを使おう
直接作るってなると一つの機能を作るだけでも、割と時間がかかってしまうので、
すでに存在するライブラリーの中で気に入ったものを選ぶだけでも、
リッチなエディターを実装できるし導入もしやすいです。

## 現在存在するDraft.jsを使ったライブラリー

### [Draft WYSIWYG](https://github.com/bkniffler/draft-wysiwyg) 
ドラッグ&ドロップとリサイジング、tooltipを含んだWYSIWYGエディターです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/aa4a439b-f00d-a2f7-a0b1-16c0ddc49644.png)


### [Draft.js Editor](https://github.com/AlastairTaft/draft-js-editor/) 
MediumとFacebookにインスパイアされたエディターです。
基本的な機能のみ入ってます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/7180d997-8454-270e-0688-f61c27ce8268.png)


### [React-RTE](https://github.com/sstur/react-rte/) 
Textareaを代替するリッチなエディターです。
シンプルでそんなに長い文章を書かないところにぴったりな気がします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/65411fde-8999-45eb-c844-fd8f98230955.png)


### [Facebook Notes Clone(ish)](https://github.com/andrewcoelho/react-text-editor) 
Facebookノートに似たリッチなテキストエディターです。
UIがとてもシンプル&綺麗です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/c47189be-20ae-302a-4c23-933c09662941.png)


### [Megadraft](https://github.com/globocom/megadraft) 
良いベースプラグインと拡張性を持つリッチなテキストエディターです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/15211802-189f-c62c-7f9f-89e4e6626395.png)


### [Medium Draft](https://github.com/brijeshb42/medium-draft) 
Mediumに似た機能を持つテキストエディターです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/59e2b934-6e0a-6da9-9eb1-b09c284783e5.png)


### [React-Draft-Wysiwyg](https://github.com/jpuri/react-draft-wysiwyg) 
シンプルなwysiwigエディターです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/6475ee37-6863-9b7c-7e9b-1c8b58983252.png)

### [Dante 2](https://github.com/michelson/dante2)
これもMediumのクローンですが、完成度がとても高いように思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/a699ee06-a705-ddb3-7abc-0b0b718f12e9.png)


### [Z-Editor](https://github.com/Z-Editor/Z-Editor) 
Z-notation文書を作るためのエディターです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/af58274a-122b-bba4-9ad0-b1b0fc7a4c12.png)


### [Draftail](https://github.com/springload/draftail/) 
設定可能なリッチなテキストエディターです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/a1345951-f881-f211-230b-86f6dbc5debb.png)



### [Braft](https://github.com/margox/braft-editor) 
中国の方が作ったっぽいライブラリーです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/732ef176-8882-a62f-d49e-f101f6931f1a.png)


## カスタマイズ & 拡張
カスタマイズと拡張方法はライブラリーによって違うので、Docsを参考にするしかありません。
個人的には上のライブラリーの中で`Megadraft`がとても気に入りました。
デザインもいいですし、カスタマイズ方法も詳しく書いてあるので、自分の使いたいように改造することができます。

# [Editor.js](https://editorjs.io/)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/375274/997408b6-82eb-6268-04d3-ac3a132548ac.png)

Reactに限ったライブラリーではありませんが、
`Editor.js`はとてもクリーンで使いやすいエディターです。
デフォルトでも様々なプラグインをサポートしていて、カスタマイズ性もあります。

React専用ではないため色んなフレームワークで使えますし、
Facebookに縛られない点も良いところではないでしょうか。

デザインも綺麗ですし、使い心地もいいので、
今後使ってみたいライブラリーです。


# 最後に
調べるだけでも、
`draft-js-plugins-editor`で欲しいプラグイン一つ一つ差し込むのも、
結構時間がかかる作業でした。（お盆休みがこれで消えた）

皆さんの時間を守るためにも、（勉強時間は少し必要だと思いますが）
上記ライブラリーの中で気に入ったのを使って実装をすすめることをオススメします。