打造自己的Html文本编辑控件

为什么要重复发明轮子?

目前有很多开源的Html编辑器可以直接用,这些编辑器功能丰富,开发使用也很方便。但实际使用过程中只需要其中一小部分功能,或者需要扩展一些特殊功能,所以就下决心研究这些开源编辑器代码以便进行扩展。研究过程并不顺利,主要是本人的Javascript水平有限,虽说是开源但注释并不详细,介绍这方面原理的中文资料也很少,好不容易看懂之后觉得有必要自己写一个来加深理解,另外自己写一个的话在版权方面也可以减少一些不必要的麻烦。

本文结束时会给出源代码下载,代码都是本人亲自写的,没有版权上的麻烦,大家可以用于随意使用(包括商业用途)。经过测试,在FF、IE6、IE7中运行正常,不过事先声明可能存在bug,请谨慎使用且后果自负 :-)

HTML编辑器的构造

打造自己的Html文本编辑控件
  1. 工具栏区
  2. Html编辑区
    内嵌的一个iframe,通过工具栏控制iframe中页面内容来实现编辑;
  3. 源码编辑区
    一般使用textarea来实现源码的查看和编辑,在切换时将Html编辑区的内容写入textarea或将textarea的内容写入到Html编辑区;
即见即所得编辑功能的关键
Html编辑器的关键就是要让Html编辑区的iframe中显示的页面具有编辑功能,这个代码比较简单:
var  fdoc  =   this ._getEditAreaFrame().document;  //  获取iframe帧页面的document对象
document.designMode  =   " on " //  设置页面具有编辑功能
//
 为了兼容非IE浏览器,增加一句
if ( ! Prototype.Browser.IE) document.execCommand( " useCSS " false true );

引自richeditor.js文件第35行。

实现格式类命令

格式类命令,如:字体、字号、对齐、斜体、加粗、编号、缩进、背景前景色等。其实都是获取到Html编辑区iframe的document对象,调用document.execCommand()方法,传递不同的参数即可实现,具体调用参数请参考源代码,更多的用法请查阅各浏览器的开发文档。

richeditor.js文件第71行的format函数就是执行格式类命名的函数。

实现插入类命令

插入类命令,如:插入超链接、插入图片、插入表格等,主要分两种方式来实现。一种方式还是调用document.execCommand()方法,如插入超链接和插入图片。另一种方式是直接向当前光标位置插入一段Html代码,比如插入表格就是采用这种方式,通常对于比较复杂的插入都是采用这种方式。

直接插入Html代码到当前光标处的难点主要是当前光标位置的获取,在这个问题上IE比较容易解决,而非IE浏览器解决起来就麻烦一些,具体方法请查看richeditor.js文件第346行的_insertHTML()方法。

最后的几点补充

需要配合prototype.js框架库1.6.0.2使用。

源代码中使用的工具栏图标大都是在网上找的,如发现类似也不要奇怪,只有一个是自己画,样子较丑,估计大家很容易就能认出来。

源码下载 http://files.cnblogs.com/rrooyy/HtmlEditor.zip 

你可能感兴趣的:(html)