Rich-Text Editing in Mozilla -

wangxiaoxu

浏览: 565141 次
性别:
来自: 北京

最近访客更多访客>>

loginboot

healthylife

lwj_199011

nanber1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-11 ( 37)
2015-10 ( 13)
2015-09 ( 10)
更多存档...

Rich-Text Editing in Mozilla

博客分类：

javascript

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.

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:

<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:

<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

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

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

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

<!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 &lt;h1&gt;</option>

<option value="h2">Title 2 &lt;h2&gt;</option>

<option value="h3">Title 3 &lt;h3&gt;</option>

<option value="h4">Title 4 &lt;h4&gt;</option>

<option value="h5">Title 5 &lt;h5&gt;</option>

<option value="h6">Subtitle &lt;h6&gt;</option>

<option value="p">Paragraph &lt;p&gt;</option>

<option value="pre">Preformatted &lt;pre&gt;</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/I1////yH5BAEKAAcALAAAAAAWABYAAANKeLrc/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+P2ClrLIYl8H9W36auJCbCxM4szMTJac7Kza////R3H1w2cfWAgafPbqs5g7D95++/P1B4+ECK8tAwMDw/1H7159+/7r7ZcvPz4fOHbzEwMDwx8GBgaGnNatfHZx8zqrJ+4VJBh5CQEGOySEua/v3n7hXmqI8WUGBgYGL3vVG7fuPK3i5GD9/fja7ZsMDAzMG/Ze52mZeSj4yu1XEq/ff7W5dvfVAS1lsXc4Db7z8C3r8p7Qjf///2dnZGxlqJuyr3rPqQd/Hhyu7oSpYWScylDQsd3kzvnH738wMDzj5GBN1VIWW4c3KDon7VOvm7S3paB9u5qsU5/x5KUnlY+eexQbkLNsErK61+++VnAJcfkyMTIwffj0QwZbJDKjcETs1Y8evyd48toz8y/ffzv//vPP4veffxpX77z6l5JewHPu8MqTDAwMDLzyrjb/mZm0JcT5Lj+89+Ybm6zz95oMh7s4XbygN3Sluq4Mj5K8iKMgP4f0////fv77//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,R0lGODlhFgAWAKECAAAAAF9vj////////yH5BAEAAAIALAAAAAAWABYAAAIrlI+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>

Note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.

Resources

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

分享到：

execCommand method (document, TextRange, ... | 【转】关于ＪＳ的contentDocument,contentE ...

2013-02-05 16:41
浏览 2230
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Rich-Text Editing in Mozilla

https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

Introduction

Setting Up Rich-Text Editing

Executing Commands

Internet Explorer Differences

Examples

Example 1

Example 2

Example: a simple but complete Rich Text Editor

Resources

Original Document Information

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Rich-Text Editing in Mozilla

https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla

Introduction

Setting Up Rich-Text Editing

Executing Commands

Internet Explorer Differences

Examples

Example 1

Example 2

Example: a simple but complete Rich Text Editor

Resources

Original Document Information

评论

发表评论

相关推荐

40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三

241个jquery插件—jquery插件大全

前端ui的js框架

2014 年最火的21个JavaScript框架

Bootstrap 栅格系统

自定义Bootstrap

使用python/casperjs编写终极爬虫-客户端App的抓取

使用Selenium和PhantomJS解析带JS的网页

数据抓取的艺术（一）：Selenium+Phantomjs数据抓取环境配置

ubuntu12.04 下安装nodejs【整理】

Ubuntu安装nodeJS

纯js页面跳转整理

细说Cookie

JavaScript Source Map 详解

主题：50个令人惊奇的jQuery插件

jquery触发事件

jquery事件命名空间

jQuery的事件命名空间-Namespaced Events

JQuery自定义事件的应用 JQuery最佳实践

jquery插件开发

最近访客更多访客>>