如何开发HTML编辑器

作者佚名技术来源 NET编程浏览发布时间 2012-05-20

;
}

function　SelectionRange(doc,　range)
{
　　 //获取选中的内容的HTML
　　 this.GetSelectedHtml　=　function()
　　 {
　　　　 if　(range　==　null)　return　"";

　　　　 if　(browser.msie)
　　　　 {
　　　　　　 if　(range.htmlText　!=　undefined)　return　 range.htmlText;
　　　　　　 else　return　"";
　　　　 }
　　　　 else　if　(browser.firefox　||　browser.chrome)
　　　　 {
　　　　　　 return　GetInnerHTML(range.cloneContents ().childNodes);
　　　　 }
　　　　 else
　　　　 {
　　　　　　 return　"";
　　　　 }
　　 }

　　 //用html替换选中的内容的HTML
　　 this.Replace　=　function(html)
　　 {
　　　　 if　(range　!=　null)
　　　　 {
　　　　　　 if　(browser.msie)
　　　　　　 {
　　　　　　　　 if　(range.pasteHTML　!=　undefined)
　　　　　　　　 {
　　　　　　　　　　 //当前选中html可能以为某种原因（例如点击了另一个 DIV）而丢失，重新选中
　　　　　　　　　　 range.select();
　　　　　　　　　　 range.pasteHTML(html);
　　　　　　　　　　 return　true;
　　　　　　　　 }
　　　　　　 }
　　　　　　 else　if　(browser.firefox　||　browser.chrome)
　　　　　　 {
　　　　　　　　 if　(range.deleteContents　!=　undefined　&& 　range.insertNode　!=　undefined)
　　　　　　　　 {
　　　　　　　　　　 //将文本html转换成DOM对象
　　　　　　　　　　 var　temp　=　doc.createElement("DIV");
　　　　　　　　　　 temp.innerHTML　=　html;

　　　　　　　　　　 var　elems　=　[];
　　　　　　　　　　 for　(var　i　=　0;　i　<　 temp.childNodes.length;　i++)
　　　　　　　　　　 {
　　　　　　　　　　　　 elems.push(temp.childNodes[i]);
　　　　　　　　　　 }

　　　　　　　　　　 //删除选中的节点
　　　　　　　　　　 range.deleteContents();

　　　　　　　　　　 //将html对应的节点(即temp的所有子节点)逐个插入到 range中，并从temp中删除
　　　　　　　　　　 for　(var　i　in　elems)
　　　　　　　　　　 {
　　　　　　　　　　　　 temp.removeChild(elems[i]);
　　　　　　　　　　　　 range.insertNode(elems[i]);
　　　　　　　　　　 }
　　　　　　　　　　 return　true;
　　　　　　　　 }
　　　　　　 }
　　　　 }
　　　　 return　false;
　　 }
}

与此同时，还实现了一个函数GetSelectionRange用于获取当前选中文本对应的SelectionRange对象，

function　GetSelectionRange(win) { 　　 var　range　=　null; 　　 if　(browser.msie) 　　 { 　　　　 range　=　win.document.selection.createRange(); 　　　　 if　(range.parentElement().document　!=　win.document) 　　　　 { 　　　　　　 range　=　null; 　　　　 } 　　 } 　　 else　if　(browser.firefox　||　browser.chrome) 　　 { 　　　　 var　sel　=　win.getSelection(); 　　　　 if　(sel.rangeCount　>　0)　range　=　sel.getRangeAt(0); 　else　range　=　null; 　　 } 　　 return　new　SelectionRange(win.document,　range); }　

2.4 修改选中的HTML的样式

修改选中的HTML的样式方法并不复杂，只需要将HTML转成DOM对象，然后递归的设置每一个节点对应的样式的值即可,具体代码如下：

function　SetNodeStyle(doc,　node,　name,　value) { 　　 if　(node.innerHTML　==　undefined) 　　

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: Asp.net 3.5控件和组件开发技术系列—从零开始开发服务器控件（下）下一篇: IIS6.0手动安装与配置asp.net2.0全过程

关于如何开发HTML编辑器的所有评论

随机推荐