https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla
Introduction
Mozilla 1.3 introduces an implementation of Microsoft® Internet Explorer's designMode feature. The rich-text editing support in Mozilla 1.3 supports the designMode feature which turns HTML documents into rich-text editors. Starting in Firefox 3, Mozilla also supports Internet Explorer's contentEditable
attribute which allows any element to become editable or non-editable (the latter for when preventing change to fixed elements in an editable environment).
Setting Up Rich-Text Editing
Rich-text editing is initialized by setting the designMode
property of a document to "On", such as the document inside an iframe. Once designMode
has been set to "On", the document becomes a rich-text editing area and the user can type into it as if it were a textarea. The most basic keyboard commands such as copy and paste are available, all others need to be implemented by the website.
Similarly, setting contentEditable
to "true" allows you to make individual elements of a document editable.
Executing Commands
When an HTML document has been switched to designMode, the document object exposes the execCommand
method which allows one to run commands to manipulate the contents of the editable region. Most commands affect the document's selection (bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting). When using contentEditable
, calling execCommand
will affect the currently active editable element.
1
|
execCommand(String aCommandName, Boolean aShowDefaultUI, String aValueArgument)
|
Arguments
String aCommandName
- the name of the command
Boolean aShowDefaultUI
- whether the default user interface should be shown. This is not implemented in Mozilla.
String aValueArgument
- some commands (such as insertimage) require an extra value argument (the image's url). Pass an argument of
null
if no argument is needed.
Commands
backColor
- Changes the document background color. In styleWithCss mode, it affects the background color of the containing block instead. This requires a color value string to be passed in as a value argument. (Internet Explorer uses this to set text background color.)
bold
- Toggles bold on/off for the selection or at the insertion point. (Internet Explorer uses the STRONG tag instead of B.)
contentReadOnly
- Makes the content document either read-only or editable. This requires a boolean true/false to be passed in as a value argument. (Not supported by Internet Explorer.)
copy
- Copies the current selection to the clipboard. Clipboard capability must be enabled in the user.js preference file. See
createLink
- Creates an anchor link from the selection, only if there is a selection. This requires the HREF URI string to be passed in as a value argument. The URI must contain at least a single character, which may be a white space. (Internet Explorer will create a link with a null URI value.)
cut
- Cuts the current selection and copies it to the clipboard. Clipboard capability must be enabled in the user.js preference file. See
decreaseFontSize
- Adds a SMALL tag around the selection or at the insertion point. (Not supported by Internet Explorer.)
delete
- Deletes the current selection.
enableInlineTableEditing
- Enables or disables the table row and column insertion and deletion controls. (Not supported by Internet Explorer.)
enableObjectResizing
- Enables or disables the resize handles on images and other resizable objects. (Not supported by Internet Explorer.)
fontName
- Changes the font name for the selection or at the insertion point. This requires a font name string ("Arial" for example) to be passed in as a value argument.
fontSize
- Changes the font size for the selection or at the insertion point. This requires an HTML font size (1-7) to be passed in as a value argument.
foreColor
- Changes a font color for the selection or at the insertion point. This requires a color value string to be passed in as a value argument.
formatBlock
- Adds an HTML block-style tag around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, BLOCKQUOTE is the exception - it will wrap any containing block element). Requires a tag-name string to be passed in as a value argument. Virtually all block style tags can be used (eg. "H1", "P", "DL", "BLOCKQUOTE"). (Internet Explorer supports only heading tags H1 - H6, ADDRESS, and PRE, which must also include the tag delimiters < >, such as "<H1>".)
forwardDelete
- Deletes the character ahead of the cursor's position. It is the same as hitting the delete key.
heading- Adds a heading tag around a selection or insertion point line. Requires the tag-name string to be passed in as a value argument (i.e. "H1", "H6"). (Not supported by Internet Explorer.)
hiliteColor
- Changes the background color for the selection or at the insertion point. Requires a color value string to be passed in as a value argument. UseCSS must be turned on for this to function. (Not supported by Internet Explorer.)
increaseFontSize
- Adds a BIG tag around the selection or at the insertion point. (Not supported by Internet Explorer.)
indent
- Indents the line containing the selection or insertion point. In Firefox, if the selection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented.
insertBrOnReturn
- Controls whether the Enter key inserts a br tag or splits the current block element into two. (Not supported by Internet Explorer.)
insertHorizontalRule
- Inserts a horizontal rule at the insertion point (deletes selection).
insertHTML
- Inserts an HTML string at the insertion point (deletes selection). Requires a valid HTML string to be passed in as a value argument. (Not supported by Internet Explorer.)
insertImage
- Inserts an image at the insertion point (deletes selection). Requires the image SRC URI string to be passed in as a value argument. The URI must contain at least a single character, which may be a white space. (Internet Explorer will create a link with a null URI value.)
insertOrderedList
- Creates a numbered ordered list for the selection or at the insertion point.
insertUnorderedList
- Creates a bulleted unordered list for the selection or at the insertion point.
insertParagraph
- Inserts a paragraph around the selection or the current line. (Internet Explorer inserts a paragraph at the insertion point and deletes the selection.)
insertText- Inserts the given plain text at the insertion point (deletes selection).
italic
- Toggles italics on/off for the selection or at the insertion point. (Internet Explorer uses the EM tag instead of I.)
justifyCenter
- Centers the selection or insertion point.
justifyFull
- Justifies the selection or insertion point.
justifyLeft
- Justifies the selection or insertion point to the left.
justifyRight
- Right-justifies the selection or the insertion point.
outdent
- Outdents the line containing the selection or insertion point.
paste
- Pastes the clipboard contents at the insertion point (replaces current selection). Clipboard capability must be enabled in the user.js preference file. See
redo
- Redoes the previous undo command.
removeFormat
- Removes all formatting from the current selection.
selectAll
- Selects all of the content of the editable region.
strikeThrough
- Toggles strikethrough on/off for the selection or at the insertion point.
subscript
- Toggles subscript on/off for the selection or at the insertion point.
superscript
- Toggles superscript on/off for the selection or at the insertion point.
underline
- Toggles underline on/off for the selection or at the insertion point.
undo
- Undoes the last executed command.
unlink
- Removes the anchor tag from a selected anchor link.
useCSS Deprecated
- Toggles the use of HTML tags or CSS for the generated markup. Requires a boolean true/false as a value argument. NOTE: This argument is logically backwards (i.e. use false to use CSS, true to use HTML). (Not supported by Internet Explorer.) This has been deprecated; use the styleWithCSS command instead.
styleWithCSS
- Replaces the useCSS command; argument works as expected, i.e. true modifies/generates style attributes in markup, false generates formatting elements.
Internet Explorer Differences
One major difference between Mozilla and Internet Explorer that affects designMode is the generated code in the editable document: while Internet Explorer uses HTML tags (em, i, etc), Mozilla 1.3 will generate by default spans with inline style rules. The useCSS
command can be used to toggle between CSS and HTML markup creation.
Figure 1 : Generated HTML differences
Mozilla:
1
2
3
|
<
span
style
=
"font-weight: bold;"
>I love geckos.</
span
>
<
span
style="font-weight: bold; font-style: italic;
text-decoration: underline;">Dinosaurs are big.</
span
>
|
Internet Explorer:
1
2
|
<
STRONG
>I love geckos.</
STRONG
>
<
STRONG
><
EM
><
U
>Dinosaurs are big.</
U
></
EM
></
STRONG
>
|
Another difference between Mozilla and IE is how to access the document object of an iframe, which is usually used in conjunction with designMode. Mozilla uses the W3C standard way, namely IFrameElement.contentDocument
, while IE requires IFrameElement.document
.
DevEdge provides a JavaScript helper class, xbDesignMode
, which is a wrapper for the designMode feature which hides the differences between IE and Mozilla.
Event Handling Disabled
A further difference for Mozilla is that once a document is switched to designMode, all events on that particular document are disabled. Once designMode is turned off however (as this now seems possible in Mozilla 1.5) the events become active again.
More information can be found in the Rich text editing section of Migrate apps from Internet Explorer to Mozilla.
Examples
Please note: The example files are still being migrated from another site. They are not available at this time. --fumble 18:13, 24 Apr 2005 (PDT)
Example 1
The first example is an HTML document setting its own designMode
to "On". This makes the entire document editable in Mozilla 1.3. Internet Explorer, however, does not allow javascript to change the current document's designMode. For it to work in Internet Explorer, the contentEditable
attribute of the body tag needs to be set to "true".
Figure 2 : First example
1
2
3
4
5
6
7
|
HTML:
<body contentEditable=
"true"
onload=
"load()"
>
JavaScript:
function
load(){
window.document.designMode =
"On"
;
}
|
Example 2
The second example is a simple rich text editing page, where text can be bolded/italicized/underlined, new links can be added and the color of text changed. The example page consists of an iframe, which will be the rich editing area, as well as elements for basic editing commands such as bold/italics/text color.
Figure 3 : Setting up rich-text editing
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
HTML:
<body onload=
"load()"
>
JavaScript:
function
load(){
getIFrameDocument(
"editorWindow"
).designMode =
"On"
;
}
function
getIFrameDocument(aID){
// if contentDocument exists, W3C compliant (Mozilla)
if
(document.getElementById(aID).contentDocument){
return
document.getElementById(aID).contentDocument;
}
else
{
// IE
return
document.frames[aID].document;
}
}
|
The example contains a doRichEditCommand
function that makes it easier to execute commands on the iframe's document and keeps the HTML code clean. The function executed the requested command using execCommand()
and then sets focus back to the editable document, as clicking on a button will set focus on the button itself, which breaks the editing flow.
Figure 4 : Executing Rich Editing Commands
1
2
3
4
5
6
7
8
|
HTML:
<button onclick=
"doRichEditCommand('bold')"
style=
"font-weight:bold;"
>B</button>
JavaScript:
function
doRichEditCommand(aName, aArg){
getIFrameDocument(
'editorWindow'
).execCommand(aName,
false
, aArg);
document.getElementById(
'editorWindow'
).contentWindow.focus()
}
|
Example: a simple but complete Rich Text Editor
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
|
<!doctype html>
<
html
>
<
head
>
<
title
>Rich Text Editor</
title
>
<
script
type
=
"text/javascript"
>
var oDoc, sDefTxt;
function initDoc() {
oDoc = document.getElementById("textBox");
sDefTxt = oDoc.innerHTML;
if (document.compForm.switchMode.checked) { setDocMode(true); }
}
function formatDoc(sCmd, sValue) {
if (validateMode()) { document.execCommand(sCmd, false, sValue); oDoc.focus(); }
}
function validateMode() {
if (!document.compForm.switchMode.checked) { return true ; }
alert("Uncheck \"Show HTML\".");
oDoc.focus();
return false;
}
function setDocMode(bToSource) {
var oContent;
if (bToSource) {
oContent = document.createTextNode(oDoc.innerHTML);
oDoc.innerHTML = "";
var oPre = document.createElement("pre");
oDoc.contentEditable = false;
oPre.id = "sourceText";
oPre.contentEditable = true;
oPre.appendChild(oContent);
oDoc.appendChild(oPre);
} else {
if (document.all) {
oDoc.innerHTML = oDoc.innerText;
} else {
oContent = document.createRange();
oContent.selectNodeContents(oDoc.firstChild);
oDoc.innerHTML = oContent.toString();
}
oDoc.contentEditable = true;
}
oDoc.focus();
}
function printDoc() {
if (!validateMode()) { return; }
var oPrntWin = window.open("","_blank","width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
oPrntWin.document.open();
oPrntWin.document.write("<!doctype html><
html
><
head
><
title
>Print<\/title><\/head><
body
onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
oPrntWin.document.close();
}
</
script
>
<
style
type
=
"text/css"
>
.intLink { cursor: pointer; }
img.intLink { border: 0; }
#toolBar1 select { font-size:10px; }
#textBox {
width: 540px;
height: 200px;
border: 1px #000000 solid;
padding: 12px;
overflow: scroll;
}
#textBox #sourceText {
padding: 0;
margin: 0;
min-width: 498px;
min-height: 200px;
}
#editMode label { cursor: pointer; }
</
style
>
</
head
>
<
body
onload
=
"initDoc();"
>
<
form
name
=
"compForm"
method
=
"post"
action
=
"sample.php"
onsubmit
=
"if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;"
>
<
input
type
=
"hidden"
name
=
"myDoc"
>
<
div
id
=
"toolBar1"
>
<
select
onchange
=
"formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;"
>
<
option
selected>- formatting -</
option
>
<
option
value
=
"h1"
>Title 1 <h1></
option
>
<
option
value
=
"h2"
>Title 2 <h2></
option
>
<
option
value
=
"h3"
>Title 3 <h3></
option
>
<
option
value
=
"h4"
>Title 4 <h4></
option
>
<
option
value
=
"h5"
>Title 5 <h5></
option
>
<
option
value
=
"h6"
>Subtitle <h6></
option
>
<
option
value
=
"p"
>Paragraph <p></
option
>
<
option
value
=
"pre"
>Preformatted <pre></
option
>
</
select
>
<
select
onchange
=
"formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;"
>
<
option
class
=
"heading"
selected>- font -</
option
>
<
option
>Arial</
option
>
<
option
>Arial Black</
option
>
<
option
>Courier New</
option
>
<
option
>Times New Roman</
option
>
</
select
>
<
select
onchange
=
"formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;"
>
<
option
class
=
"heading"
selected>- size -</
option
>
<
option
value
=
"1"
>Very small</
option
>
<
option
value
=
"2"
>A bit small</
option
>
<
option
value
=
"3"
>Normal</
option
>
<
option
value
=
"4"
>Medium-large</
option
>
<
option
value
=
"5"
>Big</
option
>
<
option
value
=
"6"
>Very big</
option
>
<
option
value
=
"7"
>Maximum</
option
>
</
select
>
<
select
onchange
=
"formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;"
>
<
option
class
=
"heading"
selected>- color -</
option
>
<
option
value
=
"red"
>Red</
option
>
<
option
value
=
"blue"
>Blue</
option
>
<
option
value
=
"green"
>Green</
option
>
<
option
value
=
"black"
>Black</
option
>
</
select
>
<
select
onchange
=
"formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;"
>
<
option
class
=
"heading"
selected>- background -</
option
>
<
option
value
=
"red"
>Red</
option
>
<
option
value
=
"green"
>Green</
option
>
<
option
value
=
"black"
>Black</
option
>
</
select
>
</
div
>
<
div
id
=
"toolBar2"
>
<
img
class
=
"intLink"
title
=
"Clean"
onclick
=
"if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};"
src
=
"data:image/gif;base64,R0lGODlhFgAWAIQbAD04KTRLYzFRjlldZl9vj1dusY14WYODhpWIbbSVFY6O7IOXw5qbms+wUbCztca0ccS4kdDQjdTLtMrL1O3YitHa7OPcsd/f4PfvrvDv8Pv5xv///yH5BAEKAB8ALAAAAAAWABYAAAV84CeOZGmeaKqubMteyzK547QoBcFWTm/jgsHq4rhMLoxFIehQQSAWR+Z4IAyaJ0kEgtFoLIzLwRE4oCQWrxoTOTAIhMCZ0tVgMBQKZHAYyFEWEV14eQ8IflhnEHmFDQkAiSkQCI2PDC4QBg+OAJc0ewadNCOgo6anqKkoIQA7"
/>
<
img
class
=
"intLink"
title
=
"Print"
onclick
=
"printDoc();"
src
=
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oEBxcZFmGboiwAAAAIdEVYdENvbW1lbnQA9syWvwAAAuFJREFUOMvtlUtsjFEUx//n3nn0YdpBh1abRpt4LFqtqkc3jRKkNEIsiIRIBBEhJJpKlIVo4m1RRMKKjQiRMJRUqUdKPT71qpIpiRKPaqdF55tv5vvusZjQTjOlseUkd3Xu/3dPzusC/22wtu2wRn+jG5So/OCDh8ycMJDflehMlkJkVK7KUYN+ufzA/RttH76zaVocDptRxzQtNi3mRWuPc+6cKtlXZ/sddP2uu9uXlmYXZ6Qm8v4Tz8lhF1H+zDQXt7S8oLMXtbF4e8QaFHjj3kbP2MzkktHpiTjp9VH6iHiA+whtAsX5brpwueMGdONdf/2A4M7ukDs1JW662+XkqTkeUoqjKtOjm2h53YFL15pSJ04Zc94wdtibr26fXlC2mzRvBccEbz2kiRFD414tKMlEZbVGT33+qCoHgha81SWYsew0r1uzfNylmtpx80pngQQ91LwVk2JGvGnfvZG6YcYRAT16GFtW5kKKfo1EQLtfh5Q2etT0BIWF+aitq4fDbk+ImYo1OxvGF03waFJQvBCkvDffRyEtxQiFFYgAZTHS0zwAGD7fG5TNnYNTp8/FzvGwJOfmgG7GOx0SAKKgQgDMgKBI0NJGMEImpGDk5+WACEwEd0ywblhGUZ4Hw5OdUekRBLT7DTgdEgxACsIznx8zpmWh7k4rkpJcuHDxCul6MDsmmBXDlWCH2+XozSgBnzsNCEE4euYV4pwCpsWYPW0UHDYBKSWu1NYjENDReqtKjwn2+zvtTc1vMSTB/mvev/WEYSlASsLimcOhOBJxw+N3aP/SjefNL5GePZmpu4kG7OPr1+tOfPyUu3BecWYKcwQcDFmwFKAUo90fhKDInBCAmvqnyMgqUEagQwCoHBDc1rjv9pIlD8IbVkz6qYViIBQGTJPx4k0XpIgEZoRN1Da0cij4VfR0ta3WvBXH/rjdCufv6R2zPgPH/e4pxSBCpeatqPrjNiso203/5s/zA171Mv8+w1LOAAAAAElFTkSuQmCC"
>
<
img
class
=
"intLink"
title
=
"Undo"
onclick
=
"formatDoc('undo');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAOMKADljwliE33mOrpGjuYKl8aezxqPD+7/I19DV3NHa7P///yH5BAEKAA8ALAAAAAAWABYAAARR8MlJq7046807TkaYeJJBnES4EeUJvIGapWYAC0CsocQ7SDlWJkAkCA6ToMYWIARGQF3mRQVIEjkkSVLIbSfEwhdRIH4fh/DZMICe3/C4nBQBADs="
/>
<
img
class
=
"intLink"
title
=
"Redo"
onclick
=
"formatDoc('redo');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAMIHAB1ChDljwl9vj1iE34Kl8aPD+7/I1yH5BAEKAAcALAAAAAAWABYAAANKeLrc/jDKSesyphi7SiEgsVXZEATDICqBVJjpqWZt9NaEDNbQK1wCQsxlYnxMAImhyDoFAElJasRRvAZVRqqQXUy7Cgx4TC6bswkAOw=="
/>
<
img
class
=
"intLink"
title
=
"Remove formatting"
onclick
=
"formatDoc('removeFormat')"
src
=
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAABGdBTUEAALGPC/xhBQAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAd0SU1FB9oECQMCKPI8CIIAAAAIdEVYdENvbW1lbnQA9syWvwAAAuhJREFUOMtjYBgFxAB501ZWBvVaL2nHnlmk6mXCJbF69zU+Hz/9fB5O1lx+bg45qhl8/fYr5it3XrP/YWTUvvvk3VeqGXz70TvbJy8+Wv39+2/Hz19/mGwjZzuTYjALuoBv9jImaXHeyD3H7kU8fPj2ICML8z92dlbtMzdeiG3fco7J08foH1kurkm3E9iw54YvKwuTuom+LPt/BgbWf3//sf37/1/c02cCG1lB8f//f95DZx74MTMzshhoSm6szrQ/a6Ir/Z2RkfEjBxuLYFpDiDi6Af///2ckaHBp7+7wmavP5n76+P2ClrLIYl8H9W36auJCbCxM4szMTJac7KzaR3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0fv77//8nLy+7MCcXmyYDAwODS9jM9tcvPypd35pne3ljdjvj26+H2dhYpuENikgfvQeXNmSl3tqepxXsqhXPyc666s+fv1fMdKR3TK72zpix8nTc7bdfhfkEeVbC9KhbK/9iYWHiErbu6MWbY/7//8/4//9/pgOnH6jGVazvFDRtq2VgiBIZrUTIBgCk+ivHvuEKwAAAAABJRU5ErkJggg=="
>
<
img
class
=
"intLink"
title
=
"Bold"
onclick
=
"formatDoc('bold');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAInhI+pa+H9mJy0LhdgtrxzDG5WGFVk6aXqyk6Y9kXvKKNuLbb6zgMFADs="
/>
<
img
class
=
"intLink"
title
=
"Italic"
onclick
=
"formatDoc('italic');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAKEDAAAAAF9vj5WIbf///yH5BAEAAAMALAAAAAAWABYAAAIjnI+py+0Po5x0gXvruEKHrF2BB1YiCWgbMFIYpsbyTNd2UwAAOw=="
/>
<
img
class
=
"intLink"
title
=
"Underline"
onclick
=
"formatDoc('underline');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAKECAAAAAF9vjyH5BAEAAAIALAAAAAAWABYAAAIrlI+py+0Po5zUgAsEzvEeL4Ea15EiJJ5PSqJmuwKBEKgxVuXWtun+DwxCCgA7"
/>
<
img
class
=
"intLink"
title
=
"Left align"
onclick
=
"formatDoc('justifyleft');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JMGELkGYxo+qzl4nKyXAAAOw=="
/>
<
img
class
=
"intLink"
title
=
"Center align"
onclick
=
"formatDoc('justifycenter');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIfhI+py+0Po5y02ouz3jL4D4JOGI7kaZ5Bqn4sycVbAQA7"
/>
<
img
class
=
"intLink"
title
=
"Right align"
onclick
=
"formatDoc('justifyright');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAID/AMDAwAAAACH5BAEAAAAALAAAAAAWABYAQAIghI+py+0Po5y02ouz3jL4D4JQGDLkGYxouqzl43JyVgAAOw=="
/>
<
img
class
=
"intLink"
title
=
"Numbered list"
onclick
=
"formatDoc('insertorderedlist');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAMIGAAAAADljwliE35GjuaezxtHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKSespwjoRFvggCBUBoTFBeq6QIAysQnRHaEOzyaZ07Lu9lUBnC0UGQU1K52s6n5oEADs="
/>
<
img
class
=
"intLink"
title
=
"Dotted list"
onclick
=
"formatDoc('insertunorderedlist');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAMIGAAAAAB1ChF9vj1iE33mOrqezxv///yH5BAEAAAcALAAAAAAWABYAAAMyeLrc/jDKSesppNhGRlBAKIZRERBbqm6YtnbfMY7lud64UwiuKnigGQliQuWOyKQykgAAOw=="
/>
<
img
class
=
"intLink"
title
=
"Quote"
onclick
=
"formatDoc('formatblock','blockquote');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAIQXAC1NqjFRjkBgmT9nqUJnsk9xrFJ7u2R9qmKBt1iGzHmOrm6Sz4OXw3Odz4Cl2ZSnw6KxyqO306K63bG70bTB0rDI3bvI4P///yH5BAEKAB8ALAAAAAAWABYAAAVP4CeOZGmeaKqubEs2CekkErvEI1zZuOgYFlakECEZFi0GgTGKEBATFmJAVXweVOoKEQgABB9IQDCmrLpjETrQQlhHjINrTq/b7/i8fp8PAQA7"
/>
<
img
class
=
"intLink"
title
=
"Add indentation"
onclick
=
"formatDoc('outdent');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAMIHAAAAADljwliE35GjuaezxtDV3NHa7P///yH5BAEAAAcALAAAAAAWABYAAAM2eLrc/jDKCQG9F2i7u8agQgyK1z2EIBil+TWqEMxhMczsYVJ3e4ahk+sFnAgtxSQDqWw6n5cEADs="
/>
<
img
class
=
"intLink"
title
=
"Delete indentation"
onclick
=
"formatDoc('indent');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAOMIAAAAADljwl9vj1iE35GjuaezxtDV3NHa7P///yH5BAEAAAgALAAAAAAWABYAAAQ7EMlJq704650B/x8gemMpgugwHJNZXodKsO5oqUOgo5KhBwWESyMQsCRDHu9VOyk5TM9zSpFSr9gsJwIAOw=="
/>
<
img
class
=
"intLink"
title
=
"Hyperlink"
onclick
=
"var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}"
src
=
"data:image/gif;base64,R0lGODlhFgAWAOMKAB1ChDRLY19vj3mOrpGjuaezxrCztb/I19Ha7Pv8/f///yH5BAEKAA8ALAAAAAAWABYAAARY8MlJq7046827/2BYIQVhHg9pEgVGIklyDEUBy/RlE4FQF4dCj2AQXAiJQDCWQCAEBwIioEMQBgSAFhDAGghGi9XgHAhMNoSZgJkJei33UESv2+/4vD4TAQA7"
/>
<
img
class
=
"intLink"
title
=
"Cut"
onclick
=
"formatDoc('cut');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAIQSAB1ChBFNsRJTySJYwjljwkxwl19vj1dusYODhl6MnHmOrpqbmpGjuaezxrCztcDCxL/I18rL1P///yH5BAEAAB8ALAAAAAAWABYAAAVu4CeOZGmeaKqubDs6TNnEbGNApNG0kbGMi5trwcA9GArXh+FAfBAw5UexUDAQESkRsfhJPwaH4YsEGAAJGisRGAQY7UCC9ZAXBB+74LGCRxIEHwAHdWooDgGJcwpxDisQBQRjIgkDCVlfmZqbmiEAOw=="
/>
<
img
class
=
"intLink"
title
=
"Copy"
onclick
=
"formatDoc('copy');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAIQcAB1ChBFNsTRLYyJYwjljwl9vj1iE31iGzF6MnHWX9HOdz5GjuYCl2YKl8ZOt4qezxqK63aK/9KPD+7DI3b/I17LM/MrL1MLY9NHa7OPs++bx/Pv8/f///yH5BAEAAB8ALAAAAAAWABYAAAWG4CeOZGmeaKqubOum1SQ/kPVOW749BeVSus2CgrCxHptLBbOQxCSNCCaF1GUqwQbBd0JGJAyGJJiobE+LnCaDcXAaEoxhQACgNw0FQx9kP+wmaRgYFBQNeAoGihCAJQsCkJAKOhgXEw8BLQYciooHf5o7EA+kC40qBKkAAAGrpy+wsbKzIiEAOw=="
/>
<
img
class
=
"intLink"
title
=
"Paste"
onclick
=
"formatDoc('paste');"
src
=
"data:image/gif;base64,R0lGODlhFgAWAIQUAD04KTRLY2tXQF9vj414WZWIbXmOrpqbmpGjudClFaezxsa0cb/I1+3YitHa7PrkIPHvbuPs+/fvrvv8/f///yH5BAEAAB8ALAAAAAAWABYAAAWN4CeOZGmeaKqubGsusPvBSyFJjVDs6nJLB0khR4AkBCmfsCGBQAoCwjF5gwquVykSFbwZE+AwIBV0GhFog2EwIDchjwRiQo9E2Fx4XD5R+B0DDAEnBXBhBhN2DgwDAQFjJYVhCQYRfgoIDGiQJAWTCQMRiwwMfgicnVcAAAMOaK+bLAOrtLUyt7i5uiUhADs="
/>
</
div
>
<
div
id
=
"textBox"
contenteditable
=
"true"
><
p
>Lorem ipsum</
p
></
div
>
<
p
id
=
"editMode"
><
input
type
=
"checkbox"
name
=
"switchMode"
id
=
"switchBox"
onchange
=
"setDocMode(this.checked);"
/> <
label
for
=
"switchBox"
>Show HTML</
label
></
p
>
<
p
><
input
type
=
"submit"
value
=
"Send"
/></
p
>
</
form
>
</
body
>
</
html
>
|
Resources
- mozilla.org's rich-text editing Specification
- mozilla.org's rich-text editing Demo
- Converting an app using document.designMode from IE to Mozilla at mozilla.org
- MSDN: designMode Property
- MSDN: How to Create an HTML Editor Application
- A closed source, cross-browser rich-text editing demo
- xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.
- Firefox 3 and contentEditable
Original Document Information
- Author(s): Doron Rosenberg, Netscape Communications
- Published: 04 Apr 2003
- Revised: 01 Jul 2003
- Revised: 24 Apr 2005, Joel Coreson
- Revised: 28 Nov 2006, Ken Kuhns, ComputronicsUSA
- Revised: 19 Dec 2007, Mark Finkle