YUI2 RTE分析－1：核心函数

富文本编辑器(RTE)一直是浏览器兼容性的重灾区，不看YUI Editor源码之前还只停留在概念上，看完之后确实挺震撼，editor代码和yui关系已经不大了，很大一部分代码都在if－else判断浏览器，当然editor也有一个很好的架构来对付浏览器差异问题，这次说得是写一个 RTE 所需要的核心函数。

例子：

?

编辑区内容html代码：

 <h1>测试</h1><div style="text-align:center">1,2,3,4,<span style="color:red;">5,6</span>,7,8</div><img src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif" alt="YUI2 RTE分析－一：核心函数"/>

?

渲染界面：

?

?

介绍

?

1.Range

?? 详细介绍就要看 PPk 的 Introduction To range ，简单来说就是提供了用户编辑选择某段内容的信息，比如对用户选择的文本进行高亮，加粗，加链接就很可能要用到这个功能，各个浏览器表现差异非常大，但是 yui editor 提供了最核心的 _getRange()方法很大程度上屏蔽了这个差异。

?

如下图：

选择了 3,4,5,6,7 ,则 range 可以告诉我们这个信息：

?

?

?

2.选择元素

?

实现为：_getSelectedElement()方法，内部调用了_getRange，这个是yui editor提出来的概念，为了判断选择或光标所在处文本是否高亮过，是否加粗过，是否曾经加过链接，则要知道当前所在的dom元素（element），然后再对dom element进行判断即可，用来更新编辑状态栏工具栏。

当前在红色字体(5,6)区域范围内，而这段红色字体的实现是用span来包裹，则可检查selectedElement的css属性即可知道当前区域状态。

?

?

?

演示：

?

基础库使用YUI3，别的库只需替换事件注册与浏览器判断语句亦可。

rte@yui3演示

rte核心代码

演示了 _getRange ,_getSelectedElement 的作用，可在html编辑框内输入代码同步到编辑区域，可在编辑区域内光标定位，选择内容，点击按钮可以查看 range，selectedElement的简单信息，详细信息可用firefox，chrome控制台查看。

?

?

参考资料：

?

References:(From kissy)

Command Identifiers (MSDN)selection Object (MSDN)TextRange Object (MSDN)controlRange Collection (MSDN)Rich-Text Editing in Mozilla (MDC)Selection (MDC)range (MDC)execCommand Compatibility (让人佩服的 PPK)Introduction to Range (通俗易懂的 PPK)Range Compatibility Table (Range is EVIL)contentEditable Demo (PPK 的尝试) Firefox 3 ContentEditableMidas Specification (MDC)Midas DemoCross-Browser Rich Text Editor (RTE) DemoCKEditor (FCKEditor 的新一代产品，RTE 中的王者)TinyMCE（后起之秀，我接触的第一个 RTE）Google Docs (简单与复杂的权衡)YUI RTE（爱恨交加）NicEditor（采用 ContentEditable，跨域）白社会编辑器（简单够用，挺好）

补充参考

Rich HTML editing in the browser ( Opera ) [ part1 , part2 ]