Edited at

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


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

自分 & 会社のプロジェクトでリッチな機能を持つテキストエディターを使いたい。

色々調べてたらDraft.jsが出てきたので、見てみました。


Draft.js

Draft.jsはFacebook製のリッチなテキストエディターフレームワークです。

Facebook、Twitter、slack、noteなど、リッチなテキストエディターは

より書くことを楽しくしてくれるので、自分のアプリなどに入れたくなりますよね。


一から作る場合


Draft.js

Draft.jsで一から実装するとなると、実装量がとても多くなります。

(シンプルなWYSIWYGではない場合)

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



ハッシュタグを作るためだけの正規表現もエグい量です。


draft-js-plugins-editor

これを解決するために、draft-js-plugins-editorというライブラリーがあります。

実装済みのプラグインを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を自分で作る


ライブラリーを使おう

直接作るってなると一つの機能を作るだけでも、割と時間がかかってしまうので、

すでに存在するライブラリーの中で気に入ったものを選ぶだけでも、

リッチなエディターを実装できるし導入もしやすいです。


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


Draft WYSIWYG

ドラッグ&ドロップとリサイジング、tooltipを含んだWYSIWYGエディターです。


Draft.js Editor

MediumとFacebookにインスパイアされたエディターです。

基本的な機能のみ入ってます。


React-RTE

Textareaを代替するリッチなエディターです。

シンプルでそんなに長い文章を書かないところにぴったりな気がします。


Facebook Notes Clone(ish)

Facebookノートに似たリッチなテキストエディターです。

UIがとてもシンプル&綺麗です


Megadraft

良いベースプラグインと拡張性を持つリッチなテキストエディターです。


Medium Draft

Mediumに似た機能を持つテキストエディターです。


React-Draft-Wysiwyg

シンプルなwysiwigエディターです。


Dante 2

これもMediumのクローンですが、完成度がとても高いように思います。


Z-Editor

Z-notation文書を作るためのエディターです。


Draftail

設定可能なリッチなテキストエディターです。


Braft

中国の方が作ったっぽいライブラリーです。


カスタマイズ & 拡張

カスタマイズと拡張方法はライブラリーによって違うので、Docsを参考にするしかありません。

個人的には上のライブラリーの中でMegadraftがとても気に入りました。

デザインもいいですし、カスタマイズ方法も詳しく書いてあるので、自分の使いたいように改造することができます。


Editor.js

Reactに限ったライブラリーではありませんが、

Editor.jsはとてもクリーンで使いやすいエディターです。

デフォルトでも様々なプラグインをサポートしていて、カスタマイズ性もあります。

React専用ではないため色んなフレームワークで使えますし、

Facebookに縛られない点も良いところではないでしょうか。

デザインも綺麗ですし、使い心地もいいので、

今後使ってみたいライブラリーです。


最後に

調べるだけでも、

draft-js-plugins-editorで欲しいプラグイン一つ一つ差し込むのも、

結構時間がかかる作業でした。(お盆休みがこれで消えた)

皆さんの時間を守るためにも、(勉強時間は少し必要だと思いますが)

上記ライブラリーの中で気に入ったのを使って実装をすすめることをオススメします。