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;

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

相关推荐
前端(从入门到入土)几秒前
前端请求后端服务403(Invalid CORS request)
前端
蓝天白云下遛狗27 分钟前
goole chrome变更默认搜索引擎为百度
前端·chrome
come112341 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL3 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl023 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang3 小时前
前端如何实现电子签名
前端·javascript·html5