APP下载

完全可定制的富文字编辑框架——Slate.js

消息来源:baojiabao.com 作者: 发布时间:2024-05-22

报价宝综合消息完全可定制的富文字编辑框架——Slate.js

介绍

Slate 是一个完全可定制的富文字编辑框架。通过 Slate,你可以构建出类似 Medium、Dropbox Paper 或者 Canvas 这样使用直观、富互动、体验也已成为 Web 应用标杆的编辑器。Slate 本身并不是一个编辑器,而是一套在 React 和 Immutable 的基础上,用于操作富文字资料的框架。基于 Slate 实现一个富文字编辑器,相当于是使用 React(检视层)+ Immutable(资料层)开发一个普通 Web 应用,Slate相当于Controller。

地址

Github:

https://github.com/ianstormtaylor/slate#

文件:

https://docs.slatejs.org/

线上示例:

https://www.slatejs.org/#/rich-text

快速入门

安装使用npm包管理

npm install slate slate-react

//确保安装了react的依赖

npm install react react-dom immutable

汇入元件Slate 开放了一套用于构建编辑器的模组。其中,最重要的是 Editor 元件:

// 汇入 Slate Editor

import { Editor } from 'slate-react'

为了省事,我将官网的Demo下载下来进行演示

npm install

npm start

启动的时候我第一次失败了,然后重新启动下就行了,然后开启浏览器localhost:8080

富文字

列表项中的呈现复选框

程式码高亮

排版布局

嵌入功能

表情

强制布局

历史撤回和重做

悬停选单

图片和连结

Markdown 预览

所见即所得的Markdown通过简单的语法实现Markdown的编写

HTML贴上你可以从别的网站直接贴上带有样式的文字

占位符(Placeholders)写过html标签的都知道

文字编辑类似

搜寻高亮

多个编辑器同步

表格

版本记录功能可以在应用某些更改后储存新版本,然后随时回滚到以前的版本

为什么使用Slate?

以下是开发者的一些说明(文件有中文版):

https://doodlewind.github.io/slate-doc-cn/reference/slate/change.html

编辑器硬编码了文件的结构规范,难以定制。类似加粗和斜体的结构可以开箱即用,但评论、嵌入内容以及更多的定制性需求呢?

对文件的程式设计式变换非常错综复杂。使用者的编写体验可能不错,但在执行程式设计式变更时却不必要地复杂,而这对于构建高阶的编辑行为至关重要。

对 HTML、Markdown 等内容的序列化支援看起来像是事后加上的。这是一个非常常见的使用场景,但要实现将文件转换为 HTML 或 Markdown 的简单功能都需要编写大量的模板程式码。

重新学习一个新的检视层效率不高且十分受限。各种编辑器在重新发明检视层的轮子,而非使用 React 这样已有的技术方案。你必须学习一套带着自有限制和陷阱的新系统。

对协同编辑没有预先设计好的支援。编辑器内部的资料结构使其无法用于实时、协作的编辑场景中,除非重写编辑器。

程式码仓库是单体的,而非小而可复用的。许多编辑器没有对外开放本应为开发者所复用的内部工具,以至于不得不重新发明轮子。

无法构建复杂而存在巢状关系的文件。不少编辑器是围绕简单的【扁平】文件结构设计的,这使得表格、嵌入内容和字幕等内容难以理解,有时甚至无法实现。

总结

Slate是一个可以高度定制化博众家之所长的富文字编辑器框架,其强大之处远不是本文所展现的这一点,你可以使用它来建立复杂且优雅的富文字编辑器,相对其他很多编辑器本身来说非常的灵活,文件也非常的详细,目前也正在不断地迭代当中,对富文字编辑器定制化需求比较高的可以尝试,希望能对你有所帮助!

2019-09-19 18:56:00

相关文章