ちょくちょく調べそうなのでメモにしていく。迷子。
quill editor
zenoamaro/react-quill: A Quill component for React.
https://github.com/zenoamaro/react-quill#upgrading-to-react-quill-v100
reactでの利用
拡張
How to Customize Quill - Quill
https://quilljs.com/guides/how-to-customize-quill/
拡張はParchmentというパッケージをつかって行われる。
ある程度、概念が定められているので、
トリッキーなことをするのはちょっと大変そうな気がした。
Froala editor
Documentation | Froala WYSIWYG Editor | Froala
https://www.froala.com/wysiwyg-editor/docs
いろんなライブラリでサポートされている。
有料で相応の価格。。
ListnPlay/riot-froala: RiotJS integration for Froala WYSIWYG html editor
https://github.com/ListnPlay/riot-froala
非公式っぽいけどriot対応もあった。
medium editor
Wrappers and Integration · yabwe/medium-editor Wiki
https://github.com/yabwe/medium-editor/wiki/Wrappers-and-Integration
es5かな。
いろいろ対応がある
reactコンポーネントもあった
trumbowyg
Trumbowyg - A lightweight WYSIWYG editor by Alex-D / Alexandre Demode
https://alex-d.github.io/Trumbowyg/
jqueryベースかな。
reactの対応もある。
ory editor
Ory.am Editor
https://editor.ory.am/
ory/editor: Next-gen, highly customizable content editor for the browser - based on React and Redux. WYSIWYG on steroids.
https://github.com/ory/editor
react/reduxを前提にした多機能なコンテンツエディタ。
いちばん価値がたかそうに思える。
まだベータ版で変化が激しそう。
多機能で学習コストがたかそう。
ドキュメントも結構あるけどベータ版だからな。。
wysiwygではあるが、実態をhtmlでもっていないので、html操作では制御が足りないかも。
詳しいドキュメントはソースの中においてあるやつかな。。
editor/core.md at master · ory/editor
https://github.com/ory/editor/blob/master/docs/api/core.md
draft wysiwyg
jpuri/react-draft-wysiwyg: A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
https://github.com/jpuri/react-draft-wysiwyg
reactJSのエディタ。
シンプルなので最初はこれがいいかもしれない。。
仮想DOMを扱わないといけないあたりが若干きになる。。
wysiwygではあるが、実態をhtmlでもっていないので、html操作では制御が足りないかも。
React製リッチテキストエディターDraft.jsを使ってみる - Qiita
http://qiita.com/tk1024/items/8d8de5a62ef55bc1532f
Draft.js とはReact製のリッチテキストを作るフレームワークです。Facebookが出しているOSSです。
jpuri/react-draft-wysiwyg: A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
https://github.com/jpuri/react-draft-wysiwyg
draft.jsをそのまま使っただけなのか？
React Draft Wysiwyg
https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp
RawDraftContentState形式は、DBにデータを保存するのに非常に適しています。このJSONはHTMLまたはMarkdownのエディタ状態に簡単に変換できます。
...
Library draftjs-to-markdownは、RawDraftContentStateをマークダウン形式に変換するために使用できます。
sstur/react-rte: Pure React rich text "WYSISYG" editor based on draft-js.
https://github.com/sstur/react-rte
demoではマークダウンとの相互変換の例がある。これはdraft.jsそのものの機能なのね。たぶん。
これは参考になるかもなあ。
ひとまずdraft.jsをつかって見つつ考える
基本
https://github.com/facebook/draft-js
https://github.com/facebook/draft-js/blob/master/examples/draft-0-10-0/convertFromHTML/convert.html
キーコマンドやイベント
htmlとの相互変換
http://qiita.com/tk1024/items/8d8de5a62ef55bc1532f
https://github.com/HubSpot/draft-extend#createplugin
https://www.npmjs.com/package/draft-js-export-html
プラグインやら、html相互変換の方法をどれにするかなど検討中
summernote
summernote/react-summernote: Summernote (Super simple WYSIWYG editor) adaptation for react
https://github.com/summernote/react-summernote
jQuery依存だけどよさげ。
参考
技術 - WYSIWYGのオープンソースは51件！ MOONGIFT MOONGIFT
http://www.moongift.jp/tags/wysiwyg