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;

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

相关推荐
Mr_Xuhhh19 分钟前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋1 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿1 小时前
【前端】CSS
前端·css
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲2 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•3 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS4 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js