k8o

はじめに

Firefox 136.0のリリースでcontenteditable属性の値にplaintext-onlyを渡せるようになったことで、2025年のBaselineにcontenteditable="plaintext-only"が追加されました。 contenteditable="plaintext-only"を付与された要素は、その要素のテキストのみを編集可能にすることができます。

contenteditable

contenteditableはグローバル属性(全てのHTML要素で共通な属性)で、付与した要素の中身を直接編集できるようにします。 contenteditableはグローバル属性ではありますが、一部の要素では利用できません。利用の可否はJavaScriptでHTMLElement.isContentEditableから確認できます。

<div contenteditable="true">
  ここを編集できます
</div>

上記のサンプルで「ここを編集できます」と記述された部分を選択すると、内容が変更可能であることがわかると思います。 サンプルの上部に書かれた「div要素にcontenteditable="true"を付与したサンプル」をコピーして貼り付けると、対象のテキストに加えて背景色と太字もそのままの状態で反映されることが確認できます。

単純な文字の他にも、下の画像のようにBaselineの埋め込み要素をそのまま貼り付けることも可能です(この画像自体も反映できます)。

このようにcontenteditable="true"は付与した要素を自由に編集可能な要素に変更します。

plaintext-only

contenteditableにtrueではなくplaintext-onlyを付与すると、その要素のテキストのみを編集可能にします。

<div contenteditable="plaintext-only">
  ここを編集できます
</div>

上記は先ほどのサンプルと同じ条件で、値をplaintext-onlyに変更したものです。 「div要素にcontenteditable="plaintext-only"を付与したサンプル」をコピーして貼り付けを行うと、テキストだけが追加されることが確認できます。背景やフォントの太さは反映されません。 これがplaintext-onlyの特徴です。trueを付与したときと異なり、テキストのみを編集可能にするので、実装上で考慮するケースが少なくなります。

おわりに

これまでは、contenteditableを利用する際には、リッチテキストのスタイルが付与されることを考慮して実装を行う必要がありました。

Baseline 2025で追加されたcontenteditable="plaintext-only"を利用することで、テキストのみを編集可能にできるので、よりシンプルに実装できるようになります。

リッチなテキストの編集が不要なケースでは、想定外を防ぐためにもplaintext-onlyを利用することを検討してみてください。