Slate.js Slate.js 是一个完全基于JavaScript的富文本编辑框架,虽然起初为React设计,但借助适配器可以灵活地用于Vue项目。
当前使用最广泛的富文本编辑器是L1的富文本编辑器,其能满足绝大部份使用场景,由此也诞生了非常多优秀的开源富文本引擎,这其中有仅提供引擎的编辑器例如Slate.js,也有提供了部分开箱即用的功能的例如Quill.js ,也有基于这些引擎二次开发的例如Plate.js,本文主要介绍了Slate.js、Quill.js、Draft.js三款编辑器引擎。 Slate.js slate是一个仅仅提供引擎的富文本core,简单来说他本身并不提供各种富文本编辑功能,所有的富文本功能都需要自己来通过其提供的API来实现,甚至他的插件机制也需要通过自己来拓展,所以使用
对于React,已经有一个名为Slate.js的出色编辑器,其模块化给人留下深刻的印象。
他主要做的事情是这三点 它是一个「非常轻量」的解决方案:Slate.js 几乎没有集成任何功能,只是提供了一个插件扩展机制给开发者去实现想要的功能。蝇量级的内核方便读者对编辑器设计 “见微知著”。 它是「视图无关」的:Slate.js 定义了一套脱离 UI 实现的数据模型,考虑到我们不是要再学习一遍 React 或者 Vue,这也能让我们让脱离 UI 的繁文缛节,聚焦到编辑器的模型设计上。 它为「协同编辑」所设计:因为网络条件、客户端硬件、应用架构的限制,早期的一些 Web 富文本编辑器并没有考虑到多人实时协同,Slate.js 的模型设计天然就亲和协同编辑,通过学习 Slate.js,我们也能借道了解基础的多人协作文档工作原理 以上是大佬们的总结,也是slate 的优势,其实Slate.js的过人之处是提供了一个视图无关的内核 slate-core ,,在我看来,他就是提供了一个编辑器相关的对象,里面保存许多编辑器相关的功能函数
一、富文本编辑器 富文本编辑器市面上已经有很多优秀的开源版本了,但是问题在于每个产品的富文本编辑器需求不一样,所以可能导致有一些时候需要手撸编辑器 ---- 例如: Draft.js Slate.js
他们曾经使用 Slate.js —— 一个很好的编辑器,但是当实现我们自己的富文本原语进行协作编辑时,发现我们自己他们的原语和 Slate 的数据模型之间的脱节在某种程度上是一个障碍。
富文本编辑器 - 技术选型 从团队规模角度 产品内容体验简单,并且缺乏编辑器开发者,推荐直接使用 Quill、 Slate.js、CKEditor、TIngMCE 进行二次开发。
基于slate构建文档编辑器 slate.js是一个完全可定制的框架,用于构建富文本编辑器,在这里我们使用slate.js构建专注于文档编辑的富文本编辑器。 而类似于Draft.js、Slate.js,他们是富文本编辑器的core或者叫做controller,并不是一个完整的功能,这样就能够让我们有非常高的可定制性,当然也就会造成开发所需要的时间比较多。
这种思路不能说完全不对,但放到wangEditor这类基于Slate.js的编辑器上,就有点像想用聊天口吻去和一位讲究契约格式的系统程序对话。 理解wangEditor节点结构的关键:先理解SlateNode官方文档其实已经把核心思路说得很清楚:wangEditor是基于Slate.js为内核开发的。 但Slate.js有一个非常重要的规则:即使是void元素,也必须有children属性,并且其中通常只有一个空文本节点。
Tiptap 在 2019 年被 @Philipp Kühn[4] 创建,当时他在找一个 Vue2.js 的编辑器,但是找了很久都没有一个真正解决他需求的方案,当时 React 已经有了模块化支持不错的 Slate.js
我们曾经使用Slate.js——一个很好的编辑器——但是当我们为协作编辑实现我们自己的富文本基元时,我们发现我们自己的基元和Slate的数据模型之间的脱节是一个阻碍因素。
github.com/i18next/react-i18next ---- 富文本编辑 React 中的富文本编辑器,就简单推荐下面几个,我也没太多用过: Draft.js:https://draftjs.org/ Slate.js