React富文本编辑器开发(一)

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

安装

是的,我们的开发是基于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;

这样一个基本的富文本编辑器就完成了。但这只是万里长征的第一步。

相关推荐
2501_91592143几秒前
前端用什么开发工具?常用前端开发工具推荐与不同阶段的选择指南
android·前端·ios·小程序·uni-app·iphone·webview
aixfe4 分钟前
BiomeJS 2.0 忽略目录配置方法
前端
Mintopia7 分钟前
Cesium-kit 又发新玩意儿了:CameraControl 相机控制组件全解析
前端·three.js·cesium
ssshooter7 分钟前
shader更换后,数据需要重新加载吗?
前端
拾缘9 分钟前
[elpis] 前端工程化:webpack 配置
前端·webpack
llq_35010 分钟前
用 Nginx 搭建前端本地预览环境
前端
Mintopia21 分钟前
如何用 TypeScript 折腾出全排列之你不知道的 :“分布式条件类型”、“递归处理”
前端·javascript·typescript
十八朵郁金香27 分钟前
深入理解 SSE:服务器发送事件及其在前后端中的实践
前端·javascript
加油乐30 分钟前
Sass与Less的特性与区别
前端·css
鹏多多32 分钟前
React自定义Hooks设计指南:从封装到复用
前端·javascript·react.js