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

2024-03-02 17:12

本文主要是介绍React富文本编辑器开发(四),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

上一节我们做了块级元素的格式操作,这节我们来讲行内元素的相关操作。行内元素的样式一般指 粗体斜体代码或 删除线等 。通过前一章的内容得知,元素的渲染是通过渲染器来呈现的,块级元素通过指定 renderElement, 行内元素(即内联元素)在 Slate中也叫 叶子,通过指定 renderLeaf来渲染。即然叶子也是元素,那么就要设计样式。我们来设计一个粗体组件。创建一个新文件,将所有叶子组件放在这里

_leaf.jsx

export const Leaf = ({ attributes, children, leaf }) => {if (leaf.bold) {children = <strong>{children}</strong>}if (leaf.code) {children = <code>{children}</code>}if (leaf.italic) {children = <em>{children}</em>}if (leaf.underline) {children = <u>{children}</u>}return <span {...attributes}>{children}</span>
}

当然还要有渲染器,同样我们把叶子的渲染器也独立出来,创建一个文件,如下所示:

_leafRender.jsx

import React from 'react'
import { Leaf } from './_leaf'export const renderLeaf = props => {return <Leaf {...props} />
};

我们把上一节的块元素的渲染器也独立出来:

_elementRender.jsx

import React from 'react';
import { CodeElement, DefaultElement } from './_elements';export const renderElement = props => {switch (props.element.type) {case 'code':return <CodeElement {...props} />default:return <DefaultElement {...props} />}
};

那么,现在我们的SDocer看起来应该是这样的:

SDocer.jsx

import { useState, useCallback} from 'react';
import { createEditor, Editor, Transforms, Element } from 'slate';
import { Slate, withReact, Editable } from 'slate-react';import { initialValue } from './_configure';
import { renderElement } from './_elementRender';
import { renderLeaf } from './_leafRender';function SDocer() {const [editor] = useState(() => withReact(createEditor()));return (<Slate editor={editor} initialValue={initialValue}><EditablerenderElement={useCallback(renderElement, [])}renderLeaf={useCallback(renderLeaf, [])}onKeyDown={event => {if (!event.ctrlKey) return;if (event.key === '`') {event.preventDefault()const [match] = Editor.nodes(editor, {match: n => n.type === 'code',})Transforms.setNodes(editor,{ type: match ? 'paragraph' : 'code' },{ match: n => Element.isElement(n) && Editor.isBlock(editor, n) })}}}/></Slate>)
}export default SDocer;

我们对初始数据做一点调整,如下:

_configrue.jsx

export const initialValue = [{type: 'paragraph',children: [{ text: '这是一行段落文字,内容很少,但很重要!!' }],},{type: 'code',children: [{ text: '这是一代码行段落文字,内容很少,但很重要!!' }],},{type: 'paragraph',children: [{ text: 'This is editable ' },{ text: 'rich', bold: true },{ text: ' text, ' },{ text: 'much', italic: true },{ text: ' better than a ' },{ text: '<textarea>', code: true, underline: true},{ text: '<textarea>', underline: true},{ text: '!' },],},
];

我们再增加一个功能,当按 ctrl + b时将所选择的内容变成粗体,修改onKeyDown事件,如下所示:

import { useState, useCallback } from 'react';
import { createEditor, Editor, Transforms, Element } from 'slate';
import { Slate, withReact, Editable } from 'slate-react';import { initialValue } from './_configure';
import { renderElement } from './_elementRender';
import { renderLeaf } from './_leafRender';function SDocer() {const [editor] = useState(() => withReact(createEditor()));return (<Slate editor={editor} initialValue={initialValue}><EditablerenderElement={useCallback(renderElement, [])}renderLeaf={useCallback(renderLeaf, [])}onKeyDown={event => {if (!event.ctrlKey) return;switch (event.key) {case '`': {event.preventDefault()const [match] = Editor.nodes(editor, {match: n => n.type === 'code',})Transforms.setNodes(editor,{ type: match ? 'paragraph' : 'code' },{ match: n => Element.isElement(n) && Editor.isBlock(editor, n) })break}case 'b': {event.preventDefault()Editor.addMark(editor, 'bold', true)break}}}}/></Slate>)
}export default SDocer;

瞧,我们的功能越来越多是不是。

在这里插入图片描述

