HTML编辑器原理剖析

HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用编辑器把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。大部分编辑器 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

编辑器一种比较简单的做法就是使IFrame可写,用作编辑框。

例如:在页面中有一ID为'HtmlEdit'的IFrame

在JS中就可修改IFrame的属性使其可写。
1
2
3
4
5
6
7
8
9
10
11
var editor =
   document.getElementById("HtmlEdit").contentWindow;
//只需键入以下设定,iframe立刻变成编辑器。
editor.document.designMode = 'On';
editor.document.contentEditable = true;
//为了兼容FireFox,必须创建一个新的document。
editor.document.open();
editor.document.write("
   <html><body><p style='line-height:1.5em'>
       Minieditor</p></body></html>");
editor.document.close();

这样一个简单的编辑器原型就出来了。

接下来要做的就是使用JS提供的document.execCommand函数向iframe中添加HTML代码,由于添加的过程iframe会重新渲染页面,所以就会有所见即所得效果。

函数原型:document.execCommand(sCommand[,交互方式, 动态参数])

例如实现字体加粗:

1
2
3
4
5
6
function fontEdit(com,s)
{
   editor.focus();
   //所有字体特效只是使用execComman()就能完成。
   editor.document.execCommand(com, false,s);
}

我们也可以直接向iframe中添加html代码:

1
2
3
4
5
6
7
8
9
function insertHtml(sHtml)      //插入超链接、图片、flash
{
   editor.focus();
   if(editor.document.selection)
       editor.document.selection.createRange().pasteHTML(sHtml) ;
   else
       editor.document.execCommand('InsertHtml',false,sHtml);
}

例如插入一个超链接:

1
insertHtml('<a href="#">#####</a>');

类似的还有很多,由于网上已经有很多相关例子,所以不再详细讲解。

但是这种方法还存在许多问题。

例如:

|- 各个浏览器对execcommand的支持程度不同。

|- 各个浏览器对命令翻译的html代码不同。

|- 用户交互性差等。。

所以现在一些开源的编辑器都是把execcommand函数以及它之中的命令重写,解决各个浏览器之间的差异,能够满足用户的基本需求才是重中之重。

现在项目中常用的编辑器有:UEditor、CKEditor,还有一些在线的HTML编辑器等。

也附上我仿照UEditor界面写的一个编辑器源码。

在线演示:http://yueqian.sinaapp.com/app/seceditor/seceditor.html

代码很乱且难读,如果你真的有兴趣研究的话,请下载。如果没有很高的兴趣,权当娱乐。

发表评论

电子邮件地址不会被公开。 必填项已用*标注