Open6
NotionみたいなWYSIWYGエディタを自作したい!
目的
- 自分が求めている機能がたっぷり詰まったエディタ
- HTMLやJSの学習
- WYSIWYGエディタの仕組みやパースなどについて
- notionも便利だが、ローカルバージョンがない、自分の欲しい機能がない
- 独自テンプレート・記法
- 独自スタイル
- その他自分が欲しい機能
- 今携わっているプロジェクトで必要になるかもしれない
なぜ自作するか
- 仕組みを理解したい
- 便利そうなライブラリなどがたくさんあるが、自分が求めている機能を追加しようと思うと、改造するより自作した方が早そう
- 自分の欲しい機能を簡単に追加できる
- ポートフォリオにしたい
求める機能
- notionやwordpressのようなblock styledなエディタ
- ブロックをつまんで動かせるように
- コマンドでh1などを呼び出せる
- 直感的なGUI
- 移動アニメーション
- ネスト構造のサポート
- 独自機能(略)
contentEditableについて調べてみた
プログラムは理解できてないけど、基本的な部分は参考になりそう。 基本機能について。というか、これ関連の情報がZennではこれぐらいしかなかった。
enterキーで改行すると変なdivが入るっぽいので、その対処法とか。こういうのみてると、やはりReactで作った方が良さげな感じがしてくる(Reactで作品作れるほどの実力を持ってない)
notionから学ぶ
Enterを押して追加した部分だけdiv要素が追加されている。最初から用意されているわけではない。
参考になりそうなサイト