Open6

NotionみたいなWYSIWYGエディタを自作したい!

手羽先手羽先

目的

  • 自分が求めている機能がたっぷり詰まったエディタ
  • HTMLやJSの学習
    • WYSIWYGエディタの仕組みやパースなどについて
  • notionも便利だが、ローカルバージョンがない、自分の欲しい機能がない
    • 独自テンプレート・記法
    • 独自スタイル
    • その他自分が欲しい機能
  • 今携わっているプロジェクトで必要になるかもしれない

なぜ自作するか

  • 仕組みを理解したい
  • 便利そうなライブラリなどがたくさんあるが、自分が求めている機能を追加しようと思うと、改造するより自作した方が早そう
    • 自分の欲しい機能を簡単に追加できる
  • ポートフォリオにしたい

求める機能

  • notionやwordpressのようなblock styledなエディタ
    • ブロックをつまんで動かせるように
    • コマンドでh1などを呼び出せる
    • 直感的なGUI
    • 移動アニメーション
  • ネスト構造のサポート
  • 独自機能(略)
手羽先手羽先

contentEditableについて調べてみた

https://zenn.dev/takky94/articles/36656269da7c33
プログラムは理解できてないけど、基本的な部分は参考になりそう。
https://zenn.dev/cigar/articles/html-tips-contenteditable
基本機能について。というか、これ関連の情報がZennではこれぐらいしかなかった。

https://qiita.com/yoh1496/items/39c963ec76f97521417a
https://qiita.com/haga2miya/items/622ffd74397876483b84
enterキーで改行すると変なdivが入るっぽいので、その対処法とか。こういうのみてると、やはりReactで作った方が良さげな感じがしてくる(Reactで作品作れるほどの実力を持ってない)

手羽先手羽先

notionから学ぶ


Enterを押して追加した部分だけdiv要素が追加されている。最初から用意されているわけではない。