富文本编辑器(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,别的库只需替换事件注册与浏览器判断语句亦可。
演示了 _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 – ContentEditable
- Midas Specification (MDC)
- Midas Demo
- Cross-Browser Rich Text Editor (RTE) Demo
- CKEditor (FCKEditor 的新一代产品,RTE 中的王者)
- TinyMCE (后起之秀,我接触的第一个 RTE)
- Google Docs (简单与复杂的权衡)
- YUI RTE (爱恨交加)
- NicEditor (采用 ContentEditable,跨域)
- 白社会编辑器 (简单够用,挺好)