More than 3 years have passed since last update.

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

Last updated at 2020-08-07Posted at 2019-08-15

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

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

2020/08/07 追記

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

Draft.js

Isaac Salier-Hellendag's React.js Conf 2016 talk, "Rich Text Editing with React" is live! Watch it here: https://t.co/yBUkyqCPnx @hellendag
— React (@reactjs) February 24, 2016

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

一から作る場合

Draft.js

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

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

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

draft-js-plugins-editor

I liked a @YouTube video https://t.co/wv55gTGJwX Rich text editing with Draft.js — Nikolaus Graf
— Yuri Drabik (@yurist38) March 25, 2017

これを解決するために、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)}
/>
...