最新要闻
- 阿根廷vs法国今晚开打:梅西即将独享世界杯出场纪录
- 【全球新要闻】《阿凡达2》坐骑仿生扑翼鸟开售:可遥控飞行 359元
- 卡梅隆透露《阿凡达3》已拍完 《阿凡达5》也写好了
- 天天日报丨魅族未来产品规划曝光:3年打造“全家桶”、不止手机和汽车
- 天天快消息!路边轿车挡道 SUV司机故意撞开 网友:很爽但应先联系114
- 微信iOS版拍照“大升级”:终于支持微距拍摄
- 当前快看:支付宝新增“极速模式”:自动收起首页推荐 更清爽了
- 当前关注:连花清瘟可致肝损伤肝衰竭?药企回应:严重误导
- 腾讯:2022年游戏盗号量上涨300% DDoS攻击全行业最高
- 花费13亿、飞了540万公里:韩国探测器终于进入月球轨道
- 天天观察:6GHz就这?!Intel i9-13900KS跑分勉强提升5%
- 微速讯:油管上最爆火的恐怖游戏:被托马斯小火车追杀
- 电池供电不插线:世界首款真无线电视将在CES亮相
- 快看:3D领域大神约翰·卡马克宣布彻底离开Meta:称其效率低到无法忍受
- 男子按导航开车到冰冻江面 一头栽入松花江
- 天天讯息:索尼要爆发了!明年有望推出新款PS5:独占大作护航
手机
iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?
- 警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案
- 男子被关545天申国赔:获赔18万多 驳回精神抚慰金
- 3天内26名本土感染者,辽宁确诊人数已超安徽
- 广西柳州一男子因纠纷杀害三人后自首
- 洱海坠机4名机组人员被批准为烈士 数千干部群众悼念
家电
当前速讯:初探富文本之编辑器引擎
(资料图片仅供参考)
初探富文本之编辑器引擎
在前文中我们介绍了富文本的基础概念,以及富文本的基本发展历程,那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是L1
的富文本编辑器,其能满足绝大部份使用场景,由此也诞生了非常多优秀的开源富文本引擎,这其中有仅提供引擎的编辑器例如Slate.js
,也有提供了部分开箱即用的功能的例如Quill.js
,也有基于这些引擎二次开发的例如Plate.js
,本文主要介绍了Slate.js
、Quill.js
、Draft.js
三款编辑器引擎。
Slate.js
slate
是一个仅仅提供引擎的富文本core
,简单来说他本身并不提供各种富文本编辑功能,所有的富文本功能都需要自己来通过其提供的API
来实现,甚至他的插件机制也需要通过自己来拓展,所以使用slate
来构建富文本编辑器的话可定制度相当高。slate
的文档虽然不是特别详细,但是他的示例是非常丰富的,在文档中也提供了一个演练作为上手的基础,对于新手还是比较友好的。话说回来如果只提供一个引擎的话,谁也不知道应该怎么用哈哈。
在slate
的文档中有对于框架的设计原则上的描述:
- 插件是一等公民,
slate
最重要的部分就是插件是一等公民实体,这意味着你可以完全定制编辑体验,去建立像Medium
或是Dropbox
这样复杂的编辑器,而不必对库的预设作斗争。 - 精简的
schema
核心,slate
的核心逻辑对你编辑的数据结构进行的预设非常少,这意味着当你构建复杂用例时,不会被任何的预制内容所阻碍。 - 嵌套文档模型,
slate
文档所使用的模型是一个嵌套的,递归的树,就像DOM
一样,这意味着对于高级用例来说,构建像表格或是嵌套引用这样复杂的组件是可能的,当然你也可以使用单一层次的结构来保持简单性。 - 与
DOM
相同,slate
的数据模型基于DOM
,文档是一个嵌套的树,其使用文本选区selections
和范围ranges
,并且公开所有的标准事件处理函数,这意味着像是表格或者是嵌套引用这样的高级特性是可能的,几乎所有你在DOM
中可以做到的事情,都可以在slate
中做到。 - 直观的指令,
slate
文档执行命令commands
来进行编辑,它被设计为高级并且非常直观地进行编辑和阅读,以便定制功能尽可能地具有表现力,这大大的提高了你理解代码的能力。 - 可协作的数据模型,
slate
使用的数据模型特别是操作如何应用到文档上,被设计为允许协同编辑在最顶层,所以如果你决定要实现协同编辑,不必去考虑彻底重构。 - 明确的核心划分,使用插件优先的结构和精简核心,使得核心和定制的边界非常清晰,这意味着核心的编辑体验不会被各种边缘情况所困扰。
示例
这样一段文本的数据结构如下所示。
[ { children: [ { text: "这样" }, { text: "一段文本", italic: true }, { text: "的" }, { text: "数据结构", bold: true }, { text: "如下所示。" }, ], },];
优势
- 可定制化程度非常高,几乎所有富文本表现层的功能都需要自行实现。
- 非常轻量,本体只有一个内核,需要什么就做什么功能,体积可控。
- 在设计架构时就针对协同提供了
OP
化的差量变更操作。 - 数据结构是类似于
DOM
的嵌套JSON
结构,比较直观容易理解。
不足
- 依旧处于
Beta
阶段,可能会有重大API
变化,例如0.50
版本就是全新重构的。 - 虽然有协同的设计,但没有转换操作的
OT
算法或CRDT
算法的直接支持。 - 仅有内核的架构同样也是不足,所有的功能都需要自行实现,成本比较高。
- 新版
slate
是无schema
的,这也就意味着Normalize
需要自行实现。
参考
slate
官方文档https://docs.slatejs.org/
。slate
官方示例https://www.slatejs.org/examples/richtext
。- 个人基于
slate
实现的富文本编辑器https://github.com/WindrunnerMax/DocEditor
。 - 基于
slate
的开箱即用富文本编辑器https://plate.udecode.io/docs/playground
。 slate
的OT
协同实现参考https://github.com/solidoc/slate-ot
。slate
协同的OTTypes
参考https://github.com/pubuzhixing8/ottype-slate
。slate
的CRDT
协同实现参考https://github.com/humandx/slate-automerge
。slate
与YJS
协同结合的参考https://github.com/BitPhinix/slate-yjs
。- 关于
slate
非常不错的文章https://github.com/yoyoyohamapi/book-slate-editor-design
。
Quill.js
quill
是一个现代富文本编辑器,具备良好的兼容性及强大的可扩展性,还提供了部分开箱即用的功能。quill
是在2012
年开源的,quill
的出现给富文本编辑器带了很多新的东西,也是目前开源编辑器里面受众非常大的一款编辑器,至今为止的生态已经非常的丰富,可以在Github
等找到大量的示例,包括比较完善的协同实例。
在quill
的文档中有对于框架的设计原则上的描述:
API
驱动设计,quill
所有的功能都是通过API
来实现的并且可以直观的通过API
来获得数据的变化,以文本为中心的基础上构建的API
,不需要解析HTML
或者DIFF DOM
树,这样的设计可以让quill
的功能更加的灵活与更高的可拓展性。- 自定义内容和格式,
quill
公开了自己的文档模型,这是对DOM
的强大抽象,允许扩展和定制,由此数据结构的主角变成了Blots
、Parchment
、Delta
。 - 跨平台,
quill
有着比较良好的兼容性,在旧版本的浏览器中也可以相同的方式运行,在用户体验上不同浏览器中也可以有着相同的视图与交互效果,并且可以在桌面和移动设备上使用。 - 易于使用,
quill
携带了部分开箱即用的功能,如果不需要定制的话,这些功能已经足够了,同时quill
又有着非常高的可拓展性,用来自定义各种功能。
示例
这样一段文本的数据结构如下所示。
{ ops: [ { insert: "这样" }, { insert: "一段文本", attributes: { italic: true } }, { insert: "的" }, { insert: "数据结构", attributes: { bold: true } }, { insert: "如下所示。\\n" }, ],};
优势
API
驱动设计,基础功能的支持很丰富,并且支持拓展。- 实现了视图层,实现上与框架无关,无论是
Vue
还是React
都可以轻松使用。 - 使用了更加直观的
Delta
来描述数据结构,本身实现了操作转换的逻辑,可以非常方便地实现协同。 - 生态非常丰富,有着非常多的插件与设计方案可以参考,特别是对于协同的支持可参考的地方非常多。
不足
Delta
数据结构是扁平的,也就是一维的数据结构,这样在实现例如表格的功能时就比较麻烦。quill 2.0
已经开发了很久了,但是还没有正式发布,目前的1.3.7
版本已经有很多年没有更新了。quill
自带的功能很丰富,但这也就意味着其包的大小会比较大一些。
参考
quill
官方文档https://quilljs.com/docs/quickstart/
。quill
官方示例https://quilljs.com/standalone/full/
。quill
的Delta
设计与实现https://quilljs.com/docs/delta/
。quill
协同的OTTypes
参考https://github.com/ottypes/rich-text
。quill
的OT
协同实现参考https://github.com/share/sharedb/tree/master/examples/rich-text
。quill
的CRDT-yjs
的协同实现参考https://github.com/yjs/y-quill
。
Draft.js
draft
是用于在React
中构建富文本编辑器的框架,其为创建和自定义文本编辑器提供了强大的API
,并且旨在易于扩展和与其他库集成,与React
结合可以使开发者在进行编辑器开发时既不用操作DOM
、也不用单独学习一套构建UI
的范式,而是可以直接编写React
组件实现编辑器的UI
。draft
整体理念与React
非常的吻合,例如使用状态管理保存数据结构、使用immutable.js
库、数据结构的修改基本全部代理了浏览器的默认行为、通过状态管理的方式修改富文本数据等。
在draft
的README
中有对于框架的设计原则上的描述:
- 可扩展和可定制,提供了构建块来创建各种丰富的文本组合体验,从基本文本样式到嵌入式媒体的支持。
- 声明式富文本,
draft
无缝融入React
,使用React
用户熟悉的声明式的API
抽象出渲染、选择和输入行为的细节。 - 不可变的编辑器状态,
draft
模型是使用immutable.js
构建的,提供具有功能状态更新的API
,并积极利用数据持久性来实现可扩展的内存使用。
示例
这样一段文本的数据结构如下所示。
{ blocks: [ { key: "3eesq", text: "这样一段文本的数据结构如下所示。", type: "unstyled", depth: 0, inlineStyleRanges: [ { offset: 2, length: 4, style: "ITALIC" }, { offset: 7, length: 4, style: "BOLD" }, ], entityRanges: [], data: {}, }, ], entityMap: {},};
优势
- 具有灵活的
API
,可以轻松地扩展和自定义块和内联元素等。 - 使用
React
作为UI
层以及数据管理,可以充分利用React
生态,对React
用户友好。 - 没有过重大的
Breaking Change
,在稳定性与细节的处理上比较具有优势。
不足
- 完全依赖于
React
作为UI
层,与React
深度绑定,在其他UI
框架上很难使用。 - 数据结构模型的设计上不是很灵活,在实现表格等嵌套结构时比较受限。
draft
针对性能进行了大量优化,但是在呈现大量内容时还是会感受到卡顿。
参考
draft
官方文档https://draftjs.org/docs/overview
。draft
官方示例https://draftjs.org/
。draft
的codesandbox
示例https://codesandbox.io/s/github/gupta-piyush19/Draft-JS-Editor
。
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://github.com/hzjswlgbsj/bloghttps://zhuanlan.zhihu.com/p/425265438https://jkrsp.com/slate-js-vs-draft-js/https://www.zhihu.com/question/404836496https://www.zhihu.com/question/449541344https://juejin.cn/post/6844903838982340622https://juejin.cn/post/7034480408888770567https://juejin.cn/post/6974609015602937870https://github.com/cudr/slate-collaborativehttps://blog.logrocket.com/what-is-slate-js-replace-quill-draft-js/https://dev.to/charrondev/getting-to-know-quilljs---part-1-parchment-blots-and-lifecycle--3e76
-
微动态丨Codeforces Polynomial Round 2022 (Div.1 + Div.2) CF 1774 题解
A AddPlusMinusSign如果有偶数个1,显然可以通过加减各一半的方式达到和为0;否则可以达到和为1。需要...
来源: 当前速讯:初探富文本之编辑器引擎
微动态丨Codeforces Polynomial Round 2022 (Div.1 + Div.2) CF 1774 题解
阿根廷vs法国今晚开打:梅西即将独享世界杯出场纪录
【全球新要闻】《阿凡达2》坐骑仿生扑翼鸟开售:可遥控飞行 359元
卡梅隆透露《阿凡达3》已拍完 《阿凡达5》也写好了
当前讯息:Blazor和Vue对比学习(进阶.请求WebAPI):通讯协议和HTTP协议
环球播报:windows10 netsh wlan命令连接新wifi
重学c#系列——什么是性能[外篇性能篇一]
天天日报丨魅族未来产品规划曝光:3年打造“全家桶”、不止手机和汽车
天天快消息!路边轿车挡道 SUV司机故意撞开 网友:很爽但应先联系114
焦点热议:核心面试题:MVCC、间隙锁、Undo Log链、表级锁、行级锁、页级锁、共享锁、排它锁、记录锁等等
微信iOS版拍照“大升级”:终于支持微距拍摄
当前快看:支付宝新增“极速模式”:自动收起首页推荐 更清爽了
当前关注:连花清瘟可致肝损伤肝衰竭?药企回应:严重误导
腾讯:2022年游戏盗号量上涨300% DDoS攻击全行业最高
花费13亿、飞了540万公里:韩国探测器终于进入月球轨道
北航计算机网络实验复习——设计性实验汇总
天天观察:6GHz就这?!Intel i9-13900KS跑分勉强提升5%
微速讯:油管上最爆火的恐怖游戏:被托马斯小火车追杀
电池供电不插线:世界首款真无线电视将在CES亮相
快看:3D领域大神约翰·卡马克宣布彻底离开Meta:称其效率低到无法忍受
男子按导航开车到冰冻江面 一头栽入松花江
当前最新:概念、场景技术方案选择的理解
hive配置Tez引擎,并安装Tez-ui
天天要闻:超级好看的 Edge 浏览器新标签页插件:好用、好看、免费浏览器必备
【世界热闻】matplotlib绘图详解
当前观察:下标模意义下的多项式乘法及其应用
【世界聚看点】go-micro v3 rpc服务一次改造经历
天天讯息:索尼要爆发了!明年有望推出新款PS5:独占大作护航
MyBatis核心配置文件详解
每日播报!疯狂裁员后 曝马斯克正为推特寻找新买家
环球最资讯丨“三连跌” 明晚油价迎年内“最后一调”:92号汽油或回归7元时代
世界头条:豆瓣8.3分!《阿凡达:水之道》票房破3亿:会是救市之作吗
全球热推荐:低温蓝色预警!这些地方最低温较历史同期低7℃以上:南方网友瑟瑟发抖
克罗地亚2-1战胜摩洛哥夺世界杯季军 37岁莫德里奇告别世界杯赛场
焦点关注:[PingCTF2022] guess what - S1gMa
环球滚动:女子开特斯拉被查酒驾 罚2000元记12分:本人称吃醉蟹 交警回应
销售开特斯拉撞了顾客的特斯拉 拒赔5万元:直言刹车了停不住
智慧树视频课件课程下载工具,如何在电脑端下载智慧树视频课件PDF,PPT到本地
史上口碑最好的小米旗舰!小米13京东好评率接近100%
VUE组件
【世界时快讯】安全多方计算:(2)隐私信息检索方案汇总分析
全球快资讯:基于海拉克斯打造 丰田推出首款纯电皮卡原型车 网友:丑到我眼睛了
天天快资讯丨卡神离开Meta 批老东家效率低下:GPU利用率5%简直是侮辱
全球热点评!小米MIX Fold 2新配色下周首销:5.4mm厚度已是行业极限 8999元
今热点:同价位无敌手!小米万兆路由器更新
全球观热点:第八天 循环的花里胡哨的用法
重学c#系列——linq(4) [三十]
【速看料】400行的象棋程序
AMD、NVIDIA齐发新品 显卡厂商的好日子来了:加速去库存
世界快报:男子1199元买长江存储2TB SSD吐槽是翻新 手指划痕:网友看完笑死
世界快消息!用户真实评价小米13:太惊艳了 这就是小米13带给我的感觉
精彩看点:北欧品质 口感清爽:OATLY燕麦奶4.1元/斤新低(商超29.8元)
【天天新视野】男子称买到过期3月沐浴露获赔5元:看不起谁呢
焦点信息:java基础面试题
【报资讯】Docker的资源控制管理
全球热资讯!BBA的禁脔 垂涎者不止蔚来
当前通讯!Docker网络模式
环球热点评!冬天空调取暖不热 可能是这些问题
环球观速讯丨小米13成了!线下门店卖断货 供不应求
热点!web项目的开发---第二天
世界今头条!SpringCloud-Ribbon学习笔记
世界速看:挑战行业多项不可能 一加11即将发布:最强性能旗舰
世界动态:python语法笔记
令人气愤!女子曝无良汽修店为赚钱高速路上撒钉子专扎车胎
天天视讯!刘作虎:OPPO一加正式开启双品牌战略 100亿投资扶植一加
环球观速讯丨义乌开始生产阿根廷夺冠球衣 还是三颗星 阿根廷辟谣:假的 侵权
世界快播:“顶级大众” 宾利Batur公布工艺细节:210克黄金3D打印
老人手指被卡:消防员用开塞露救了差点被剪的蓝宝石戒指
全球快资讯:一文了解 Dubbo 的代码架构
今日报丨关于整数二分的详解
滚动:预编译#error的使用
全球要闻:YoloV7 标签匹配机 loss 计算详解
安全多方计算(1):不经意传输协议
每日快讯!元旦假期首日火车票今开抢!迎出行小高峰:五大热门目的地出炉
观天下!Find N2系列发布背后:OPPO再次展示对产品精益求精态度
天天要闻:全国冻哭预警地图来了:周末20余省份或被冻哭 冷到破纪录
热议:售价超300万!乔布斯亲手编号Apple-1电脑落锤成交:46年后 开机画面眼前一亮
世界最大独立圆柱体水族馆爆裂:1500多条鱼全军覆没
世界杯决战前夕 法国又有两大主力倒下!5人感染神秘流感
【环球热闻】被加价千元:AMD喊话正加大RX 7900系生产!NV 4080笑而不语
世界简讯:VUE数据双向绑定
第一百一十四篇: JS数组Array(三)数组常用方法
世界上最大的鱼缸今日突然破裂:100万升水泄露 1500条鱼死亡
放假3天不调休!2023年元旦假期首日火车票开售 除夕票这一天就能买
天天报道:学谁不好学特斯拉!几十万的宝马车 容不下一个收音机
观天下!骗子诈骗1250万 买彩票中1450万:已退还给39名聋哑人
全球热讯:XSX性能比PS5强 但为何游戏性能总是输?
天天速看:Python函数/动态参数/关键字参数
天天热点!女子发烧敷20分钟面膜揭下变3D立体面具 医生提醒:影响退热 当心面瘫
方便面消费第一大国是我们:超6成人每周吃三次
世界速读:注解在Android中的使用场景
热推荐:锂金属电池爱长枝晶?韩国科学家找到破解之法
【当前独家】确认了!《阿凡达2:水之道》没有片尾彩蛋
天天观速讯丨1152分区+4K 144Hz 联合创新32寸miniLED显示器首发5399元
终于修好了!Win11新补丁解决22H2大文件复制缓慢Bug
首款第二代骁龙8游戏旗舰!红魔8 Pro来了
今日最新!王思聪投资百万成立新公司 经营范围包括动漫游戏开发
全球最资讯丨全自动门锁比半自动更人性化!但半自动更受青睐 真相终于揭开
世界简讯:Hessian2序列化支持这一点,让重构dubbo接口更容易了