html在线编辑器 document.execCommand应用

背景： CREAT需要进行文本分析，主要的 任务就是从一大段原始需求文本中，通过人工或者自动的手段，识别出有用的元素，并打上标记。由于自然文本的任意性，用自动的方法无法完全精确地得出文本的 处理结果，即使是人工处理，也往往需要进行几轮迭代式的分析处理。 Web编辑器即使设计来支持人工处理的这一过程的。

实现说明：

IFrame作为编辑器主体。

设置一下iframe的属性，iframe即可作为编辑器了。

<iframe frameborder="0" id="WebEditor" style="border: 1px dashed black;
height: 320px; width: 760px"></iframe>
<script language="javascript">
Editor = document.getElementById("WebEditor").contentWindow;
Editor.document.designMode = "on";//使document处于可编辑状态
Editor.document.open();//For FF, 打开新的document以便编辑新内容
//Editor.document.write("");//可以设置header信息等， Iframe可以看成一个独立的html页面
Editor.document.close();//关闭document，强制发送数据显示
</script>

 

Javascript处理文本格式

调用execCommand函数处理文本，可以实现粗斜下划、对齐方式、超链接、字体(大小、颜色等功能) execCommand函数的语法：

bSuccess = object . execCommand ( sCommand , bUserInterface , vValue )

    document.execCommand() 解析

 

function format(what, opt)
{
     Editor.focus();
     Editor.document.execCommand(what, false, opt);
}

 

识别选择的文本，操纵DOM

这里有几个FF和IE不同的地方，一个是回车，IE下是<p>,比FF的<br/>空了很多，解决方法是重载编辑器document的回车事件：

Editor.document.onkeypress = fnKeypress;
function fnKeypress(){
    if(document.all){
        var ev = Editor.event;
        if(ev.keyCode==13 && !ev.shiftKey){//判断回车键
            var s = Editor.document.selection;
            if (s!=null){
                var r = s.createRange();
                if (r!=null) {
                     r.pasteHTML("<BR/>");
                     r.select();//将光标移动到新行
                 }
             }
            return false;
         }
     }
}

处理选择的文本：

function message()
{
    if(document.all)//如果是 IE. (虽然，FF也可以用document.all)
     alert(Editor.document.selection.createRange().text);
    else{
        //alert(Editor.document.getSelection());
         alert(Editor.getSelection());
        var selection = Editor.getSelection().getRangeAt(0);
        var linkElement = Editor.document.createElement("a"); //创建一个新的<A>节点
         linkElement.href = "http://asers.blog.sohu.com";//设置<A>节点的href属性
         selection.surroundContents(linkElement);//加入超链接
     }
}

 

插入html代码：

 

function insert(html)
{
    debugger;
    if(window.event)
     Editor.document.selection.createRange().pasteHTML(html);
    else
     format("insertHTML", html);
}

 

Demo：

web编辑器demo

 

IE和Firefox 对于相同的源代码解析有所有不同

JS的IE和FF兼容性问题的汇总小结

Gecko DOM Reference

http://www.cnblogs.com/oakley/archive/2008/04/15/1154816.html

execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令。处理Html数据时常用
如下格式：document.execCommand(sCommand[,交互方式, 动态参数]) ，其中：sCommand为指令参数（如下例中的"2D-Position"），交互方式参数如果是true的话将显示对话框，如果为false的话，则 不显示对话框（下例中的"false"即表示不显示对话框），动态参数一般为一可用值或属性值（如下例中的"true"）。

document.execCommand("2D-Position","false","true");
下面列出的是指令参数及意义

• 2D-Position 允许通过拖曳移动绝对定位的对象。
• AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
• BackColor 设置或获取当前选中区的背景颜色。
• BlockDirLTR 目前尚未支持。
• BlockDirRTL 目前尚未支持。
• Bold 切换当前选中区的粗体显示与否。
• BrowseMode 目前尚未支持。
• Copy 将当前选中区复制到剪贴板。
• CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
• CreateLink 在当前选中区上插入超级链接，或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
• Cut 将当前选中区复制到剪贴板并删除之。
• Delete 删除当前选中区。
• DirLTR 目前尚未支持。
• DirRTL 目前尚未支持。
• EditMode 目前尚未支持。
• FontName 设置或获取当前选中区的字体。
• FontSize 设置或获取当前选中区的字体大小。
• ForeColor 设置或获取当前选中区的前景(文本)颜色。
• FormatBlock 设置当前块格式化标签。
• Indent 增加选中文本的缩进。
• InlineDirLTR 目前尚未支持。
• InlineDirRTL 目前尚未支持。
• InsertButton 用按钮控件覆盖当前选中区。
• InsertFieldset 用方框覆盖当前选中区。
• InsertHorizontalRule 用水平线覆盖当前选中区。
• InsertIFrame 用内嵌框架覆盖当前选中区。
• InsertImage 用图像覆盖当前选中区。
• InsertInputButton 用按钮控件覆盖当前选中区。
• InsertInputCheckbox 用复选框控件覆盖当前选中区。
• InsertInputFileUpload 用文件上载控件覆盖当前选中区。
• InsertInputHidden 插入隐藏控件覆盖当前选中区。
• InsertInputImage 用图像控件覆盖当前选中区。
• InsertInputPassword 用密码控件覆盖当前选中区。
• InsertInputRadio 用单选钮控件覆盖当前选中区。
• InsertInputReset 用重置控件覆盖当前选中区。
• InsertInputSubmit 用提交控件覆盖当前选中区。
• InsertInputText 用文本控件覆盖当前选中区。
• InsertMarquee 用空字幕覆盖当前选中区。
• InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
• InsertParagraph 用换行覆盖当前选中区。
• InsertSelectDropdown 用下拉框控件覆盖当前选中区。
• InsertSelectListbox 用列表框控件覆盖当前选中区。
• InsertTextArea 用多行文本输入控件覆盖当前选中区。
• InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
• Italic 切换当前选中区斜体显示与否。
• JustifyCenter 将当前选中区在所在格式化块置中。
• JustifyFull 目前尚未支持。
• JustifyLeft 将当前选中区所在格式化块左对齐。
• JustifyNone 目前尚未支持。
• JustifyRight 将当前选中区所在格式化块右对齐。
• LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观，而不是只在移动或缩放完成后更新。
• MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
• Open 目前尚未支持。
• Outdent 减少选中区所在格式化块的缩进。
• OverWrite 切换文本状态的插入和覆盖。
• Paste 用剪贴板内容覆盖当前选中区。
• PlayImage 目前尚未支持。
• Print 打开打印对话框以便用户可以打印当前页。
• Redo 目前尚未支持。
• Refresh 刷新当前文档。
• RemoveFormat 从当前选中区中删除格式化标签。
• RemoveParaFormat 目前尚未支持。
• SaveAs 将当前 Web 页面保存为文件。
• SelectAll 选中整个文档。
• SizeToControl 目前尚未支持。
• SizeToControlHeight 目前尚未支持。
• SizeToControlWidth 目前尚未支持。
• Stop 目前尚未支持。
• StopImage 目前尚未支持。
• StrikeThrough 目前尚未支持。
• Subscript 目前尚未支持。
• Superscript 目前尚未支持。
• UnBookmark 从当前选中区中删除全部书签。
• Underline 切换当前选中区的下划线显示与否。
• Undo 目前尚未支持。
• Unlink 从当前选中区中删除全部超级链接。
• Unselect 清除当前选中区的选中状态。

 

更实用的例子：

<button onclick="document.execCommand('CreateLink')">创建连接</button>