リッチテキストエディタ oneteam-rte を公開しました | blog.sugarshin.net

Main

リッチテキストエディタ用の React コンポーネントを公開しました。

GitHub: https://github.com/oneteam-dev/oneteam-rte

npm: https://www.npmjs.com/package/oneteam-rte

2016年6月現在のバージョンは 0.2.12 です。

oneteam-rte.gif

2016年2月に OSS として公開された Facebook 製のフレームワーク、 Draft.js のラッパーです。

Table of Contents

使用例

import React from 'react'
import { render } from 'react-dom'
import RichTextEditor, { Toolbar, Body } from 'oneteam-rte'
import 'oneteam-rte/lib/base.css'

render((
  <RichTextEditor
    initialHtml='<h1>Initial content</h1><div><br /></div><div>oneteam-rte</div>'>
    <Toolbar />
    <Body />
  </RichTextEditor>
), document.querySelector('#app-root'))

ツールバー

下記の Function が利用可能です。

Draft.js

Draft.js は Immutable.js に依存していて、 下記のようエディタの状態を管理する State object (EditorState) をこの Immutable.js のデータ構造を利用して管理しています。

業務で利用しているため、仕様の都合上、素のままでは実現できないものもあり、結局 Draft.js に直接手を入れて利用しています。

https://github.com/oneteam-dev/draft-js/tree/oneteam

draft-js-export-html

EditorState からシリアライズした HTML の出力にも OSS を利用しました。

https://github.com/sstur/draft-js-export-html

これも仕様の都合上、 fork して手を入れています。

https://github.com/oneteam-dev/draft-js-export-html/tree/oneteam


PR 大歓迎です。

また、 @ngs 氏もコントリビュートしてくださっています。

@ngs 氏が Swift 版も公開していますのでそちらも要チェックです。

https://github.com/oneteam-dev/SwiftyDraft