【Web技术】1397- 深入浅出富文本编辑器
编辑器介绍
常见的富文本编辑器现实方式可以分成两大类，分别是用 textarea 和 contenteditable 来实现。
textarea
结构简单使用方便，一些文本格式和复杂的样式难以实现，推荐仅在对编辑要求不高的场景使用。
contenteditable
将元素的 contenteditable 属性设为 true时，该元素则成为了编辑器的主体。配合 document.execCommand 能够实现绝大多数功能，主流编辑器是基于 contenteditable 来设计的。
但是单纯依赖 contenteditable 直接产出 html 会带来一些问题，例如相同的输入在不同浏览器下的输出可能不一致，相同的输出在不同浏览器中展示存在差异，并且这些问题在移动端会被放大，同时 html 使用具有局限性，不方便在跨平台间使用。
因此更好的方案是制定一套数据结构 + 文档模型，所有的输入都经过编辑器生成约定的产物，这样在不同的平台均可解析并且保证得到预期的效果。
还有一类是以 Google docs 为主的编辑器，不使用
contenteditable，而是基于 canvas 渲染[1]，通过监听用户输入，模拟编辑器的运行，此类编辑器实现成本极高且复杂。
本文以 quill[2] 为例，介绍如何实现一个支持跨平台渲染，且可以插入自定义模块的富文本编辑器。
基本概念
delta[3]
用于描述富文本内容或内容变换的数据结构，纯 json 格式，能够转化成 js 对象后方便操作，基本格式如下，由一组 op 组成。
op 是个 js 对象，可理解为对当前内容的一次变更，它主要有以下几个属性。
insert: 插入，后面 【3.2 数据结构】有介绍可能的值和对应的含义
retain: 值为 number 类型，保留相应长度的内容
delete: 值为 number 类型，删除相应长度的内容
上面三个属性必有且仅有一个出现在 op 对象中
attributes: 可选，值为对象，可描述格式化信息
如何理解内容或内容变换，举个
【Web技术】1397- 深入浅出富文本编辑器相关推荐
- 在线文档技术揭秘开篇 - 富文本编辑器
前言 本文旨在向大家介绍在线文档的核心模块富文本编辑器技术,并介绍业内主流商业文档产品如何进行富文本编辑器技术选型. 富文本编辑器 富文本编辑器,Rich Text Editor, 简称 RTE, 是 ...
- 14款web前端常用的富文本编辑器插件
富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器.它提供类似于Office Word 的编辑功能,方便那些不太懂html用户使用,富文本编辑器的应用非常广泛,它的历史与图文网页诞生的历史几乎一 ...
- 深入浅出富文本编辑器
大厂技术 坚持周更 精选好文 编辑器介绍 常见的富文本编辑器现实方式可以分成两大类,分别是用 textarea 和 contenteditable 来实现. textarea 结构简单使用方 ...
- Python入门自学进阶-Web框架——34、富文本编辑器KindEditor、爬虫初步
KindEditor是一个轻量级的富文本编辑器,应用于浏览器客户端. 一.首先是下载:http://kindeditor.net/down.php,如下图 下载后是 解压缩后: 红框选中的都可以删除到 ...
- 现代富文本编辑器Quill的内容渲染机制
DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...
- HTML JS实现富文本编辑器
HTML/CSS/JS 目录:https://blog.csdn.net/dkbnull/article/details/87934939 JS实现富文本编辑器主要借助 document.execCo ...
- 富文本编辑器Quill 介绍及在Vue中的使用方法
在Web开发中,富文本编辑器是不可或缺的一个功能组件,掌握少量基础语法就能让一篇文章实现较为不错的排版效果,即见即所得. 目前市场上已提供大量集成富文本编辑器的包,Quill 作为其中一个,以简单.易 ...
- layui后台管理、图片裁切、cropper富文本编辑器实现
需求:后台管理系统一般都会有图文混排功能(比如新闻应用,电商商品详情),这个一般使用富文本编辑器来实现:还有一个就是图片的裁切(比如用户的头像,比如博客的封面),因为在开发这两个功能的时候,也遇到了很 ...
- wangEditor - 轻量级web富文本编辑器（可带图片上传）
业务需求: 通过后台编辑文章和图片,上传到前端界面,展示新闻消息模块.这个时候,需要一款简洁的编辑器,百度编辑器是最常用的一种,但是功能太过于复杂,而wangEditor - 轻量级web富文本编辑器 ...
最新文章
- 字段缩写ti表示什么_【滴水研究】解码TI（一）
- 霸气侧漏HTML5--之--canvas(1) api + 弹球例子
- 【开发环境】安装 Visual Studio Community 2013 开发环境 ( 下载 Visual Studio Community 2013 with Update 5 版本的安装包 )
- windows7下取消PDF格式文件图标的缩略图预览
- DOM_06之定时器、事件、cookie
- JavaSE(十二)——AWT
- Spring 自动装配模式之byType
- attachment old API read - DB debug
- 简易拨号器iCall
- ArcGIS实验教程——实验二十五：大型商场选址经典案例
- AIX的完整形式是什么？
- 未来教育计算机书,未来教育.全国计算机等级考试
- 【Elasticsearch】 Elasticsearch并发冲突问题
- php 波形图,PHP分析.wav文件并绘制png格式的波形图_PHP
- 最流行PythonWeb开发框架
- jdbc c3p0 mysql_JDBC+C3P0+DBCP 基本使用
- linux系统实训总结报告,《linux操作系统实训》总结报告 - 图文
- 计算机专业学生参加igem,喜讯：深圳大学iGEM团队再获金奖，并获得最佳单项奖，为今年大中华地区iGEM参赛队伍最佳成绩！-深圳大学生命与海洋科学学院...
- 一个因全局变量引发的故事！
- android 网络诊断工具,网络诊断工具MTR