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;

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

相关推荐
拾光拾趣录13 分钟前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区23 分钟前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠1 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞1 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到112 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构