Help us understand the problem. What is going on with this article?

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

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

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

2020/08/07 追記

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

Draft.js

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

一から作る場合

Draft.js

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

image.png

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

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

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エディターです。
image.png

Draft.js Editor

MediumとFacebookにインスパイアされたエディターです。
基本的な機能のみ入ってます。
image.png

React-RTE

Textareaを代替するリッチなエディターです。
シンプルでそんなに長い文章を書かないところにぴったりな気がします。
image.png

Facebook Notes Clone(ish)

Facebookノートに似たリッチなテキストエディターです。
UIがとてもシンプル&綺麗です
image.png

Megadraft

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

Medium Draft

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

React-Draft-Wysiwyg

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

Dante 2

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

Z-Editor

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

Draftail

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

Braft

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

カスタマイズ & 拡張

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

Editor.js

image.png

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

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

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

最後に

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

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

so99ynoodles
ダイエットのために、ラーメンは一日一食だけにしてます。 フロントエンドメインのUI / UX好きエンジニア。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした