Javascript实现web编辑器-兼容FF和IE

背景： 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);
}