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="i love google"/>
			

 

渲染界面：

 

 

介绍

 

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 )

1. Command Identifiers (MSDN)
2. selection Object (MSDN)
3. TextRange Object (MSDN)
4. controlRange Collection (MSDN)
5. Rich-Text Editing in Mozilla (MDC)
6. Selection (MDC)
7. range (MDC)
8. execCommand Compatibility (让人佩服的 PPK)
9. Introduction to Range (通俗易懂的 PPK)
10. Range Compatibility Table (Range is EVIL)
11. contentEditable Demo (PPK 的尝试)
12. Firefox 3 – ContentEditable
13. Midas Specification (MDC)
14. Midas Demo
15. Cross-Browser Rich Text Editor (RTE) Demo
16. CKEditor (FCKEditor 的新一代产品，RTE 中的王者)
17. TinyMCE （后起之秀，我接触的第一个 RTE）
18. Google Docs (简单与复杂的权衡)
19. YUI RTE （爱恨交加）
20. NicEditor （采用 ContentEditable，跨域）
21. 白社会编辑器 （简单够用，挺好）

补充参考

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