Facebookさん謹製のreactのためのリッチテキストエディタフレームワークDraft.jsが出たというニュースがあったので、取り敢えず試しにElectronに入れてみました。

公式サイト見ながらやったら結構手こずったので入れ方メモっておきます。

Draft.js公式サイト

準備

一旦空っぽのelectronアプリを用意して、必要なライブラリをnpmで入れまくります。

$ npm i -S react react-dom
$ npm i -D babel babel-register babel-preset-react babel-preset-es2015

で、本題のdraftjsを入れます

$ npm i draft-js

早速入れてみる

babel使うのに必要な設定をpackage.jsonに書きます。

package.json

"babel": {
  "sourceMaps": "inline",
  "presets": [
    "react",
    "es2015"
  ]
}

index.htmlは必要最低限

index.html

<html>
  <head>
  </head>
  <body>
    <div id="container"></div>
    <script>
      window.onload = function() {
        require('babel-register')();
        require('./main.jsx');
      }
    </script>
  </body>
</html>

で、index.htmlに読ませてるmain.jsxに、Draft.jsを使う部分を記述します。

main.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

class MyEditor extends React.Component {
  constructor(props) {
    super(props);

    this.focus = () => this.refs.editor.focus();
    this.state = {editorState: EditorState.createEmpty()};
    this.onChange = (editorState) => this.setState({editorState});
  }

  render() {
    return  (
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        ref="editor"
      />
    );
  }
};

ReactDOM.render(
  <MyEditor />,
  document.getElementById('container')
);

取り敢えず最小構成で非常にシンプルなエディタができあがります。
この時点だとtextareaとなんら変わらないレベルですが、いろいろ機能持ってるみたいなんで、作り込めばリッチになるはず！！

公式丸写しすると、constructor部分について全く書いてなくて、editorStateが初期化されなくて死ぬのでお気をつけて！

Draft.jsを取り敢えずElectronに放り込んでみる（最小構成）メモ

Draft.js公式サイト

準備

早速入れてみる