contenteditable

概要

contenteditable 属性は、要素のコンテンツをユーザーが編集可能にします。リッチテキストエディタの実装に使用されます。

対応ブラウザ

基本構文

<div contenteditable="true">
  この部分は編集可能です。クリックして編集してみてください。
</div>

<!-- plaintext-only で書式なしテキストのみ -->
<div contenteditable="plaintext-only">
  プレーンテキストのみ編集可能
</div>

実務での使いどころ

• contenteditable の活用

  要素のコンテンツを編集可能にするグローバル属性。リッチテキストエディタに使用。

注意点

アクセシビリティ

• スクリーンリーダーでの読み上げを確認すること。

参考リンク

• MDN Web Docs — contenteditable
• Can I use — contenteditable