如何开发HTML编辑器

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

{
　　　　 return　node;
　　 }
　　 else
　　 {
　　　　 node.style[name]　=　value;

　　　　 for　(var　i　=　0;　i　<　node.childNodes.length;　i++)
　　　　 {
　　　　　　 var　cn　=　node.childNodes[i];
　　　　　　 if　(node.innerHTML　!=　undefined)
　　　　　　 {
　　　　　　　　 SetNodeStyle(doc,　cn,　name,　value);
　　　　　　 }
　　　　 }

　　　　 return　node;
　　 }
}

function　SetStyle(doc,　html,　name,　value)
{
　　 var　dom　=　doc.createElement("DIV");
　　 dom.innerHTML　=　html;

　　 for　(var　i　=　0;　i　<　dom.childNodes.length;　i++)
　　 {
　　　　 var　node　=　dom.childNodes[i];

　　　　 if　(node.innerHTML　==　undefined)
　　　　 {
　　　　　　 //如果是文本节点，则转换转换成span　
　　　　　　 var　span　=　doc.createElement("SPAN");
　　　　　　 span.style[name]　=　value;
　　　　　　 if　(node.nodeValue　!=　undefined)　span.innerHTML　=　 node.nodeValue.replace(/\</ig,　function()　{　return　"<"; 　});
　　　　　　 else　if　(node.textContent　!=　undefined)　 span.innetHTML　=　node.textContent.replace(/\</ig,　function()　{　 return　"<";　});
　　　　　　 //替换掉文本节点　
　　　　　　 dom.replaceChild(span,　node);
　　　　 }
　　　　 else
　　　　 {
　　　　　　 SetNodeStyle(doc,　node,　name,　value);
　　　　 }
　　 }

　　 return　dom.innerHTML;
}　

2.5 示例

使用以上的代码，就可以相当方便的实现一个HTML编辑器，例如，以下代码实现将选中文本的字体大小设置为32px：

var　range　=　GetSelectionRange(editorWindow); var　html　=　SetStyle(editorDoc,　range.GetSelectedHtml(), 　"fontSize",　"32px"); range.Replace(html);

同理，你可以实现设置行距，缩进，插入图片等功能。

3.总结

本文给出的代码兼容IE，Firefox和Chrome，如果有其它问题可以通过EMail或者WebIM与我联系。

本文配套源码

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

上一页 1 2 3

分享到：更多

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

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

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

随机推荐