Draft.js - テキストエディタ開発用のReactコンポーネント

引用元:
http://www.moongift.jp/2016/04/draft-js-%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E9%96%8B%E7%99%BA%E7%94%A8%E3%81%AEreact%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88/



2016/04/07 16 4
 ソフトウェア, オープンソース
 JavaScript, github, BSD License, テキストエディタ, Facebook, node.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.

MOONGIFTプレミアムに登録して運営をサポートしてください！月額500円の他、半年（3,000円）、年間パック（6,000円）もあります。企業向けに3アカウント以上で請求書払いも可能です（年間一括のみ）。従業員の方向けのサービスにいかがですか？　プレミアムユーザのログインはこちらから


 ソフトウェア, オープンソース
 JavaScript, github, BSD License, テキストエディタ, Facebook, node.js, React