自制HTML编辑器-优快云博客

======================================================
注：本文源代码点此下载
======================================================

在线的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("");

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

与此同时,还实现了一个函数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)

{

return node;

}

else

{

node.style[name] = value;

for (var i = 0; i

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与我联系。

作者:卢春城

e-mail:mrlucc@126.com

出处:http://lucc.cnblogs.com/

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/

如何开发HTML编辑器