【原创】【目录】实现rich editor(富文本编辑器)教程,深入理解selectiona/range操作与浏览器差异
日常工作中,接触富文本编辑的次数还是很多,特发此教程,希望可以改变富文本编辑的技术门槛较高的现状,解决这部分的坑。
- 前提准备,兼容获取range,统一回车行为,前期准备工作
- 了解document.execommand操作,保存丢失的range,实时反馈样式给工具栏
- 兼容的fontsize命令,自定义字体为px而非固定数值,自定义font-family而非font-face,其他兼容的range处理
- 统一strong、b、i标签,添加标签黑名单功能
- 待续
实现兼容的难点部分:
添加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/> ",然后再选中此空格,将其删除,如何删除空格:
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操作与浏览器差异的更多相关文章
- 关于百度Editor富文本编辑器 自定义上传位置
因为要在网站上编辑富文本数据,所以直接采用百度的富文本编辑器,但是这个编辑器有个缺点,默认情况下,文件只能上传到网站的根目录,不能自定义路径. 而且json配置文件只能和controller.jsp在 ...
- BRAFT EDITOR富文本编辑器
https://braft.margox.cn/demos/basic 官方文档 import React from 'react' import Uploading from '../Upl ...
- uniapp - 富文本编辑器editor(仅支持App和微信小程序)
uniapp - editor富文本编辑器用法示例 丢几个图,用心看下去(-.-) 这里使用了https://ext.dcloud.net.cn/plugin?id=412 插件,用于选择字体颜色.其 ...
- Selenium+java - 关于富文本编辑器的处理
什么是富文本编辑器? 富文本编辑器,Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器.具体长啥样,如下图: 通过自动化操作富文本编辑器 模拟场景:在富文 ...
- Squire – 简洁的 HTML5 富文本编辑器
Squire 是一个简洁的 HTML5 富文本编辑器,它提供了强大的跨浏览器的标准化,超级轻巧灵活.它是建立在现在和未来并作为研究,因此并不支持那些古老的浏览器. 在线演示 源码下载 您可能 ...
- bbs项目富文本编辑器实现上传文件到media目录
media目录是在project的settings中设置的,static目录是django自己使用的静态文件的上传目录,media目录是用户自定义上传文件的目录 # Django用户上传的文件都放在m ...
- 如何对富文本编辑器(FCK Html Editor)的工具栏进行扩展?
我们在项目开发过程中,会经常使用到富文本编辑器.GeneXus内置的富文本编辑器FCK Html Editor使用起来非常方便,只要将页面变量的控件类型(Control Type)选择为FCK Htm ...
- python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)
一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...
- Qt富文本编辑器QTextDocument
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:Qt富文本编辑器QTextDocument 本文地址:https://www.tech ...
随机推荐
- mybatis拦截器使用
目录 mybatis 拦截器接口Interceptor spring boot + mybatis整合 创建自己的拦截器MyInterceptor @Intercepts注解 mybatis拦截器入门 ...
- 180727-时序数据库InfluxDB之备份和恢复策略
influxdb 备份与恢复 参考: influxdb backup and restore 环境: influxdb v1.6.0 使用influx自动的控制台进行 I. 备份 备份命令 influ ...
- url乱码问题
//url乱码,有时候要解码2次才能成功 String url=URLDecoder.decode(URLDecoder.decode(returnUrl, "UTF-8"),&q ...
- 【视频编解码·学习笔记】4. H.264的码流封装格式 & 提取NAL有效数据
一.码流封装格式简单介绍: H.264的语法元素进行编码后,生成的输出数据都封装为NAL Unit进行传递,多个NAL Unit的数据组合在一起形成总的输出码流.对于不同的应用场景,NAL规定了一种通 ...
- scrum立会报告+燃尽图(第三周第七次)
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2286 项目地址:https://coding.net/u/wuyy694 ...
- VMware提示无法打开内核设备 \\.\Global\vmx86: 系统找不到指定的文件解决方案
1.右键单击[我的电脑],选择[管理] 2.在[服务]中找到VMware Workstation Server服务右键启动
- UIView maskView属性
给View1的maskView 赋值View2 1.View2不会显示在View1上: 2.View2 的alpha通道会体现在View1上. 关于maskView,Apple的解释: An opti ...
- lintcode-413-反转整数
413-反转整数 将一个整数中的数字进行颠倒,当颠倒后的整数溢出时,返回 0 (标记为 32 位整数). 样例 给定 x = 123,返回 321 给定 x = -123,返回 -321 标签 整数 ...
- IO流详解
目录 IO流 IO流概述及其分类 IO概念 流按流向分为两种: 流按操作类型分为两种: 常用的IO流类 字节流的抽象父类: 字符流的抽象父类: InputStream & FileInputS ...
- bash编程2
bash基础编程 前言:条件测试语法有两种书写模式,一种时[expression] ,另外一种是[[exprssion]] ,为了在书写条件测试的过程中,不让大家将两种格式互相混淆,那么在这里只讲一种 ...