noteと"contenteditable"｜ct8ker｜note

この記事は旧バージョンのエディタについてのものになります。 現在は進化した新バージョンがリリースされています。 初めてエンジニアらしい記事を書きます。 記念すべき？初回はHTML5のcontenteditableのお話です。 contenteditableコンテントエディタブル、と読みます。content editable。 こいつは何なのか、超ざっくり言ってしまうと、HTMLタグ内のテキストを編集可能にしてくれる属性、です。百聞は一見にしかずで例を出してみます。 <p contenteditable=true> コンテントエディタブル </p>これをブラウザで表示すると、pタグの中身が編集可能（キャレットを合わせて、キーボード入力可能）な状態になります。一般的にHTMLの世界でテキストを入力する手段といえば、inputやtextareaを思い浮かべるのではないかと思いますが、通常表示する

[l08084]

contenteditableである必要がわかってなかったのでこういう解説たすかる“先述のtextarea等ではなく、何故このcontenteditableを利用しているかというと、まさにこのWYSIWYGである事が大きな理由です

[shozzy]

contenteditableの諸々

[efcl]

Related: https://d-toybox.com/studio/weblog/show.php?id=2018102300

[lost_and_found]

辛い

[gfx]

"これら簡単な操作例だけでも、そのままではとても使えない、圧倒的不可能であるという事が分かっていただけたのではないかなと思います" / ひどいw

[cpw]

どう対応してるのかを書いて欲しい

[el-condor]

WYSIWIGエディタの闇。この辺はノウハウの塊なので、世の中のweb WYSIWIGライブラリで出来の良いものに商用ライセンスのものが多いのも頷ける話。

[currypurin]

noteのエディタってこのように実装されていたんだ。すごく大変ですね。今後ともよろしくお願いします。