HTML在线编辑器的实现难点
作者:heero 来源:heero博客 发布时间:2010-06-26 12:58:00
到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下面总结一下开发的难点以及应对方法。
HTML在线编辑器实际上是什么
其实有好几种实现方式,目前用得最多、兼容性最好的还是iframe方式。
<iframe src="" frameborder="0"></iframe>
只有这个空iframe是不行的,还要用Javascript把它设成可编辑:
iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;
换而言之,HTML在线编辑器就是一个可编辑的iframe。
加粗、斜体、下划线、加链接等功能如何实现
浏览器已经提供了实现这些功能的接口execCommand:
iframe.contentWindow.document.execCommand(cmd, isDefaultShowUI, value);
这三个参数的意思分别是:
isDefaultShowUI:是否默认显示交互界面,比如加链接的时候,可以通过界面填入链接。不过这个参数存在兼容性问题,一般设为false将其禁用,并另外制作交互界面。
value:传入的值,某些命令可以省略。
execCommand的问题是,生成的代码可能不标准,比如在IE下,文字加粗用的是b标签而不是strong标签。
交互问题
用户不可能总是在编辑器中输入,比如加粗、插入图片等功能是通过按钮操作的。假设用户要加粗一段选中的文字,当他按了加粗按钮后,选区以及焦点也会跟着跑到那去,因此选区(选中的文字)丢失,操作也就无法完成;同理,插入图片时插入位置也会丢失。
也就是说,要保存最后出现在编辑器中的选区。我采取的方案是,当焦点在编辑器内的时候,用一个定时器(setInterval)定时获取当前选区。选区编程平时很少用,做起来也有很多兼容性问题,主要是参考微软的MSDN(TextRange ControlRange)和Mozilla的MDC(Range Selection)了。
回车问题
在IE下,按回车是换段落,生成<p>,但在Firefox下是换行,生成的是<br>。要解决这个问题,就要监听keydown事件,如果检测到按键是回车,就插入“<p></p>”。
获取标准的代码
如何获取编辑的内容呢?这个问题很简单,只要获取iframe页面body中的innerHTML就可以了:
var content = iframe.contentWindow.document.body.innerHTML;
然而,IE下的innerHTML非常不标准:标签名是大写的,属性没有引号包起来,单标签也没有结束符……即便是Firefox下获取的代码,也有少量瑕疵。这个时候就要用正则表达式对代码进行标准化处理。
总结
不多说了,做一遍HTML编辑器,你就会知道CKEditor是多么强大。
猜你喜欢
- 九宫格是一种比较古老的设计,它最基本的表现其实就像是一个三行三列的表格。其实它最初是在window的c/s结构中用得比较多,比如我们经常看到
- 翻译:ShiningRay简介你是否知道JavaScript其实也是一个函数式编程语言呢?本指南将教你如何利用JavaScript的函数式特
- clipboardData 对象提供了对于预定义的剪贴板格式的访问,以便在编辑操作中使用。成员表方法 描述 clearData 通过 dat
- asp获取application对象代码如下: <%application("new&qu
- 在前面的文章中,我分别介绍了基于列表元素柱状图和基于表格元素柱状图的实现方法,虽然方法比较简单,但是它却包含了基本的实现原理。在了解了前面两
- 为了防止再次被攻击,做个验证码过滤程序是必要的。我在网上找了一些资料,觉得用别人做好的代码总是很不爽,自己做麻又不会写复杂的代码,特别是生成
- 想要一个这玩意,可是找了网上许多着色器,要么是兼容性成问题,要么是匹配不精确,比如说:1、注释里包含字符串、关键词,类似于:/* xxxx&
- 目前防采集的方法有很多种,先介绍一下常见防采集策略方法和它的弊端及采集对策: 一、判断一个IP在一定时间内对本站页面的访问次数,如果明显超过
- <html><head><meta http-equiv="Content-T
- 本文介绍了10个asp网页制作的常用到的技巧,有asp的也有javascript。如asp如何获取系统时间,如何取得IP,及浏览
- 1. 你必须有自己的服务器,可以在服务器上建立站点。2. 域名管理里 你的域名必须支持泛解析。(现在好像除了 双线双I
- 1.样式的重用性CSS布局的网页最大的特点就是样式的可重用性,利用class选择符重复将某个样式属性多次在网页中使用,以减少不断定义样式属性
- 使用字符串建立查询能加快服务器的解析速度吗?我记的在那儿看过,好像是说使用字符串建立SQL查询是有它的道理的,像这样:<%mySQL=
- 嘀咕嘀咕: 每次写文章往往开头是最难的,总想给UED读者不同的sense。就像我们设计产品总是想迎合我们的用户,最后觉得好似跟在用户后面狂奔
- 一、Sql Server中的日期与时间函数 1. 当前系统日期、时间 select getdate() 2. dateadd 在向指定日期加
- 1. 鼠标的哪个按键被点击?<html><head><script type="text/javas
- 首先建一个access 数据库,库中有一个URLINDEX表,其中URL和Keywords字段分别添加了索引,如下:URL &nb
- 函数名:chk_Email()'返回值:布尔值(True为通过,False为未通过)'参数:email(需要判断的email
- 前些天写一个存储过程,存储过程中使用了事务,后来我把一些代码注释掉来进行调试找错,突然发现一张表被锁住了,原来是创建事务的代码忘记注释掉。本
- 当产品走到HTML Coding这块,多浏览器的测试是很重要,也很麻烦的一个环节。现在大家主要是保证IE6,7及Firefox的一致。bro