zoukankan      html  css  js  c++  java
  • 【原创】【目录】实现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原生支持。

  • 相关阅读:
    硬件IC汇总
    stm8s103调试注意点
    感悟短句
    USB接口
    液晶屏驱动注意
    四数之和
    所有奇数长度子数组的和
    秋叶收藏集
    删除中间节点
    组合总和
  • 原文地址:https://www.cnblogs.com/henryli/p/3439642.html
Copyright © 2011-2022 走看看