フロントエンドカンファレンス関西2025
レギュラートーク（30分）
HTML/CSS UI/UX JavaScript（TypeScript）

リッチテキストエディターだけではない contenteditable

ktsn Katashin ktsn
1

HTML属性のcontenteditableは要素内のテキストを編集可能にします。主にリッチテキストエディターの実装で使われますが、テキストが編集可能になるという点以外は通常の要素と変わらないため、文字装飾だけではないさまざまなUI表現の可能性があります。

その例として、画像を自由な場所にドラッグアンドドロップで配置できるスクラップ帳エディターを実装しました。その実装をもとに、エディターの挙動に影響させずにVueを使う方法などの役立つ話や、ブラウザーごとの挙動の違いや日本語入力時のつらみなどの泥臭い話をします。

contenteditableを使ってちょっとおもしろいUIを作ってみたい方にはもちろん、アプリ開発の泥臭い話が好きな方にも楽しんでいただけるセッションになると思います。