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

  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. sqlite两表更新update

    1 2 3 4 5 6 7 8 9 10 11 12 UPDATE t1 SET Column1 =   ( SELECT Columnx    FROM t2    WHERE t2. KEY = ...

  2. selenium+Java,xpath定位方法详解(搬运留存)

    用xpath绝对路径比较费事费力,还容易报错,下面几种模糊定位比较灵活好用 driver.findElement(By.xpath("//*[@id='J_login_form']/dl/d ...

  3. Javac提示不是内部或外部命令

    1.先去百度搜索"jdk下载"下载最新版jdk,并安装,安装目录不用去更改,直接默认就好,下载完了之后,双击打开安装,jdk安装完成后,会接着安装jre包,(jre和jdk是配对的 ...

  4. mongodb复制集部署文档

    一.安装SNMP(新版mongodb需要此依赖安装) 安装snmp服务需要的rpm包: perl-Data-Dumper-2.145-3.el7.x86_64.rpm net-snmp-5.7.2-2 ...

  5. 华为ensp使用

    网络学习目录 AR是() Auto:自动线 copper:双绞线缆  serial:串行线  pos: 光纤  E1:    ATM:    CTL:       STA:    PC:    MCS ...

  6. 软件工程团队项目第一个Sprint评论

    (1)跑男:话说我没怎么听懂这个游戏是怎么玩的,可能是由于这是第一组,所以我没有反应过来把,界面设计的还可以,但是像设置,选关,帮助真心没看懂.有一种感觉就是,这个游戏是由一堆的漂亮的图片拼起来的,还 ...

  7. CS小分队第一阶段冲刺站立会议(5月12日)

    昨日成果:2048整体界面效果经组员韩雪冬美化之后档次提升了好几个,我为其添加了保存并显示最高分数的功能. 遇到困难:当我想把access数据库由accdb改成mdb时,发生未知错误 ,导致数据库无法 ...

  8. 周总结<4>

    经过了一周的学习,我们在html以及C语言方面又有的新的知识点的学习. html 自习表格,函数等 C语言 哈弗曼编码 Html案例: 一. <!DOCTYPE html PUBLIC &quo ...

  9. sql数据库表容量

    标题:SQL Server 的最大容量规范 数据库的文件大小,文件数量都有限制. 表的大小也有限制,如果表过大,查询效率就会下降,考虑对数据进行分割,对历史数据进行独立存储.

  10. 解决Ubuntu(Linux)平台下Sublime Text 3 安装中文输入支持库后 开启gnome-terminal报错的问题

    在Ubuntu下安装Sublim Text3后发现无法输入中文,按照此链接的方法解决后.然后用下列代码配置C++的编译系统: { "cmd":["g++",&q ...