-
Notifications
You must be signed in to change notification settings - Fork 39
/
Copy pathindex.html
177 lines (172 loc) · 8.52 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>ContentEditableDisabled</title>
<script class='remove'>
var respecConfig = {
specStatus: "ED",
xref: ["dom", "html", "infra"],
editors: [
{
name: "Johannes Wilm",
mailto: "[email protected]",
company: "Invited Expert"
},
{
name: "Bo Cupp",
mailto: "[email protected]",
company: "Microsoft"
},
{
name: "Grisha Lyukshin",
mailto: "[email protected]",
retiredDate: "2021-07-08",
}
],
github: "https://github.com/w3c/editing",
shortName: "contenteditabledisabled",
group: "webediting"
};
</script>
<script src='https://www.w3.org/Tools/respec/respec-w3c' class='remove'></script>
</head>
<body>
<section id='abstract'>
<p>
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.
</p>
<p>
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.
</p>
</section>
<section id='sotd'>
<p>This is a work in progress and subject to change without warning.</p>
</section>
<section id="introduction">
<h2>Introduction</h2>
<p>
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.
</p>
<p>
To address the issue, a new `contenteditabledisabled` attribute can be applied as shown in the example below.
</p>
<pre class="example html">
<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>
</pre>
</section>
<section id="contenteditabledisabled">
<h2>
<code>contenteditabledisabled</code> DOM Content Attribute.
</h2>
<p>
The <code><dfn data-dfn-type="element-attr">contenteditabledisabled</dfn></code> 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=].
</p>
<p>
The allowed set of tokens are listed below. Each token matches the name of an <a data-cite="input-events-1#events-inputevents">Input Type</a>, or is a shortcut that is equivalent to specifying a set tokens.
</p>
<p>
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.
</p>
<h3>
<code>contenteditabledisabled</code> Allowed Tokens.
</h3>
<p>
<ul>
<li><code>formatjustifycenter</code></li>
<li><code>formatjustifyfull</code></li>
<li><code>formatjustifyleft</code></li>
<li><code>formatjustifyright</code></li>
<li><code>formatbackcolor</code></li>
<li><code>formatbold</code></li>
<li><code>insertlink</code></li>
<li><code>formatfontname</code></li>
<li><code>formatfontsize</code></li>
<li><code>formatfontcolor</code></li>
<li><code>formatindent</code></li>
<li><code>inserthorizontalrule</code></li>
<li><code>insertorderedlist</code></li>
<li><code>insertunorderedlist</code></li>
<li><code>formatitalic</code></li>
<li><code>formatoutdent</code></li>
<li><code>formatremove</code></li>
<li><code>formatstrikethrough</code></li>
<li><code>formatsubscript</code></li>
<li><code>formatsuperscript</code></li>
<li><code>formatunderline</code></li>
</ul>
</p>
<p class="issue" data-number="249"></p>
<h3>
<code>contenteditabledisabled</code> Allowed Token Shortcuts.
</h3>
<p>
The following tokens are also supported by the <code>contenteditabledisabled</code> attribute and serve as shorthands for specifying a set of tokens from contenteditabledisabled Allowed Tokens:
</p>
<p>
<ul>
<li><code>formatjustify</code>: combines <code>formatjustifycenter</code>, <code>formatjustifyfull</code>, <code>formatjustifyleft</code>, and <code>formatjustifyright</code>.</li>
<li><code>formatfont</code>: combines <code>formatfontname</code>, <code>formatfontsize</code>, and <code>formatfontcolor</code></li>
<li><code>formatdent</code>: combines <code>formatindent</code> and <code>formatoutdent</code></li>
<li><code>insertlist</code>: combines <code>insertorderedlist</code> and <code>insertunorderedlist</code></li>
<li><code>formatscript</code>: combines <code>formatsubscript</code> and <code>formatsuperscript</code></li>
</ul>
</p>
<p class="note">
Note that this specification does not have a shortcut to disable all editing UI. Authors should consider using a <code>textarea</code> for this purpose.
</p>
</section>
<section data-dfn-for="DOMCommandTokenList">
<h2>The <dfn>DOMCommandTokenList</dfn></h2>
<pre class="idl">
[Exposed=Window]
interface DOMCommandTokenList : DOMTokenList {
[SameObject] readonly attribute DOMString supported;
};
</pre>
<p>The <dfn><code>supported</code></dfn> attribute returns the supported tokens as a string.</p>
</section>
<section id="element-contenteditable-mixin">
<h2>Extensions to the <dfn>ElementContentEditable</dfn> mixin</h2>
<pre class="idl">
partial interface mixin ElementContentEditable {
[SameObject, PutForwards=value] readonly attribute DOMCommandTokenList contentEditableDisabled;
};
</pre>
<p>
The {{ElementContentEditable/contentEditableDisabled}} IDL attribute reflects the contenteditabledisabled DOM content attribute.
<p>
</section>
<section id="issue-summary">
</section>
<section id='conformance'></section>
</body>
</html>