快速业务通道

如何开发HTML编辑器

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

在线的HTML内容编辑器为用户提供文本的样式控制,例如文字的颜色、字体大 小等。虽然现在网上有不少功能强大的编辑器(如:FCKEditor),但是在使用中 需要许多复杂的配置,而且代码往往比较“臃肿”。本文的目的就是介绍如何开 发一个HTML编辑器。应用本文介绍的方法,可以方便的开发出满足自己需求的, 代码相对比较精简的HTML编辑器。以下是一个应用本文方法开发的HTML编辑器, 实现了一些简单的功能:

开发方法如下:

1.添加一个可编辑的iframe

实现HTML编辑器的第1步就是在网页中放置一个可编辑的iframe用来输入文本 ,使iframe可编辑方法相当简单,只需要将iframe的designMode设置为on即可, 具体步骤如下:

var editor = document.getElementById("IFRAME的ID");

var editorDoc = editor.contentWindow.document;
var editorWindow = editor.contentWindow;

editorDoc.designMode = "on";

editorDoc.open();
editorDoc.write("<html><head></head><body  style=''margin:0px; padding:  0px;''></body></html>");
editorDoc.close();

2.设置选中文本的样式

设置选中文本样式的方法最简单的方式就是使用document.execCommand,但是 execCommand功能比较局限,有时不能满足需求,例如:execCommand设置字体大 小只能是1-7,不能使用像素大小,而且如果你在点击工具栏按钮到调用 execCommand的过程中点击了其他的 DIV,iframe的选中内容会消失,这时调用 execCommand是无效的。因此本文介绍另一种方法,基本思路如下:

(1) 获取选中的HTML;

(2) 修改HTML的样式;

(3) 用修改后的HTML替换选中的HTML。

2.1 获取选中的HTML

在不同的浏览器中获取选中的HTML的方法是不同的,在IE中可以使用

var range = document.selection.createRange() 

在Firefox,Chrome中则使用

var range = window.getSelection().getRangeAt(0); 

2.2 替换选中的HTML

通过2.1的方法获取了表示选中内容的对象后,就可以调用其方法来替换掉选 中的内容。在不同的浏览器中替换选中的HTML的方法有所差异,在IE中可以只需 调用range.pasteHTML就行了,在Firefox,Chrome中则使用range.deleteContents 和 range.insertNode 两个方法来实现

2.3 封装一个操作选中HTML的类

由于2.1中获取的range对象的方法在不同浏览器中差异很大,因此,为了方便 实现2.1和2.2提到的两个操作,封装了一个操作选中HTML的类SelectionRange, 该类有两个方法,GetSelectedHtml和Replace,分别用于获取HTML和替换HTML。 其代码如下:

//用于记录浏览器的类型
var browser = {};

var ua = navigator.userAgent.toLowerCase();

browser.msie = (/msie ([\d.]+)/).test(ua);
browser.firefox = (/firefox\/([\d.]+)/).test(ua);
browser.chrome = (/chrome\/([\d.]+)/).test(ua);

//获取多个节点的HTML
function GetInnerHTML(nodes)
{
   var builder = [];
   for (var i = 0; i < nodes.length; i++)
   {
     if (nodes[i].nodeValue != undefined)
     {
       builder.push(nodes[i].innerHTML);
     }
     else
     {
       if (nodes[i].textContent) builder.push(nodes [i].textContent.replace(/\</ig, function() { return "<";  }));
       else if (nodes[i].nodeValue) builder.push(nodes [i].nodeValue.replace(/\</ig, function() { return "<";  }));
     }
   }
   return builder.join("")

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

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号