contenteditable=""

更新日
仕様 HTML Living Standard
分類 グローバル属性

contenteditable属性は、要素内容が編集可能かどうかを指定します。


<p contenteditable="true">編集可能かどうかを指定します</p>
属性 値
グローバル属性
contenteditable="" 編集可能かどうか true 編集を可能にする
plaintext-only プレーンテキスト形式で編集を可能にする
false 編集できなくする
空文字列 編集を可能にする
  • この属性を省略した場合は、祖先要素の指定内容が継承されます。（祖先要素にも指定がない場合は、ブラウザ側のデフォルトの状態が使用されます）

contenteditable属性を指定すると、通常は編集できない要素であっても、その内容を書き換えることが可能になります。（対応しているブラウザのみ）

例えば、p要素内のテキストを編集可能にすることができます。

plaintext-onlyについて

値に plaintext-only を指定した場合は、プレーンテキストの形式で編集を可能にすることができます。

例えば、太字のスタイルを持つリッチテキストを要素内に貼り付けた場合、true では太字のスタイルが適用された状態で貼り付けられますが、plaintext-only では太字のスタイルが無効となりプレーンテキストとして貼り付けられます。

<p contenteditable="true">リッチテキスト</p>

<p contenteditable="plaintext-only">プレーンテキスト</p>

指定できる要素

contenteditable属性はグローバル属性のため、全てのHTML要素に指定することができます。

  • ただし、属性と要素の組み合わせによっては効果がない場合もあります。
旧HTMLからの変更点
  • HTML5：contenteditable属性が定義されました。
  • HTML LS：値に plaintext-only が追加されました。［2023/04/20］

使用例

  • 以下は、編集した人の環境でのみ、編集内容が反映されることになります。（ソースが書き換わる訳ではありません）
div要素内のテキストを編集可能にした例

<div contenteditable="true">
対応しているブラウザでは、このテキストを編集することができます。改行も入れることができ、印刷プレビューにも反映されます。
</div>
表示例
対応しているブラウザでは、このテキストを編集することができます。改行も入れることができ、印刷プレビューにも反映されます。
div要素内に画像も配置した例

<div contenteditable="true">
<p>テキストの編集だけでなく、画像の位置を動かしたりすることもできます。</p>
<p><img src="logo.png" alt="TAG index" width="89" height="47"></p>
<p>他に、画像をコピーして貼り付けたり削除したりもできます。</p>
</div>
表示例

テキストの編集だけでなく、画像の位置を動かしたりすることもできます。

TAG index

他に、画像をコピーして貼り付けたり削除したりもできます。

plaintext-onlyを指定した例

<p><b>このテキストをコピーして以下の要素に貼り付けてください</b></p>

<p contenteditable="true">貼り付けた時に太字が反映されます</p>

<p contenteditable="plaintext-only">貼り付けた時に太字が無効になります</p>
表示例

このテキストをコピーして以下の要素に貼り付けてください

貼り付けた時に太字が反映されます

貼り付けた時に太字が無効になります