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;

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

相关推荐
理想不理想v25 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我27 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记40 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜40 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=40 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck1 小时前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。1 小时前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼1 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k09331 小时前
sourceTree回滚版本到某次提交
开发语言·前端·javascript