首页 > 其他分享 >深入 Slate.js 编辑器 - 引言

深入 Slate.js 编辑器 - 引言

时间:2022-10-29 19:56:37浏览次数:82  
标签:文本编辑 协同 Slate js 编辑器 文档

深入 Slate.js 编辑器 - 引言

深入 Slate.js 编辑器 - 引言

钉钉文档 钉钉文档 阿里巴巴-智能协同与视频云-钉钉文档团队  

我们是钉钉的文档协同团队,我们在做一些很有意义的事情,其中之一就是自研的文字编辑器。为了把自研文字编辑器做好,我们调研了开源社区各种优秀编辑器,Slate.js 是其中之一(实际上,自研文字编辑器前,我们就使用了很久的 Slate)。

我们团队的同学把对 Slate 的理解,写成了小册子,想通过连载的形式分享给你,下面是小册子的目录及前言。


TOC

  • 一行代码实现富文本编辑器
  • 拯救 ContentEditable
  • Slate.js 设计
    • HTML 中的富文本
    • Slate.js 中的富文本
    • 节点寻址
    • 附录 - 不可变数据
    • 附录 - Memorize
  • Slate.js 是怎么工作的
    • 大脑 - Controller
    • 指令系统
    • Operation
    • 插件体系
    • Normalize
    • Decoration
    • Annotation
  • 模型与视图的同步
    • Tiny Slate.js:实现一个 Mini Slate.js
    • 设计数据结构
    • 设计 Controller
    • 实现编辑器组件
  • Slate.js 生态现状
    • 兼容其他格式
    • 单元测试
    • 移动端编辑器
  • 挑战与变革
    • 难于完美的编辑器
    • 大跃进 - Slate.js 0.50
  • 附录 - 协同理论
    • OT 算法
    • 协同调度
  • 关于作者

一行代码实现富文本编辑器

富文本编辑器,指的是用户能够在浏览器中编排富文本(具有风格及排版的文本,如可以设定字体样式,进行图文混排等)。通常,在英文社区,习惯称富文本编辑器为 「WYSIWYG Editor(what you see is what you get,所见即所得编辑器)」。 当网站需要一个富文本编辑器时?你是否也会踟蹰在编辑器的选择?是选择百度出品的老牌编辑器 UEditor,它最熟悉国内用户,但是已经长期不更新了,还是选择最流行的 CKEditor,如果愿意花钱,CKEditor 团队还能为你提供企业级的支持;如果你对商业化嗤之以鼻,更愿意拥抱开源社区,近几年,Draft.jsSlate.js,和 ProseMirror 等新一代编辑器也纷至沓来。 但是如果有人告诉你「1 行代码」就能实现一个富文本编辑器,你会相信吗?即便你在一个非常古老的浏览器,不借助任何第三方库,也是可以做到的:

一行代码实现编辑器

这个编辑器已经具备了基础的文本格式化(加粗、斜体),undo/redo 功能了,但是为什么社区的富文本编辑器还是源源不断出现呢?这就不得不回顾下 contentEditable 的发展历程,以及基于 contentEditable 实现编辑器时所面临的问题。

 


如果你对协同文档技术感兴趣,也可以加入下面的群(钉钉/微信),和我们一同讨论。

也欢迎关注本账号,我们每周都会更新~

标签:文本编辑,协同,Slate,js,编辑器,文档
From: https://www.cnblogs.com/sexintercourse/p/16839498.html

相关文章

  • JS CSS HTML 加载顺序
    JSCSSHTML加载顺序 解析:运行代码加载:下载代码JS脚本(因为js修改DOM,所以需要先js解析)script标签:阻塞html文档的解析,直到脚本执行完外引js:先网络......
  • html,css,js加载顺序
    <headlang="en"><metacharset="utf-8"><title></title><linkrel="stylesheet"href="css/*.css"><scriptsrc="js/*.js></script></head>DOM文......
  • 【JS】扩展内建类 - Symbol.species
    species是个函数值属性,其被构造函数用以创建派生对象,species访问器属性允许子类覆盖对象的默认构造函数。 JS内建类可以被扩展classMyArrayextendsArray{......
  • js 字符串中包含逗号和分号分析成数组
    varstr="117.39755436808615,34.59211450864094;117.39783481906638,34.59185738594207;117.39825396841732,34.59151467824745;117.39895365857903,34.5909999082......
  • js 数组-过滤数据
    js数组-过滤数据filter()方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter()不会对空数组进行检测。注意:filter()不会改......
  • 1_js中过滤器filter简单实现
    filterAPI自实现我感觉这个API我用起来不是很顺畅我自己写一个看看分析这是api参考手册设计思路抛开其他的不谈,filter本质上就是原型Array上的一个函数==ap......
  • 【Node.JS 练习】时钟案例
    目录​​案例要求​​​​实现​​​​步骤​​​​创建正则表达式​​​​使用相关模块,读取需要被处理的html文件​​​​自定义resolve方法​​​​css​​​​ js​​......
  • 【Node.JS 】http的概念及作用
    什么是http模块在网络节点中,负责消费资源的电脑,叫做客户端,负责对外提供网络资源的电脑,叫做服务器。http模块是Node.js官方提供的,用来创建web服务器的模块,通过http模块提供的......
  • 【Node.JS 练习】考试成绩整理
     目标整理前的数据格式  整理后的数据格式 实现思路导入需要的fs文件系统模块使用fs.readFile()方法,读取素材目录下的成绩.txt文件。判断文件是否读取失败。文件读取成功......
  • 【Node.JS】buffer类缓冲区
    目录​​简介​​​​创建Buffer类​​​​使用Buffer类​​​​例 ​​​​直接使用buffer类​​简介node.js的开发语言就是js,javascript语言自身只有字符串数据类型,没有......