|
0
|
1 <?xml version="1.0" encoding="UTF-8"?>
|
|
|
2 <!DOCTYPE html>
|
|
|
3 <html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
4 <head>
|
|
|
5 <meta charset="UTF-8" />
|
|
|
6 <title> contentEditable </title>
|
|
|
7 <script type="text/javascript">//<![CDATA[
|
|
|
8 var
|
|
|
9 gActiveEditor = null, // active editing host
|
|
|
10 gCommandDump = null; // command dump field
|
|
|
11 function ExecCommand(toolbarElement) {
|
|
|
12 var argVal, argStr,
|
|
|
13 type = toolbarElement.getAttribute("type"),
|
|
|
14 command = toolbarElement.getAttribute("data-command");
|
|
|
15 switch (type) { // get the execCommand argument according to the button type
|
|
|
16 case "button": // toolbar button: no argument
|
|
|
17 argVal = argStr = false;
|
|
|
18 break;
|
|
|
19 case "checkbox": // styleWithCSS: boolean argument
|
|
|
20 argVal = argStr = "" + toolbarElement.checked + "";
|
|
|
21 break;
|
|
|
22 default: // <select> menu: string argument
|
|
|
23 if (!toolbarElement.selectedIndex) return;
|
|
|
24 argVal = toolbarElement.value;
|
|
|
25 argStr = "'" + argVal.replace("<", "<").replace(">", ">") + "'";
|
|
|
26 toolbarElement.selectedIndex = 0; // reset drop-down list
|
|
|
27 }
|
|
|
28 document.execCommand(command, false, argVal); // send requested action
|
|
|
29 if (gActiveEditor) gActiveEditor.focus(); // re-focus the editable element
|
|
|
30 gCommandDump.innerHTML = "document.execCommand('" + command + "', false, '" + argStr + "');";
|
|
|
31 }
|
|
|
32 window.addEventListener("DOMContentLoaded", function() {
|
|
|
33 var i,
|
|
|
34 buttons = document.querySelectorAll("*[data-command]"),
|
|
|
35 editors = document.querySelectorAll("*[contenteditable]");
|
|
|
36 for (i = 0; i < buttons.length; i++) {
|
|
|
37 buttons[i].onclick = function() { ExecCommand(this); };
|
|
|
38 buttons[i].onchange = function() { ExecCommand(this); };
|
|
|
39 }
|
|
|
40 for (i = 0; i < editors.length; i++)
|
|
|
41 editors[i].onfocus = function() { gActiveEditor = this; };
|
|
|
42 gCommandDump = document.querySelector("#execCommand");
|
|
|
43 ExecCommand(document.querySelector("#useCSS"));
|
|
|
44 }, false);
|
|
|
45 //]]></script>
|
|
|
46 <style type="text/css">
|
|
|
47 html {
|
|
|
48 background: #111;
|
|
|
49 color: #eee;
|
|
|
50 font-family: sans-serif;
|
|
|
51 font-size: 12px;
|
|
|
52 }
|
|
|
53 body {
|
|
|
54 margin: 1em auto;
|
|
|
55 padding: 5px 20px;
|
|
|
56 width: 600px;
|
|
|
57 background: #eee;
|
|
|
58 color: #111;
|
|
|
59 border: 2px solid #eee;
|
|
|
60 overflow: auto;
|
|
|
61 }
|
|
|
62 *[contenteditable] {
|
|
|
63 margin: 1em 0;
|
|
|
64 padding: 10px;
|
|
|
65 background: #fff;
|
|
|
66 color: #111;
|
|
|
67 border: 1px solid #ddd;
|
|
|
68 outline: none;
|
|
|
69 resize: both;
|
|
|
70 }
|
|
|
71 #execCommand {
|
|
|
72 padding-left: 5em;
|
|
|
73 min-height: 1em;
|
|
|
74 line-height: 1em;
|
|
|
75 color: #555;
|
|
|
76 }
|
|
|
77 footer {
|
|
|
78 border-top: 1px solid #ccc;
|
|
|
79 }
|
|
|
80 #toolbar {
|
|
|
81 border-bottom: 1px solid #ccc;
|
|
|
82 }
|
|
|
83 #toolbar dt {
|
|
|
84 float: left;
|
|
|
85 clear: both;
|
|
|
86 width: 5em;
|
|
|
87 line-height: 24px;
|
|
|
88 }
|
|
|
89 #toolbar dd {
|
|
|
90 line-height: 24px;
|
|
|
91 }
|
|
|
92 #toolbar input {
|
|
|
93 /* toolbar images taken from CKEditor */
|
|
|
94 background-image: url(data:image/png;base64,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);
|
|
|
95 height: 20px;
|
|
|
96 width: 20px;
|
|
|
97 }
|
|
|
98 #toolbar *[disabled] {
|
|
|
99 opacity: 0.5;
|
|
|
100 }
|
|
|
101 #toolbar *[data-command="increaseFontSize"],
|
|
|
102 #toolbar *[data-command="decreaseFontSize"] {
|
|
|
103 background-image: none;
|
|
|
104 }
|
|
|
105 #toolbar *[type="checkbox"] {
|
|
|
106 margin: 0;
|
|
|
107 padding: 0;
|
|
|
108 vertical-align: middle;
|
|
|
109 background-image: none;
|
|
|
110 }
|
|
|
111 *[data-command="cut"] { background-position: 0 -96px; }
|
|
|
112 *[data-command="copy"] { background-position: 0 -112px; }
|
|
|
113 *[data-command="paste"] { background-position: 0 -128px; }
|
|
|
114 *[data-command="undo"] { background-position: 0 -208px; }
|
|
|
115 *[data-command="redo"] { background-position: 0 -224px; }
|
|
|
116 *[data-command="bold"] { background-position: 0 -304px; }
|
|
|
117 *[data-command="italic"] { background-position: 0 -320px; }
|
|
|
118 *[data-command="underline"] { background-position: 0 -336px; }
|
|
|
119 *[data-command="strikeThrough"] { background-position: 0 -352px; }
|
|
|
120 *[data-command="subscript"] { background-position: 0 -368px; }
|
|
|
121 *[data-command="superscript"] { background-position: 0 -384px; }
|
|
|
122 *[data-command="insertOrderedList"] { background-position: 0 -400px; }
|
|
|
123 *[data-command="insertUnorderedList"] { background-position: 0 -416px; }
|
|
|
124 *[data-command="outdent"] { background-position: 0 -432px; }
|
|
|
125 *[data-command="indent"] { background-position: 0 -448px; }
|
|
|
126 *[data-command="justifyLeft"] { background-position: 0 -464px; }
|
|
|
127 *[data-command="justifyCenter"] { background-position: 0 -480px; }
|
|
|
128 *[data-command="justifyRight"] { background-position: 0 -496px; }
|
|
|
129 *[data-command="justifyFull"] { background-position: 0 -512px; }
|
|
|
130 </style>
|
|
|
131 <!--
|
|
|
132 - Mutation Events:
|
|
|
133 - https://developer.mozilla.org/en/XUL/Events#Mutation_DOM_events
|
|
|
134 -->
|
|
|
135 <script type="text/javascript">//<![CDATA[
|
|
|
136 var gBreadCrumb = null;
|
|
|
137 function updateBreadCrumb(node, action) {
|
|
|
138 if (!gBreadCrumb || !node || (node == document.body)) return;
|
|
|
139 var
|
|
|
140 body = document.body,
|
|
|
141 text = node.nodeName,
|
|
|
142 tmp = node.parentNode;
|
|
|
143 while (tmp && tmp != body) {
|
|
|
144 text = tmp.nodeName + " > " + text;
|
|
|
145 tmp = tmp.parentNode;
|
|
|
146 }
|
|
|
147 text = action + ": " + text;
|
|
|
148 gBreadCrumb.innerHTML = text;
|
|
|
149 console.log(text);
|
|
|
150 }
|
|
|
151
|
|
|
152 // retrieve the startContainer of the current selection
|
|
|
153 var gLastFocusNode = null;
|
|
|
154 function getSelectionStart() {
|
|
|
155 var node = document.getSelection().anchorNode;
|
|
|
156 return (node.nodeName == "#text" ? node.parentNode : node);
|
|
|
157 }
|
|
|
158 function onCaretMove(event, action) {
|
|
|
159 var selection = document.getSelection();
|
|
|
160 var node = selection.isCollapsed ? selection.focusNode
|
|
|
161 : selection.getRangeAt(0).commonAncestorContainer;
|
|
|
162 if (node != gLastFocusNode) {
|
|
|
163 updateBreadCrumb(node, action);
|
|
|
164 gLastFocusNode = node;
|
|
|
165 }
|
|
|
166 }
|
|
|
167
|
|
|
168 window.addEventListener("DOMContentLoaded", function() {
|
|
|
169 gBreadCrumb = document.querySelector("#breadcrumb");
|
|
|
170
|
|
|
171 function onAttrModified(event) { updateBreadCrumb(event.target, "keypress"); }
|
|
|
172 function onNodeInserted(event) { updateBreadCrumb(event.target, "inserted"); }
|
|
|
173 function onNodeRemoved(event) { updateBreadCrumb(event.target, "removed "); }
|
|
|
174
|
|
|
175 function onKeyUp(event) { onCaretMove(event, "keyup"); }
|
|
|
176 function onClick(event) { onCaretMove(event, "click"); }
|
|
|
177
|
|
|
178 // listening to mutation events on 'document' freezes Firefox :-/
|
|
|
179 var i, editors = document.querySelectorAll("*[contenteditable]");
|
|
|
180 for (i = 0; i < editors.length; i++) {
|
|
|
181 // mutation events -- do we really need them?
|
|
|
182 editors[i].addEventListener("DOMAttrModified", onAttrModified, false);
|
|
|
183 editors[i].addEventListener("DOMNodeInserted", onNodeInserted, false);
|
|
|
184 editors[i].addEventListener("DOMNodeRemoved", onNodeRemoved, false);
|
|
|
185 // caret movements
|
|
|
186 //editors[i].addEventListener("textinput", onKeyUp, false);
|
|
|
187 editors[i].addEventListener("keyup", onKeyUp, false);
|
|
|
188 editors[i].addEventListener("mouseup", onClick, false);
|
|
|
189 }
|
|
|
190 }, false);
|
|
|
191 //]]></script>
|
|
|
192 <style type="text/css">
|
|
|
193 .attrModified { border: 1px dashed red; }
|
|
|
194 .nodeModified { border: 1px dashed navy; }
|
|
|
195 .nodeInserted { border: 1px dotted brown; }
|
|
|
196 </style>
|
|
|
197 </head>
|
|
|
198 <body>
|
|
|
199 <form id="toolbar">
|
|
|
200 <dl>
|
|
|
201 <dt> edit: </dt>
|
|
|
202 <dd>
|
|
|
203 <input type="button" value=" " data-command="undo" />
|
|
|
204 <input type="button" value=" " data-command="redo" />
|
|
|
205 |
|
|
|
206 <input type="button" value=" " data-command="cut" disabled="" />
|
|
|
207 <input type="button" value=" " data-command="copy" disabled="" />
|
|
|
208 <input type="button" value=" " data-command="paste" disabled="" />
|
|
|
209 |
|
|
|
210 <input type="checkbox" id="useCSS" data-command="styleWithCSS" checked="" />
|
|
|
211 <label for="useCSS">style with CSS</label>
|
|
|
212 </dd>
|
|
|
213 <dt> inline: </dt>
|
|
|
214 <dd>
|
|
|
215 <select data-command="fontName">
|
|
|
216 <option value="" disabled="" selected=""> Font </option>
|
|
|
217 <option value="serif"> serif </option>
|
|
|
218 <option value="sans-serif"> sans-serif </option>
|
|
|
219 <option value="monospace"> monospace </option>
|
|
|
220 <option value=" " disabled=""> - </option>
|
|
|
221 <option value="Arial"> Arial </option>
|
|
|
222 <option value="Courier New"> Courier New </option>
|
|
|
223 <option value="Times New Roman"> Times New Roman </option>
|
|
|
224 <option value="Verdana"> Verdana </option>
|
|
|
225 </select>
|
|
|
226 <select data-command="fontSize">
|
|
|
227 <option value="" disabled="" selected=""> Size </option>
|
|
|
228 <option value="1"> 1 </option>
|
|
|
229 <option value="2"> 2 </option>
|
|
|
230 <option value="3"> 3 </option>
|
|
|
231 <option value="4"> 4 </option>
|
|
|
232 <option value="5"> 5 </option>
|
|
|
233 <option value="6"> 6 </option>
|
|
|
234 <option value="7"> 7 </option>
|
|
|
235 </select>
|
|
|
236 <input type="button" value="-" data-command="decreaseFontSize" />
|
|
|
237 <input type="button" value="+" data-command="increaseFontSize" />
|
|
|
238 |
|
|
|
239 <input type="button" value=" " data-command="bold" />
|
|
|
240 <input type="button" value=" " data-command="italic" />
|
|
|
241 <input type="button" value=" " data-command="underline" />
|
|
|
242 <input type="button" value=" " data-command="strikeThrough" />
|
|
|
243 |
|
|
|
244 <input type="button" value=" " data-command="subscript" />
|
|
|
245 <input type="button" value=" " data-command="superscript" />
|
|
|
246 </dd>
|
|
|
247 <dt> block: </dt>
|
|
|
248 <dd>
|
|
|
249 <select data-command="formatBlock">
|
|
|
250 <option value="" disabled="" selected=""> Format </option>
|
|
|
251 <option value="<p>"> paragraph </option>
|
|
|
252 <option value="<h1>"> heading 1 </option>
|
|
|
253 <option value="<h2>"> heading 2 </option>
|
|
|
254 <option value="<h3>"> heading 3 </option>
|
|
|
255 <option value="<h4>"> heading 4 </option>
|
|
|
256 <option value="<h5>"> heading 5 </option>
|
|
|
257 <option value="<h6>"> heading 6 </option>
|
|
|
258 <option value="<address>"> address </option>
|
|
|
259 <option value="<pre>"> preformatted </option>
|
|
|
260 </select>
|
|
|
261 |
|
|
|
262 <input type="button" value=" " data-command="justifyLeft" />
|
|
|
263 <input type="button" value=" " data-command="justifyCenter" />
|
|
|
264 <input type="button" value=" " data-command="justifyRight" />
|
|
|
265 <input type="button" value=" " data-command="justifyFull" />
|
|
|
266 |
|
|
|
267 <input type="button" value=" " data-command="outdent" />
|
|
|
268 <input type="button" value=" " data-command="indent" />
|
|
|
269 |
|
|
|
270 <input type="button" value=" " data-command="insertOrderedList" />
|
|
|
271 <input type="button" value=" " data-command="insertUnorderedList" />
|
|
|
272 </dd>
|
|
|
273 </dl>
|
|
|
274 <pre id="execCommand" />
|
|
|
275 </form>
|
|
|
276 <pre id="breadcrumb"> </pre>
|
|
|
277
|
|
|
278 <section contenteditable="true">
|
|
|
279 <h2> Go ahead, edit away! </h2>
|
|
|
280 <p> Here's a typical paragraph element </p>
|
|
|
281 <ol><li> and now a list </li><li> with only </li><li> three items </li></ol>
|
|
|
282 </section>
|
|
|
283
|
|
|
284 <footer contenteditable="true">
|
|
|
285 <p>
|
|
|
286 This HTML content editor is not intended to compete with <a
|
|
|
287 href="http://ckeditor.com/">CKEditor</a> or <a
|
|
|
288 href="http://tinymce.com/">TinyMCE</a>: it is designed to
|
|
|
289 <strong>test</strong> the various implementations of
|
|
|
290 <code>contentEditable</code> and <code>execCommand</code>
|
|
|
291 in modern browsers.
|
|
|
292 </p>
|
|
|
293 <p>
|
|
|
294 This is a standalone file: the JavaScript code (<40 lines!), CSS markup and
|
|
|
295 images are embedded. Feel free to download it to try it offline.
|
|
|
296 </p>
|
|
|
297 <p>
|
|
|
298 Useful links:
|
|
|
299 <a href="https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla">Mozilla Developer Network</a>,
|
|
|
300 <a href="http://html5demos.com/contenteditable/">html5demos.com</a>,
|
|
|
301 <a href="http://www.browserscope.org/richtext2/test">Browserscope.org</a>.
|
|
|
302 </p>
|
|
|
303 </footer>
|
|
|
304 </body>
|
|
|
305 </html>
|
