memo
wysiwyg

wysiwygエディタについての学習1

More than 1 year has passed since last update.

ちょくちょく調べそうなのでメモにしていく。迷子。

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

キーコマンドやイベント

https://draftjs.org/docs/quickstart-rich-styling.html#content

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