聊聊开发富文本编辑器：execCommand方法

<div contenteditable="true"></div>

<iframe id="edit" name="edit"></iframe>

var frame = document.getElementById('edit');
var obj = frame.contentDocument || frame.contentWindow.document;
obj.designMode = 'on';

var frame = window.frames['eidt'];
frame.document.designMode = 'on';

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

• aCommandName：String类型，命令名称
• aShowDefaultUI：Boolean类型，默认为false，是否展示用户界面，一般设为false。Mozilla没有实现。
• aValueArgument：String类型，一些命令需要额外的参数值（比如insertHTML需要提供HTML内容），默认为null，一般不需要参数时都使用null。

backColor (用法：document.execCommand('backColor',bfalseb,Color); )  
改变文档的背景颜色。 在styleWithCss模式，它影响的是包含元素的背景。 这个命令要求提供一个颜色值<color>作为第三个参数 (Internet Explorer 使用这个命令设置文本背景色)  

bold （用法: document.execCommand('Bold','false',null); ）  
对选中文本或者插入元素设置、取消粗体显示. (Internet Explorer 使用<strong>标签 而不是<b>标签。)

contentReadOnly  
转化文档进入只读或者可编辑模式. 这个命令要求提供给一个boolean值给第3个参数(ie不支持)。  

copy   用法：document.execCommand('copy','false',null);   
把当前选中区域复制到系统剪贴板。由于启用这个功能的条件因浏览器不同而不同，所以使用此功能时，请先检查浏览器是否支持。
 
createLink
当有选中区域的时候，将选中区域创建为一个锚点，需要提供一个URI给第3个参数. 这个URI必须至少包含一个字符，空白字符也可。(Internet Explorer会创建一个URI为空的a标签)  
cut     用法：document.execCommand('cut','false',null);   
剪切选中文本到剪切板. 同copy一样需要开启剪切板功能。  

decreaseFontSize  
给选中文本或者插入元素添加一个small标签。(Internet Explorer不支持)  

delete  删除当前选中区域

enableInlineTableEditing  
开启或禁用表的行和列的插入删除功能 ( Internet Explorer不支持)  

enableObjectResizing  
开启或禁用图片或者其他可调整元素大小的（resize）功能 ( Internet Explorer不支持)  
fontName  用法：document.execCommand('fontName','false',sFontName);   
改变选中文本或者插入元素的字体。需要给第3个参数提供一个字体值（例如："Airal"）  

fontSize  用法：document.execCommand('fontSize','false',sSize|iSize);   
改变选中文本或者插入元素的字体大小。需要给第3个参数提供一个数字  

foreColor  
改变选中文本或者插入元素的字体颜色。需要给第3个参数提供一个颜色值

formatBlock
添加一个HTML块式标签在包含当前选择的行，如果已经存在了，更换包含该行的块元素（在Firefox中的blockquote例外，它将包含任何包含块元素）。需要提供一个标签名称作为参数（比如：H1、P、DL、BLCOKQUOTE等）（IE仅支持标题标签H1-H6，ADDRESS和PRE，使用时还必须包含标签分隔符<>，比如<H1>）

forwardDelete
删除光标所在位置的字符，和按下删除键一样。

heading
添加一个标题标签在光标处或所选文字上。需要提供标签名称字符串作为参数（比如：H1、H6）（IE和Safari不支持）

hiliterColor
更改选择或插入点的背景颜色。需要提供一个颜色值作为参数。（IE不支持）

increaseFontSize
在选择或插入点周围添加一个BIG标签（IE不支持）

indent
取消或缩进选择或插入点所在的行。

insertBrOnReturn
控制当按下Enter键时，是插入br标签还是把当前块元素变成两个（IE不支持）

insertHorizontalRule
在插入点插入一个水平线（删除选中的部分）

insertHTML
在插入点插入一个HTML字符串（删除选中部分）。需要提供一个HTML字符串作为参数（IE不支持）

insertImage
在插入点插入一张图片（删除选中部分）。需要提供一个image src URI作为参数。这个URI至少包含一个字符（空字符也行）。（IE会创建一个值为null的链接）

insertOrderedList
在插入点或选中文字上创建一个有序列表

insertUnorderedList
在插入点或选中文字上创建一个无序列表

insertParagraph
在选择或当前行周围插入一个段落。（IE会在插入点插入一个段落并删除选中部分）

insertText
在光标插入位置插入文本内容或覆盖所选的文本内容

italic
在光标插入点开启或关闭斜体字。（IE使用<em>标签，而不是<i>）

justifyCenter
对光标插入位置或所选内容进行文字居中

justifyFull
对光标插入位置或所选内容进行文本对齐（两端对齐）

justifyLeft
对光标插入位置或所选内容进行文本左对齐

justifyRight
对光标插入位置或所选内容进行文本右对齐

outdent
对光标插入行货所选行内容减少缩进量

paste
在光标位置黏贴剪贴板的内容。（对选中内容替换）

redo
重做被撤销的操作

removeFormat
对所选内容去除所有格式（比如：加粗）。

selectAll
选中编辑区里的全部内容

strikeThrough
在光标插入点开启或关闭删除线

subscript
在光标插入点开启或关闭下角标

superscript
在光标插入点开启或关闭上角标

underline
在光标插入点开启或关闭下划线

undo
撤销最近执行的命令

unlink
去除所选的锚链接的<a>标签

useCSS
切换使用HTML tags还是CSS来生成标记。需要一个布尔值作为参数。该属性已废除，使用styleWithCSS代替。

styleWithCSS
用这个取代useCSS命令。切换使用HTML tags还是CSS来生成标记。需要一个布尔值作为参数。（false使用CSS，true使用HTML）

function setContextMenu() {   
  var edit = document.querySelector('.edit');   
  edit.oncontextmenu = function(e) {   
    e = e || window.event;   
    e.preventDefault();         

    var top = e.pageY || e.clientY + document.body.scrollTop + document.docuemntElement.scrollTop;       top -= this.scrollTop;   
    var left = e.pageX || e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;   
    left -= this.scrollLeft;

    var menu = '<div class="contextmenu" style="background:#fff;color:#333;padding:10px;position:fixed;top:' + top + 'px;left:' + left + 'px">';   
    menu += '<a>右键菜单</a>';   
    menu += '</div>';   
    var box = document.createElement('div');   
    box.innerHTML = menu;   
    var menuBox = document.querySelector('.contextmenu');   
    if(menuBox) {   
      menuBox.style.top = top + 'px';   
      menuBox.style.left = left + 'px';   
    } else {   
      document.body.appendChild(box.firstChild);       
    };     
  }; 
  /*失去焦点时关闭右键菜单*/
   window.addEventListener('click',function(e){   
    e = e || window.event;     
    var menuBox = document.querySelector('.contextmenu');
    if(menuBox){
      var target = e.target;
      var parent = target.parentNode;   
      if(parent.nodeName != 'DIV' || !parent.classList.contains('contextmenu')){ 
        document.body.removeChild(menuBox);   
      } 
    }  
  }); 
};