【原创】【目录】实现rich editor（富文本编辑器）教程，深入理解selectiona/range操作与浏览器差异

日常工作中，接触富文本编辑的次数还是很多，特发此教程，希望可以改变富文本编辑的技术门槛较高的现状，解决这部分的坑。

 

  1. 前提准备，兼容获取range，统一回车行为，前期准备工作
  2. 了解document.execommand操作，保存丢失的range，实时反馈样式给工具栏
  3. 兼容的fontsize命令，自定义字体为px而非固定数值，自定义font-family而非font-face，其他兼容的range处理
  4. 统一strong、b、i标签，添加标签黑名单功能
  5. 待续

 

demo文件下载  @2013-11-28 14:21:46

 

实现兼容的难点部分：

　　添加html代码：ie6-8系列使用range.insertHTML命令，ie9-11使用range.createContextualFragment(ie9 ie10,与标准一致)，产生如下bug

　　ie9 去除了pasteHTML，又没有添加range.createContextualFragment方法，只好使用createDocumentFragment，然后再range.insertNode，在第一篇中已解决  @2013-11-28 10:34:47

 

　　回车插入换行("<br/>")，当光标在末尾时，无法插入，修改为插入 "<br/>&nbsp;"，然后再选中此空格，将其删除，如何删除空格：

1                                     var rangeData = self.getRange();
2                                     var range = rangeData.range;
3                                     range.setStart(range.startContainer, range.startOffset - 1);
4                                     var _selection = self.getRange().selection;
5                                     _selection.removeAllRanges();
6                                     _selection.addRange(range);
7                                     document.execCommand("Delete", false, null);
View Code

 

　　当光标改变时，时时返回样式给工具栏，ie以外浏览器不支持onbeforedeactivate事件，无法在blur之前获得range书签，focus之前恢复。定义一个onselectionchange方法来实现，ie跟chrome原生支持。

posted @ 2013-11-23 23:51  henry_li  阅读(1497)  评论(0)  编辑  收藏  举报