Draft.js - テキストエディタ開発用のReactコンポーネント
Reactが向いているのはユーザの入力をリアルタイムに、かつ画面上の様々な場所に反映するようなインタラクティブなWebアプリケーションです。開発者は状態を気にせず画面を作れるのが利点でしょう。 さらにReactではコンポーネントの再利用がしやすいのも利点と言えます。今回はFacebookの開発したテキストエディタ開発用コンポーネントDraft.jsを紹介します。
Draft.jsの使い方
Draft.jsのデモです。文字を選択して色をつけられます。
背景色を変えることもできます。
改行すると、それに合わせてテキストエリアの大きさも変化します。
リンクを追加。
機能を追加すればWYSIWYGエディタとして使えます。
Twitter風に。@や#に対して色がつきます。
数式を埋め込む機能もあります。
編集はテキストエリアで行います。
Reactなので、変更はリアルタイムに反映されます。
Draft.jsはコンポーネントなので、そのまま使うよりも自分たちのWebアプリケーションに組み込んだり、さらに機能を追加して利用するのが基本となるでしょう。もちろんDraft.jsをベースにReactによるテキストエディタ開発も良さそうです。
Draft.jsはReact用、JavaScript製のオープンソース・ソフトウェア(BSD License)です。
facebook/draft-js: A React framework for building text editors.