This specification defines an API that indicates which editing-related commands are applicable to `contenteditable` regions of a document. User agents can take this information into account when presenting any editing-related UI to ensure its applicability.
This specification purposefully does not prescribe the means by which a user agent will indicate to the user the applicability of any editing command. The user agent could, for example, omit editing UI, disable it, or choose some other appropriate UI treatment.
This is a work in progress and subject to change without warning.
In contenteditable regions of documents, some user agents provide contextual user interface (UI) elements to help accelerate common editing operations. The UI is meant to enhance the editing experience, but when authors create customized editors that are not compatible with user agent UI, it leads to confused users.
To address the issue, a new `contenteditabledisabled` attribute can be applied as shown in the example below.
<div contenteditable="true" contenteditabledisabled=" formatbackcolor formatdent formatfont formatjustify formatscript formatstrikethrough formatunderline inserthorizontalrule"> This is a contenteditable region of a document that supports: <ul> <li>bold text</li> <li>italic text</li> <li>links</li> <li>lists</li> <li>and possibly other formatting outside the scope of this specification.</li> </ul> This contenteditable region explicitly does not support: <ul> <li>background colors</li> <li>indentation</li> <li>font name, size or color customization</li> <li>justification</li> <li>superscript or subscript text</li> <li>strikethrough</li> <li>underlines</li> <li>horizontal rules</li> </ul> </div>
contenteditabledisabled
DOM Content Attribute.
The contenteditabledisabled
attribute indicates which user agent-supplied editing UI MUST convey the inapplicability of editing command in a given context. When specified, the attribute can contain an [=unordered set of unique space-separated tokens=] that are treated as [=ASCII case-insensitive=].
The allowed set of tokens are listed below. Each token matches the name of an Input Type, or is a shortcut that is equivalent to specifying a set tokens.
When a token is specified, an user agent MUST NOT be display UI that indicates an editing command is applicable if when invoked, would result in a beforeinput event having and inputType that matches one of the tokens in the attribute's value, or matches a token that is represented by a shortcut that is included in the attribute's value. The exact mechanism for that indication is beyond the scope of this specification.
contenteditabledisabled
Allowed Tokens.
formatjustifycenter
formatjustifyfull
formatjustifyleft
formatjustifyright
formatbackcolor
formatbold
insertlink
formatfontname
formatfontsize
formatfontcolor
formatindent
inserthorizontalrule
insertorderedlist
insertunorderedlist
formatitalic
formatoutdent
formatremove
formatstrikethrough
formatsubscript
formatsuperscript
formatunderline
contenteditabledisabled
Allowed Token Shortcuts.
The following tokens are also supported by the contenteditabledisabled
attribute and serve as shorthands for specifying a set of tokens from contenteditabledisabled Allowed Tokens:
formatjustify
: combines formatjustifycenter
, formatjustifyfull
, formatjustifyleft
, and formatjustifyright
.formatfont
: combines formatfontname
, formatfontsize
, and formatfontcolor
formatdent
: combines formatindent
and formatoutdent
insertlist
: combines insertorderedlist
and insertunorderedlist
formatscript
: combines formatsubscript
and formatsuperscript
Note that this specification does not have a shortcut to disable all editing UI. Authors should consider using a textarea
for this purpose.
[Exposed=Window] interface DOMCommandTokenList : DOMTokenList { [SameObject] readonly attribute DOMString supported; };
The supported
attribute returns the supported tokens as a string.
partial interface mixin ElementContentEditable { [SameObject, PutForwards=value] readonly attribute DOMCommandTokenList contentEditableDisabled; };
The {{ElementContentEditable/contentEditableDisabled}} IDL attribute reflects the contenteditabledisabled DOM content attribute.