HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用编辑器把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。大部分编辑器 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
编辑器一种比较简单的做法就是使IFrame可写，用作编辑框。
例如：在页面中有一ID为'HtmlEdit'的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
代码很乱且难读，如果你真的有兴趣研究的话，请下载。如果没有很高的兴趣，权当娱乐。