contenteditableな要素でテキストだけを編集可能にする
Baseline 2025でcontenteditableにplaintext-onlyを渡せるようになりました。plaintext-onlyを指定すると、要素内での編集が可能になりつつリッチテキスト（太字やリンクなど）のスタイルが適用されないようになります。従来から存在するtrueを指定した時の挙動を振り返って違いを確認します。
はじめに
Firefox 136.0のリリースでcontenteditable属性の値にplaintext-onlyを渡せるようになったことで、2025年のBaselineにcontenteditable="plaintext-only"が追加されました。
contenteditable="plaintext-only"を付与された要素は、その要素のテキストのみを編集可能にすることができます。
HTML Standard
html.spec.whatwg.org
contenteditable
contenteditableはグローバル属性(全てのHTML要素で共通な属性)で、付与した要素の中身を直接編集できるようにします。
contenteditableはグローバル属性ではありますが、一部の要素では利用できません。利用の可否はJavaScriptでHTMLElement.isContentEditableから確認できます。
div要素にcontenteditable="true"を付与したサンプル
ここを編集できます
上記のサンプルで「ここを編集できます」と記述された部分を選択すると、内容が変更可能であることがわかると思います。 サンプルの上部に書かれた「div要素にcontenteditable="true"を付与したサンプル」をコピーして貼り付けると、対象のテキストに加えて背景色と太字もそのままの状態で反映されることが確認できます。
単純な文字の他にも、下の画像のようにBaselineの埋め込み要素をそのまま貼り付けることも可能です(この画像自体も反映できます)。
このようにcontenteditable="true"は付与した要素を自由に編集可能な要素に変更します。
plaintext-only
trueではなくplaintext-onlyを付与すると、その要素のテキストのみを編集可能にします。
div要素にcontenteditable="plaintext-only"を付与したサンプル
ここを編集できます
先ほどのサンプルに対して、値をplaintext-onlyに変更したものになります。
「div要素にcontenteditable="plaintext-only"を付与したサンプル」をコピーして貼り付けを行うと、テキストだけが追加されることが確認できます。背景やフォントの太さは反映されません。
これがplaintext-onlyの特徴です。trueを付与したときと異なり、テキストのみを編集可能にするので、実装上で考慮するケースが少なくなります。