【原创】【目录】实现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 ...
随机推荐
- ubuntu apt-xxx
1. apt-get install xxx 2. dpkg -l ; list software already installed. 3. apt-cache dumpavail ; print ...
- Jmeter接口测试(四)传递参数
参数设置 Jmeter 支持通过 查询字符串参数(Query String Parameters) 或者 Request body 请求体来传递参数. 1.get请求是普通键值对 get请求一般通过p ...
- Oracle和MySQL在使用上的区别
1. Oracle是大型数据库而MySQL是中小型数据库,MySQL是开源的而Oracle的价格非常高. 2. Oracle支持大并发,大访问量. 3. 安装所用的空间差别也是很大,MySQL安 ...
- Composer指南
安装 windows中安装Composer 一般来说,windows下安装composer有两种办法,一种是直接下载并运行Composer-Setup.exe,这种方法在中国似乎很难完成安装.另一种就 ...
- sql脚本创建用户角色权限表
/******************************************/ /* 名称:权限管理 */ /* 编写日期:2010.5.20 */ /* 开发者:dangqinghua * ...
- 团队计划会议(二)——WBS
一.会议及WBS 因为是第一次开发android应用,所以我们对这次开发心里也没底,最后我们商量暂时先实现主要的几个骨架功能,之后再慢慢完善. 会议期间,我们根据自己的能力大致先估算了完成这些功能需要 ...
- UVA 11270 轮廓线
题目链接: http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=33787 题意: 用1*2或2*1的长条把n*m方格铺满的方案数. ...
- Alpha-7
前言 失心疯病源7 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 18:30~20:30 通过统计法来得出人车团块的区别和鉴别方法,然而效果并不显著 代码签 ...
- Alpha - Postmortem
Alpha - Postmortem NewTeam 2017/11/18 目录 设想和目标 计划 资源 变更管理 设计/实现 测试/发布 团队角色.管理.合作 总结 设想和目标 返回目录 1. 软件 ...
- jar读取外部和内部配置文件的问题
最近修改XX应用的时候,涉及到需要在jar包中读取工程配置文件的问题.在jar包中,读取配置文件,需要单独处理. 项目中的一些配置文件,如dbconfig.properties log4j.xml 不 ...