浅析富文本编辑器框架Slate.js
浅析富文本编辑器框架Slate.js
本文不是关于Slate.js使用入门的文章,如果还不了解该框架,建议先阅读下官方的文档:Slate官网文档
关于Slate的一些特性
- 不同于其他编辑器类的库,Slate并不提供譬如粗体、斜体、字体色等开箱即用的功能
- Slate只是提供了一套自己定义的核心数据模型,以此一些操作数据和选区相关的API
- 视图层的渲染和行为完全由开发者基于React定制
从顶层设计上看,Slate的架构是典型的MVC模型,由自身定义数据模型(Model),暴露操作数据的方法(Controller),然后交由用户使用该数据在React中做渲染(View)
虽然在实现简单的编辑器应用时这种方式显得有些繁冗,但在遇到需要对业务做较定制化的功能,如内嵌复杂表单、流程图等时,就能展现出极大的灵活性。而这类需求在使用其他编辑器的库时,经常是不可行的或者成本很高(往往要在源码层面进行改造)
Slate的数据模型
Slate.js数据模型的设计非常的“类DOM”,对于拥有Web基础的开发者降低了心智负担。下面从节点(Node)和选区(Selection)的设计上说明。
type Node = Editor | Element | Text
interface Editor {
children: Node[]
}
interface Element {
children: Node[]
[key: string]: unknown
}
interface Text {
text: string,
[key: string]: unknown
}
Node
作为最抽象的节点类型,包括以下三种类型:
Editor
编辑器的根节点类型Element
具有children属性,可以作为其他Node的父节点;由传入的renderElement函数做自定义渲染Text
包含文本信息;由renderLeaf函数做自定义渲染;在添加mark时,将文本打散成不同的Leaf(这个行为是由Slate执行的,下面的例子会讲)
除了接口中定义的属性,也可以在节点中添加任意业务相关的属性值(如下面的例子)。
一个基础的使用示例如下:
const RichText = (props: any) => {
// 创建Editor
const editor = createEditor()
// 初始值
const [value, setValue] = useState([{
type: 'paragraph',
children: [{ text: "" }]
}])
// 自定义Element渲染
const renderElement = (props) => {
const { attributes, children, element } = props
switch (element.type) { // 根据Element中的type属性判断节点类型
case "heading-one":
return <h1 {...attributes}>{children}</h1>;
case "heading-two":
return <h2 {...attributes}>{children}</h2>;
case "paragraph":
return <p {...attributes}>{children}</p>;
}
}
// 自定义Leaf渲染
const renderLeaf = (props) => {
const { attributes, children, leaf } = props
// 根据Text中的自定义属性判断样式类型
if (leaf['background-color']) {
children = <span style={{ backgroundColor: leaf['background-color']}}>
{children}
</span>
}
if (leaf['font-color']) {
children = <span style={{ color: leaf['font-color']}}>
{children}
</span>
}
return <span {...attributes}>{children}</span>;
}
return <Slate editor={editor} value={value} onChange={(value) => setValue(value)}>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}/>
</Slate>
}
假如我们在该编辑器中输入了两行文字,并选取一段文本添加颜色样式:
则上图的文本内容所对应的数据结构:
[
{
type: "paragraph",
children: [
{
text: "著名武术泰斗马保国。"
}
]
},
{
type: "paragraph",
children: [
{
text: "著名"
},
{
text: "篮球运动员",
'font-size': "rgba(139, 87, 42, 1)"
},
{
text: "蔡徐坤"
}
]
}
]
该数组中最顶层的对象映射了Element元素(由renderElement渲染的),在其中的type字段中设为paragraph标志为默认的块级元素(当然也可以设为其他任何值,Slate.js并不关心type字段的含义)。下一层的叶子节点对象,包含了text字段,表示文本内容;也可能含有自定义的一些marks,例如上面的'font-size',用来在renderLeaf中依据marks来实现自定义的样式渲染。
接下来再选取一段文字赋予一个背景色:
添加背景色的选区是在上面带有font-size的Text节点中的,因此会被打散成三个Text,变为如下形式:
[
{
type: "paragraph",
children: [
{
text: "著名武术泰斗马保国。"
}
]
},
{
type: "paragraph",
children: [
{
text: "著名"
},
{
text: "篮球",
'font-size': "rgba(139, 87, 42, 1)"
},
{
text: "运动",
'font-size': "rgba(139, 87, 42, 1)",
'background-color': "rgba(80, 227, 194, 1)"
},
{
text: "员",
'font-size': "rgba(139, 87, 42, 1)"
},
{
text: "蔡徐坤"
}
]
}
]
光标和选区
光标的定位由一个 Path
和 offset
确定,Path
代表节点在文档中的位置,offset
则代表在节点中的偏移量:
declare type Path = number[]
interface Point {
path: Path,
offset: number
}
Paht
是一个number类型数组,包含的数值代表着从文档数据模型的根部到光标所在Text节点的路径;offset
表示光标在Text节点上的偏移量。
如图中框中的节点所对应的Path
就是[1, 0]
选取的接口定义 Range
与原生selection的属性非常相似:
interface Range {
anchor: Point,
focus: Point
}
锚点anchor代表选区的起始点,焦点focus代表选区的结束点;两者都为上述的Point类型。
插件机制
Slate提供了插件的机制允许我们覆盖编辑器原有的行为。除了直接使用slate-react和slate-history这些官方的插件,也可以自定义插件来对Slate编辑器进行拓展,而且实现方式非常简易:提供一个函数,该函数接收一个编辑器的实例editor对象,在其中重写实例对象上的方法,并返回editor实例。
下面是个例子,加入在实现业务时有这么一个场景,需要在文本域中插入一些自定义的控件如按钮、下拉框等,并且都不可被编辑;而默认情况下在文本域中所有的dom元素都是contenteditable=true
的状态,是能够被光标聚焦和编辑的。为了改变这种行为,可以自行实现一个插件:
import { createEditor } from "slate"
import { withReact } from "slate-react"
import { withHistory } from "slate-history"
const myCustomeEditor = (editor) => {
const { isVoid } = editor // editor原有的isVoid方法, 用以判断节点是否可编辑
editor.isVoid = (element) => { // 根据自定义的type字段将元素置为 不可编辑的
return element.type === 'custome-element' ? true : isVoid(element)
}
return editor
}
// 创建了一个带有三个插件组合的Slate编辑器
const eidotr = myCustomeEditor(withHistory(withReact(createEditor())))
浅析富文本编辑器框架Slate.js的更多相关文章
- 放弃WebView,使用Crosswalk做富文本编辑器
版权声明: 欢迎转载,但请保留文章原始出处 作者:GavinCT 出处:http://www.cnblogs.com/ct2011/p/4100132.html 为什么放弃WebView Androi ...
- 【重点突破】—— React实现富文本编辑器
前言:富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器,所见即所得的文本编辑器. 一.安装插件 react-draft-wysiwyg: 文本编辑器插件 dra ...
- 富文本编辑器kindeditor的使用
第一步:导入前端js文件 <!-- 富文本编辑器 --> <link rel="stylesheet" href="../plugins/kindedi ...
- js ui框架 My97日期控件 富文本编辑器
My97日期控件 http://www.my97.net/dp/index.asp 富文本编辑器 http://www.kindsoft.net/demo.php 百度的magic也不错 http:/ ...
- 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)
折腾了一下午终于把百度富文本编辑器ueditor搞定了! 项目地址:https://github.com/724888/lightnote_new 首先我参考了一个ueditor的demo ...
- JS编写自己的富文本编辑器
富文本编辑器,网上有很多功能齐全种类丰富的如百度的Ueditor,简单适用型的如WangEditor等等.在经过一番挑选后,我发现都不适用现在的项目,然后决定自己造轮子玩玩.富文本编辑器中主要涉及到J ...
- 富文本编辑器上传图片需要配置js,后台代码
富文本编辑器上传图片需要配置js,后台代码
- 一款纯HTML+CSS+JS富文本编辑器-handyeditor
官网:http://he.catfish-cms.com/ 修改版本(修改一些BUG和图片上传服务器 点击下载: handyeditor富文本编辑器.zip): 图片上传接口上传类型: Content ...
- Vue.js中使用wangEditor富文本编辑器
1.前端代码 前端HTML <script src="https://cdn.bootcss.com/wangEditor/10.0.13/wangEditor.js"> ...
随机推荐
- 源码安装Python3
源码安装Python3 一.安装Python3需要的依赖包 [root@localhost ~]# yum install -y gcc make wget openssl openssl-devel ...
- Linux内存带宽的一些测试笔记
Linux内存带宽的一些测试笔记 首页 所有文章 2014年10月 GNU/Linux系统 2014-10-21 13:20 GNU/LINUX系统 内存带宽 1k 字 669 次 最近要测一下 ...
- numpy tile()函数
tile(A,B)即在B的方向上,重复A 直接举栗子: A=[1,2] tile(A,2) 此时B=(2) ,B的方向仅包含列方向,将A在列方向上重复一次,得出结果如图1所示 图1-将A在列方向重 ...
- redis 基本操作命令
redis 基本操作 String 操作字符串 1 SET key value 设置指定 key 的值 2 GET key 获取指定 key 的值. 3 GETRANGE key start ...
- 如何让Android 支持HEIF 图片解码和加载(免费的方法)
字节跳动火山引擎ImageX提供了一种能力,可以支持客户端android 直接解码HEIF 和HEIC图片,经过测试发现,可以免费使用: 一.阅前准备 HEIF图片格式是什么? 高效率图像格式(Hig ...
- Python+Selenium自动化-清空输入框、输入内容、点击按钮
Python+Selenium自动化-清空输入框.输入内容.点击按钮 1.输入内容 send_keys('valve'):输入内容valve #定位输入框 input_box = browser. ...
- GO语言复合类型05---递归
package main import ( "fmt" "time" ) /* ·递归就是自己调自己 ·递归一定要有终止条件(否则就是无限死循环) */ /*使 ...
- 将TVM集成到PyTorch
将TVM集成到PyTorch 随着TVM不断展示出对深度学习执行效率的改进,很明显PyTorch将从直接利用编译器堆栈中受益.PyTorch的主要宗旨是提供无缝且强大的集成,而这不会妨碍用户.PyTo ...
- TinyML设备设计的Arm内核
TinyML设备设计的Arm内核 Arm cores designed for TinyML devices Arm推出了两个新的IP核,旨在为终端设备.物联网设备和其低功耗.成本敏感的应用程序提供机 ...
- Github_远程仓库多人协作操作,解决冲突
前提:假设原已有一个代码仓库,加入协作者,大家一起完成一个项目. 一.添加伙伴-->伙伴同意加入-->伙伴clone,提交代码 1.创建者进入仓库主页 ==> Settings页面 ...