深入 Slate.js 编辑器 - 引言

2020-11-24 17:41:26 +08:00
 benjycui

转载自知乎 https://zhuanlan.zhihu.com/p/301221338

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

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


TOC


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

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

<div contentEditable>请输入...</div>

这个编辑器已经具备了基础的文本格式化(加粗、斜体),undo/redo 功能了,但是为什么社区的富文本编辑器还是源源不断出现呢?我们先稍微回顾一下 Web 富文本编辑器的历史。


如果你对协同文档技术感兴趣,也可以通过知乎 https://zhuanlan.zhihu.com/p/301221338 文章中的钉钉群与微信群和我们一同讨论。

2017 次点击
所在节点    程序员
2 条回复
a408115319
2020-11-24 17:56:06 +08:00
nl101531
2020-11-24 22:35:26 +08:00
语雀的编辑器已经很好用了

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/728804

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX