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

  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;",然后再选中此空格,将其删除,如何删除空格:

                                     var rangeData = self.getRange();
var range = rangeData.range;
range.setStart(range.startContainer, range.startOffset - 1);
var _selection = self.getRange().selection;
_selection.removeAllRanges();
_selection.addRange(range);
document.execCommand("Delete", false, null);

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

【原创】【目录】实现rich editor(富文本编辑器)教程,深入理解selectiona/range操作与浏览器差异的更多相关文章

  1. 关于百度Editor富文本编辑器 自定义上传位置

    因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...

  2. BRAFT EDITOR富文本编辑器

    https://braft.margox.cn/demos/basic     官方文档 import React from 'react' import Uploading from '../Upl ...

  3. uniapp - 富文本编辑器editor(仅支持App和微信小程序)

    uniapp - editor富文本编辑器用法示例 丢几个图,用心看下去(-.-) 这里使用了https://ext.dcloud.net.cn/plugin?id=412 插件,用于选择字体颜色.其 ...

  4. Selenium+java - 关于富文本编辑器的处理

    什么是富文本编辑器? 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.具体长啥样,如下图: 通过自动化操作富文本编辑器 模拟场景:在富文 ...

  5. Squire – 简洁的 HTML5 富文本编辑器

    Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示      源码下载 您可能 ...

  6. bbs项目富文本编辑器实现上传文件到media目录

    media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...

  7. 如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?

    我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...

  8. python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  9. Qt富文本编辑器QTextDocument

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt富文本编辑器QTextDocument     本文地址:https://www.tech ...

随机推荐

  1. 手摸手,和你一起学习 UiPath Studio

    学习 RPA 的路上坑比较多,让我们手摸手,一起走…… 以下是一些学习 UiPath 和 RPA 的资源, 拿走不用谢! UiPath Studio 中文文档 机器人流程自动化其实是很好的概念和技术, ...

  2. Bug 级别定义标准

    缺陷种类 缺陷级别 详细说明 功能缺陷 Urgent (V级) 1.操作系统无法正常使用,死机,出现致命错误 2.数据丢失 3.被测试系统频繁崩溃,程序出错,使功能不能继续使用 4.性能与需求不一致 ...

  3. RabbitMQ各协议异同详解

    一.官网介绍 Which protocols does RabbitMQ support? RabbitMQ supports several messaging protocols, directl ...

  4. Tree - Gradient Boosting Machine with sklearn source code

    This is the second post in Boosting algorithm. In the previous post, we go through the earliest Boos ...

  5. 【Python入门学习】列表生成和函数生成器的方式实现杨辉三角

    列表生成: L = [i for i in range(10)] 列表生成器: g = (i for i in range(10)) 函数生成器使用的关键字yield实现 例如fib生成器 def f ...

  6. CSS 实用实例

    背景颜色 1. 颜色背景 <style type="text/css">body { font-size: 16px;">h1 { font-size: ...

  7. [shell] 循环判断输入值

    做个记录 until [[ $flag == "yes" || $flag == "exit" ]] do read -p "请确认统一/合服前后数据 ...

  8. pat甲级1002

    1002. A+B for Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue T ...

  9. mysql---时间类型详解

    mysql 日期类型 mysql 日期类型    ·  DATE (适用于"出生日期"等只需要年月日数据的日期字段) 日期.支持的范围为'1000-01-01'到'9999-12- ...

  10. 转 docker的下载与安装

    百度网盘下载地址:https://oomake.com/download/docker-windows 道客地址: https://link.jianshu.com/?t=https://get.da ...