这篇关于React富文本编辑器开发(四)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/766858

相关文章

开发了一个在线客服系统

开发了一个在线客服系统 作为程序员,我一直在寻找能够提高工作效率和用户体验的方法。最近,我成功开发了一个在线客服系统,这个系统旨在帮助企业更高效地管理客户咨询和服务流程。 技术栈 我选择了以下的技术栈来构建这个系统: Golang 作为后端服务的主要编程语言,它以其并发处理能力和高效的内存管理而闻名。 MySQL 作为数据库,用于存储用户信息、会话记录以及其他必要的数据。 Vue2 作为

世界上最好的开发语言还是PHP吗?

PHP做为一种轻量级开发语言,从2004年到现在都饱受争议,但是PHP的定位其实一直都算是比较清晰,主要支撑于中小企业的Web应用方面,到现在为止,互联网上应用最高的应用WordPress也是PHP语言所开发的。PHP的很多开发框架的使用量也居高不下,比如Laravel等等。PHP的开发依然广泛运用于建站,游戏服务端开发等等 昨晚和朋友聚餐喝酒,桌上一位老伙伴跟我吐槽,说PHP现在找工作越来越难

React【Day2】

React表单控制 受控绑定 概念:使用React组件的状态(useState)控制表单的状态 function App(){const [value, setValue] = useState('')return (<input type="text" value={value} onChange={e => setValue(e.target.value)}/>)} 非受

《QT实用小工具·二十八》基于qt开发的各种曲线

1、概述 源码放在文章末尾 该项目实现了各种曲线的绘制,下面是项目的demo演示: 项目部分代码如下: #include "frmsmoothcurve.h"#include "ui_frmsmoothcurve.h"#include "smoothcurve.h"#include "qpainter.h"#include "qdatetime.h"#include "qdebug

利用Java开发实现简单“猜数字”的游戏

随着游戏产业的蓬勃发展,越来越多的人对游戏开发产生了浓厚的兴趣。Java作为一种功能强大且易于学习的编程语言,成为了游戏开发领域的热门选择。本文将带您走进Java游戏开发的世界,通过制作一个简单的游戏来体验游戏开发的乐趣。 一、游戏策划与准备 在开始编写代码之前,我们需要对游戏进行基本的策划和准备。这里我们选择制作一个简单的“猜数字”游戏。游戏规则如下:程序随机生成一个1到100之间的整数,玩

Netty学习——实战篇4 Netty开发Http服务实战、ByteBuf使用、开发群聊系统 备份

1 Netty开发Http服务实战         (1)Netty服务器监听8000端口,浏览器发出请求“http://localhost:8000”         (2)服务器可以回复消息给客户端,“你好,我是服务器”,并对特定请求资源进行过滤。 HttpServer.java public class HttpServer {public static void main(Str

2024年在Vim中开发vue2+java

neovim 0.5刚出来的时代,那时刚有lua插件我很狂热。每天沉迷于打造自己的IDE之中。写过一堆相关的博客,也录过一些视频教程。后来发现neovim的接口和插件更新的很快,导致配置文件要不定期的修改,才能保证新版本的插件的适配。我也一直在更新,直到工作上的事情越来越多,导致我在也没有时间研究neovim,没时间更新了。为了高效的完成工作上的任务,我被迫使用了不需要折腾的IDE,比如:IDEA

htmlAreas中文化

lang/gb.js 是中文语言文件,官方默认是ANSI编码的,如果你的web.config设置为utf-8(默认),则需要用记事本打开gb.js,另存为utf-8格式。 <script type="text/javascript"> _editor_url = "../HtmlArea/"; _editor_lang = "gb";</script> <script type="text/j

前端网络---http协议和https协议的区别

http协议和https的区别 1、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl加密传输协议。 2、http和https使用的端口不一样,http是80,https是443。 3、http的连接很简单,是无状态的(可以通过cookie来解决); 4、HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。 http

动手学大模型应用开发--Chapter 01 大模型概念

文章目录 前言一、学习知识点概要1.1 LLM1.3 ChatGPT1.3 LangChain 前言 本学习笔记为datawhale动手学大模型应用开发的学习内容,学习链接为: https://datawhalechina.github.io/llm-universe/ 一、学习知识点概要 1.1 LLM 大语言模型(LLM) **定义:**接受过大量文本语料库训练