React富文本编辑器开发（一）

在这里插入图片描述
这是一个系统的完整的教程，每一节文章的内容都很重要。这个教程学完后自己可以开发出一个相当完美的富文本编辑器了。下面就开始我们今天的内容：

安装

是的，我们的开发是基于Slate的开发基础，所以要安装它：

yarn add slate slate-react

这样就可以了。使用的时候像下面这样引入相关的依赖：

import React, { useState } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

当然，slate的功能很多，按需引用即可。

开始

我们先来创建一个组件，用以我们的开始

SDocer.jsx

...
function SDocer(){_
  return null;
}

这个组件就做为我们学习开发富文本编辑器的开始。接下来我们要创建一个Editor对象，我们需要它的状态与渲染之间保持稳定，所有我们用useState来作为桥接工具。

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, 先定义一个初始值，

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/>主体：

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

export const initialValue = [
  {
    type: 'paragraph',
    children: [{ text: '这是一行段落文字，内容很少，但很重要！！' }],
  },
];

修改 SDocer.jsx如下，引入 initialValue

SDocer.jsx

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;