编辑器HTML标准化

五一期间，初步完成了wrap功能，就是选中的文字上添加自定义标记，比如span。
因为IE等浏览器执行默认的execCommand设置颜色、大小、字体时都会生成不标准的font tag，还有undo/redo时要保存选中状态，所以控制selection的range非常重要。

之前担心实现这个功能以后代码变得臃肿，没有深入研究这方面的技术。这几天仔细研究各个浏览器的selection和range以后发现其实没那么复杂，IE只不过没提供startContainer、startOffset之类的API，大部分代码可以和非IE浏览器（Firefox、Safari、Opera等）共用，这部分代码不超过300行。

例子：

这是红色文字。

选中"红色文字"，设置成红色，并把文字大小设置成24px，不管在哪个浏览器都会生成span tag。

这是<span style="color:#ff0000;font-size:24px;">红色文字。</span>

上面例子是最简单的情况，还有选择多行、反复设置属性等复杂的情况，初步测试没发现大问题，只是发现IE的remove format命令不会清除span，这个功能要自己实现了。

感兴趣的同学可以看SVN里的代码
http://kindeditor.googlecode.com/svn/branches/roddy

接下来工作：
1. 仔细测试各个浏览器，修改bug。
2. undo/redo保存selection状态。

稳定之后包含在3.2版本里发布。

评论

1 楼 makemyownlife 2009-08-10  

加油，看好你做的编辑器!!