首页 > 其他分享 >初探富文本之编辑器引擎

初探富文本之编辑器引擎

时间：2022-12-18 19:34:14浏览次数：41  
标签：slate js 编辑器 https 初探 文本 com quill

初探富文本之编辑器引擎

在前文中我们介绍了富文本的基础概念，以及富文本的基本发展历程，那么在本文中将会介绍当前主流开源的富文本编辑器引擎。当前使用最广泛的富文本编辑器是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/blog
https://zhuanlan.zhihu.com/p/425265438
https://jkrsp.com/slate-js-vs-draft-js/
https://www.zhihu.com/question/404836496
https://www.zhihu.com/question/449541344
https://juejin.cn/post/6844903838982340622
https://juejin.cn/post/7034480408888770567
https://juejin.cn/post/6974609015602937870
https://github.com/cudr/slate-collaborative
https://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

标签：slate,js,编辑器,https,初探,文本,com,quill
From： https://www.cnblogs.com/WindrunnerMax/p/16990800.html

相关文章

  • 002 读取文本文件
    这里提供四个函数，用于读取文本文件。publicstaticStringtextFileContent(Stringpath,Charsetcharset)1//读取文件全部内容2publicstaticStringtextF......
  • VSCode编辑器极简使用入门
    VSCode（VisualStudioCode）是一款开源、跨平台、轻量级的代码编辑器，具有非常丰富的插件生态。他本身就是JavaScript+Electron（/ɪˈlektrɒn/电子）代码开发的。官方下载......
  • CSS单行／多行文本溢出隐藏
    前言在日常开发展示页面，如果一段文本的数量过长，受制于元素宽度的因素，有可能不能完全显示，为了提高用户的使用体验，这个时候就需要我们把溢出的文本显示成省略号对于文本的溢......
  • vim编辑器
    vim编辑器命令行输入vim/vifilename进入vim编辑模式iao插入模式---esc-->命令模式---:-->末行模式wq!一、命令模式1、光标移动n向右n向下......
  • 百度map 3.0初探
    1.简介    在使用百度地图SDK为您提供的各种LBS能力之前，您需要获取百度地图移动版的开发密钥，该密钥与您的百度账户相关联。因此，您必须先有百度帐户，才能获得开发密钥。并......
  • 二、Qt定时器与文本编辑器制作《QT 入门到实战》
    学习目标了解qt的pixmap了解qt的label如何显示图片了解定时器的开启了解定时器的关闭了解文件如何进行读取了解QFileDialog的使用了解了一个文本编辑器的......
  • Qt实现编辑器
    TextEdit::TextEdit(QWidget*parent):QMainWindow(parent){setToolButtonStyle(Qt::ToolButtonFollowStyle);setupFileActions();setupEditActions()......
  • 文本分类学习 （五） 机器学习SVM的前奏-特征提取（卡方检验续集）
    前言：上一篇比较详细的介绍了卡方检验和卡方分布。这篇我们就实际操刀，找到一些训练集，正所谓纸上得来终觉浅，绝知此事要躬行。然而我在躬行的时候，发现了卡方检验对于文本分类来......
  • 15 个很棒的 Bootstrap UI 界面编辑器
    [导读]​​BootstrapMagic​​​​BootSwatchr​​​​BootstrapLiveEditor​​​​FancyBoot​​ ​​StyleBootstrap​​​​Lavish​​​​BootstrapThemeRol......
  • 离线语音识别与语音转写初探
    这里写自定义目录标题​​语音离线SDK​​​​科大讯飞​​​​测试结果​​​​百度云​​​​录音环境要求​​​​吵杂的环境​​​​阿里云​​​​腾讯云​​​​有道......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99