js 加入debug后可以进入controller_深入 Slate.js 编辑器 - 引言

最新推荐文章于 2024-08-13 08:31:19 发布
最新推荐文章于 2024-08-13 08:31:19 发布
阅读量114 收藏
点赞数
文章标签： js 加入debug后可以进入controller js 字体加粗 js代码自动排版 js字体加粗

1563aae6ee735386e01797d62b52df66.png

我们是钉钉的文档协同团队，我们在做一些很有意义的事情，其中之一就是自研的文字编辑器。为了把自研文字编辑器做好，我们调研了开源社区各种优秀编辑器，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.js，Slate.js，和 ProseMirror 等新一代编辑器也纷至沓来。 但是如果有人告诉你「1 行代码」就能实现一个富文本编辑器，你会相信吗？即便你在一个非常古老的浏览器，不借助任何第三方库，也是可以做到的：

da00dcaa1c02b0b4f42082cdaf4ec663.png
一行代码实现编辑器

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

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

0efb777d463a0de8862c48a7528a3a5a.png
一起讨论技术

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

weixin_39725650
关注
egg-mysql访问 MySQL 数据库(egg-mysql篇)
非为000的博客
04-07 8980
egg.js实现思路：符合Router -> Controller -> Service -> MySQL模式(Config配置)
基于slate构建文档编辑器
WindrunnerMax
06-26 1984
是一个完全可定制的框架，用于构建富文本编辑器，在这里我们使用构建专注于文档编辑的富文本编辑器。Github ｜ Editor DEMO富文本编辑器是一种可内嵌于浏览器，所见即所得的文本编辑器。现在有很多开箱即用的富文本编辑器，例如、等，他们的可定制性差一些，但是胜在开箱即用，可以短时间就见到效果。而类似于、，他们是富文本编辑器的或者叫做，并不是一个完整的功能，这样就能够让我们有非常高的可定制性，当然也就会造成开发所需要的时间比较多。在实际应用或技术选型的时候，还是要多做一些调研，因为在业务上框架没有绝对的优
Slate.js 开源项目教程
最新发布
gitblog_01012的博客
08-13 335
Slate.js 开源项目教程 slateA completely customizable framework for building rich text editors. (Currently in beta.)项目地址:https://gitcode.com/gh_mirrors/sl/slate 项目介绍 Slate.js 是一个完全可定制的富文本编辑器框架。它旨在提供一个灵活的基础，...
slate.js的使用记录
weixin_43492777的博客
10-25 893
这个方法能拿到选中的json 知道了这两个的用法 slate基本就能写自己想要的功能了。毕竟中国人写的文档 会比较好懂一些 看懂了这个api 就知道match 的基本用法了。建议用react 因为支持jsx 好处是 什么dom都能往里面写。最后 建议学好ts。这样方便你看源码的时候 查api特别的方便。这个示例是wangedit的。于是我们通过api知道 有。
vb.net的事件触发机制_slate.js源码分析（一） —— slate渲染机制
weixin_39668527的博客
11-30 183
富文本的可见内容主要有2块组成：文档内容，光标。本文主要介绍slate中文档内容和光标的渲染机制slate 文档数据结构slate 文档中的节点分为2类：Element 和 Text，其中 Element 可以在 children 中包含 Elment 和 Text，类似 dom 树；可以在Element 和 Text上扩展属性，提供渲染节点所需要的数据interface Element { ...
slate.js富文本编辑器分页（基于react）
10-13
本项目是基于Slate.js实现的一个分页功能，使得在富文本编辑器中可以进行可视化分页，极大地提升了编辑和阅读长篇内容的体验。 首先，我们来了解Slate.js的核心特性。Slate.js是一个基于React的富文本库，它的设计...
PyPI 官网下载 | SlappPy_Slate-1.3.1-py3-none-any.whl
02-05
《PyPI官网下载：SlappPy_Slate-1.3.1-py3-none-any.whl》 在Python的世界里，PyPI（Python Package Index）是最重要的资源库，它为全球的开发者提供了一个集中地来发布、分享和发现Python软件包。PyPI中的...
easy-editor:基于slate框架的富文本编辑器
05-02
基于slate的富文本编辑器 快速开始 npm npm install @camol/easy-editor --save 纱 yarn add @camol/easy-editor -S 例子 git clone https://github.com/kanweiwei/easy-editor.git cd easy-editor yarn && yarn ...
Python库 | DolaBot_Slate-1.0.1-py3-none-any.whl
05-31
资源分类：Python库 所属语言：Python 使用前提：需要解压 资源全名：DolaBot_Slate-1.0.1-py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
Node.js-slate为您的API生成漂亮的静态文档
08-10
slate 为您的API生成漂亮的静态文档
slate-editor:基于SlateJS框架的完整的RTF编辑器
05-13
板岩编辑器 基于框架的完整的RTF编辑器 安装 slate-editor可作为。 yarn add slate-editor 用法 您可以使用所需的插件。 无需使用。 在下面的示例中，我们仅在工具栏中添加带有其按钮的插件。 基本例子 import React from 'react' import { SlateEditor , SlateToolbar , SlateContent } from 'slate-editor' import { BoldPlugin , BoldButton } from '@slate-editor/bold-plugin' const plugins = [ BoldPlugin ( ) ] const SlateRichTextEditor = ( ) => ( < SlateEditor xss=removed>
SlateVim:一个基于slate.js的共享vim编辑器，供狂热者使用！
05-22
:open_book: 介绍 一个基于slate.js的共享vim编辑器，适合那些发烧友！ 协作工具是小时的需求。 诸如google docs之类的服务效果很好，但是开发人员有时需要快速共享和他们习惯的环境。 这是SlateVim进来的地方。 使用Slate.js时，它提供了出色的文本编辑器以及vim著名的命令。 它将Vim的强大功能与舒适的Google Docs打包在一起。 :gear: 初赛 安装与设置 确保已安装 。 确保已安装 。 > npm install yarn > yarn --version 1.22.4 克隆存储库。 > git clone https://github.com/ridhambhat/SlateVim.git && cd SlateVim 用yarn安装所需的依赖项。 > yarn install 启动开发客户端。 > npm start 导航到 。
slate一个完全可定制的框架用来构建富文本编辑器在浏览器中
08-07
slate：一个完全可定制的框架用来构建富文本编辑器在浏览器中
Slate.js - 革命性的富文本编辑框架
weixin_33725722的博客
10-18 5272
相信很多同学即便没有接触过富文本编辑领域，也一定听说过【富文本编辑是天坑，千万不要碰】的说法——是的，富文本编辑是天坑，但 Slate 能很好地帮助你。下面会介绍富文本编辑的复杂度所在，以及 Slate 的解决方式。 背景 富文本编辑领域和常规的前端开发相比，有个非常微妙的区别：在这个领域里，最流行的解决方案往往是相当【重】的。为什么在一贯推崇【越轻越好】的前端社区，轻量级的编辑器没有成为主流...
slate如何定义节点
m0_57236802的博客
01-13 467
Slate 使用一个以 JSON 格式表示的数据结构来定义文档的内容。每个节点都是这个结构的一部分，并且可以包含类型、文本、子节点等属性。节点类型可以是任何你定义的字符串，它代表了节点的作用或样式，例如 ‘paragraph’, ‘heading’, ‘image’, ‘link’ 等。' }]在这个例子中，type属性定义了节点的类型（在这里是 ‘paragraph’），而children属性包含了该节点的子节点，这里是一个文本节点。定义了节点数据结构后，需要在编辑器组件中定义如何渲染这些节点。
推荐开源项目：基于SlateJS的富文本编辑器 —— slate-editor
gitblog_00011的博客
05-25 616
推荐开源项目：基于SlateJS的富文本编辑器 —— slate-editor slate-editorA complete rich text editor based on SlateJS framework项目地址:https://gitcode.com/gh_mirrors/sl/slate-editor 1、项目介绍 slate-editor 是一个基于 SlateJS 框架构建的完整...
如何选择开源富文本编辑器？
mnilz的博客
02-23 356
StackEdit 是一款基于 Web 的在线 Markdown 编辑器，使用者可以通过它轻松编辑 Markdown 文档、同时还可以直接将 Markdown 文档同步到一些云端存储服务如 Dropbox 、Google Drive 、GitHub 等，这是 StackEdit 的另一大特点。无论你是一位专业的开发人员，还是一个有兴趣的学习者，这些开源编辑器将带给你无限的创造空间，同时可以轻松扩展和自定义，让你的工作更加高效和愉悦。它使用可扩展的、可配置的、可组合的模块来管理文本内容的编辑。
.content { :global { .w-e-bar-divider { display: none !important; } .w-e-toolbar { display: flex; justify-content: flex-start; width: 100%; } // .w-e-hover-bar { // display: none; // } .w-e-selected-image-container { width: 100%; } .w-e-text-container [data-slate-editor] img { width: 100%; } .w-e-text-container [data-slate-editor] .w-e-image-container { width: 100%; } } } .cont { :global { .w-e-bar-divider { display: none !important; } .w-e-toolbar { display: none; } // .w-e-hover-bar { // display: none; // } .w-e-selected-image-container { width: 100%; } .w-e-text-container [data-slate-editor] img { width: 100%; } .w-e-text-container [data-slate-editor] .w-e-image-container { width: 100%; } } } 如何优化此代码
06-09
这段 CSS 代码可以进一步优化如下： .content, .cont { :global { .w-e-bar-divider { display: none !important; } .w-e-selected-image-container { width: 100%; } .w-e-text-container [data-slate-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值