这是一个系统的完整的教程,每一节文章的内容都很重要。这个教程学完后自己可以开发出一个相当完美的富文本编辑器了。下面就开始我们今天的内容:
安装
是的,我们的开发是基于Slate的开发基础,所以要安装它:
bash
yarn add slate slate-react
这样就可以了。 使用的时候像下面这样引入相关的依赖:
javascript
import React, { useState } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
当然,slate
的功能很多,按需引用即可。
开始
我们先来创建一个组件,用以我们的开始
SDocer.jsx
javascript
...
function SDocer(){_
return null;
}
这个组件就做为我们学习开发富文本编辑器的开始。接下来我们要创建一个Editor
对象,我们需要它的状态与渲染之间保持稳定,所有我们用useState
来作为桥接工具。
javascript
import { useState } from 'react'
import { createEditor } from 'slate'
import { withReact } from 'slate-react'
function SDocer(){
const [editor] = useState(() => withReact(createEditor()))
return null;
}
export default SDocer
现在什么都没有,我们没有渲染任何东西。这个时候我们需要一个上下文对象,把相关的插件
功能附上去。这个上下文就是Slate
, 先定义一个初始值,
javascript
import { useState } from 'react'
import { createEditor } from 'slate'
import { Slate, withReact } from 'slate-react'
const initialValue = [
{
type: 'paragraph',
children: [{ text: '这是一行段落文字,内容很少,但很重要!!' }],
},
];
function SDocer(){
const [editor] = useState(() => withReact(createEditor()))
return <Slate editor={editor} initialValue={initialValue} />
}
export default SDocer
我们可以把这个<Slate/>
组件当作一个环境对象,所有富文本的相关功能都必须在这个对象中执行才能起作用。也就是所谓的上下文
, 虽然呈现的内容可以很复杂,但它的内部数据格式却是很简单的,就是一个 Json数组
格式,这就小巧很多了,方便传输与保存。
到目前为止虽然我们有了上下文,但没有显示 /编辑
它的主体,所以还是什么也没有。添加一个<Editable/>
主体:
javascript
import { useState } from 'react'
import { createEditor } from 'slate'
import { Slate, withReact, Editable } from 'slate-react'
const initialValue = [
{
type: 'paragraph',
children: [{ text: '这是一行段落文字,内容很少,但很重要!!' }],
},
];
function SDocer() {
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} initialValue={initialValue}>
<Editable />
</Slate>
)
}
export default SDocer
注意,每一步的引入内容都有变化。为了养成良好的开发习惯,我们一定要从一开始就要把数据规划好。添加一个configure
,把相关的初始化信息及配置信息放在里面。
_configure.jsx
javascript
export const initialValue = [
{
type: 'paragraph',
children: [{ text: '这是一行段落文字,内容很少,但很重要!!' }],
},
];
修改 SDocer.jsx
如下,引入 initialValue
SDocer.jsx
javascript
import { useState } from 'react';
import { createEditor } from 'slate';
import { Slate, withReact, Editable } from 'slate-react';
import { initialValue } from './_configure';
function SDocer() {
const [editor] = useState(() => withReact(createEditor()));
return (
<Slate editor={editor} initialValue={initialValue}>
<Editable />
</Slate>
)
}
export default SDocer;
这样一个基本的富文本编辑器就完成了。但这只是万里长征的第一步。