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

news/2024/4/15 4:11:57/文章来源:https://blog.csdn.net/zxmatline/article/details/136396095

我们接着上一节的示例内容,现在有如下需求,我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能onKeyDown, 我们给 Editor添加事件:

SDocor.jsx

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}><EditableonKeyDown={event => {console.log(event.key)}}/></Slate>)
}export default SDocer;

在这里插入图片描述

现在看控制台的打印结果,能捕获到每一次的按键值。当然这肯定不是我们想要的,我们想要的是有一个实用的功能。比如,当按下 &键时在文本中插入 and单词。修改如下:

SDocer.jsx

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}><EditableonKeyDown={event => {console.log(event.key)if (event.key === '&') {event.preventDefault()editor.insertText('and')}}}/></Slate>)
}export default SDocer;

在这里插入图片描述

当我们键入 &时就能看到界面上的变化了。有点意思是不是。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_996104.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「媒体宣传」品牌发布会活动策划注意点

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 品牌发布会活动策划的媒体宣传方面&#xff0c;以下是关键的注意点&#xff1a; 一、目标与定位 明确核心信息和品牌重点。 设定清晰的目标受众。 二、媒体选择 针对性选择主流媒体、…

【详识C语言】自定义类型之二:枚举

本章重点 枚举 枚举类型的定义 枚举的优点 枚举的使用 枚举 枚举顾名思义就是一一列举。 把可能的取值一一列举。 比如我们现实生活中&#xff1a; 一周的星期一到星期日是有限的7天&#xff0c;可以一一列举。 性别有&#xff1a;男、女、保密&#xff0c;也可以一一列举。…

大数据智能化-长视频领域

随着数字化时代的到来&#xff0c;长视频领域的发展迎来了新的机遇和挑战。在这一背景下&#xff0c;大数据智能化技术的应用成为长视频行业提升用户体验、优化运营管理的重要手段之一。本文将从优爱腾3大长视频背景需求出发&#xff0c;分析静态资源CDN、视频文件存储与分发、…

力扣(LeetCode)数据结构练习题(2)

今天又写了两道关于链表的练习题&#xff0c;来给大家分享一下。巩固一下上一篇学到的链表知识&#xff0c;题目可以然我们更清楚的认识链表。 目录 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表 给你单链表的头结点 head &#xff0c;请…

【Java设计模式】八、装饰者模式

文章目录 0、背景1、装饰者模式2、案例3、使用场景4、源码中的实际应用 0、背景 有个快餐店&#xff0c;里面的快餐有炒饭FriedRice 和 炒面FriedNoodles&#xff0c;且加配菜后总价不一样&#xff0c;计算麻烦。如果单独使用继承&#xff0c;那就是&#xff1a; 类爆炸不说&a…

mac 下redis

安装 Redis brew install redis 安装完成后&#xff0c;我们可以使用以下命令来确认 Redis 是否正确安装&#xff1a; redis-cli ping 启动 Redis redis-server 后台启动 Redis&#xff0c;可以使用以下命令&#xff1a; redis-server --daemonize yes 指定配置文件启动…

阿里云配置服务器详细指南

阿里云服务器配置怎么选择&#xff1f;CPU内存、公网带宽和系统盘怎么选择&#xff1f;个人开发者或中小企业选择轻量应用服务器、ECS经济型e实例&#xff0c;企业用户选择ECS通用算力型u1云服务器、ECS计算型c7、通用型g7云服务器&#xff0c;阿里云服务器网aliyunfuwuqi.com整…

Ubuntu 22.04修改静态ip

1. 备份原网络配置文件 # 配置文件名称因机器设置有异 cd /etc/netplan cp 01-network-config.yaml 01-network-config.yaml.bak# 文件内容如下 network:version: 2renderer: NetworkManager2. 修改配置文件 使用 ipconfig 命令查看网络信息&#xff0c;ip addr 命令也可 我这…

【QT】控件的用法介绍

QLabel&#xff08;很重要&#xff09; QPixmap在Qt中代表的就是一张图片 QPicture不是图片 如果图片不能完整显示&#xff0c;那就是没有布局 //添加静态图片如果构造的时候没有指定&#xff0c;可以在外面用load()指定图片路径ui->label->setPixmap(QPixmap(":…

量化人这样用Jupyter(2) - JupySQL, D-tale

当我们使用 Jupyter 时,很显然我们的主要目的是探索数据。这篇文章将介绍如何利用 JupySQL 来进行数据查询–甚至代替你正在使用的 Navicat, dbeaver 或者 pgAdmin。此外,我们还将介绍如何更敏捷地探索数据,相信这些工具,可以帮你省下 90%的 coding 时间。 原文发表在这里…

《探索虚拟与现实的边界:VR与AR谁更能引领未来?》

引言 在当今数字时代&#xff0c;虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;技术正以惊人的速度发展&#xff0c;并逐渐渗透到我们的日常生活中。它们正在重新定义人与技术、人与环境之间的关系&#xff0c;同时也为各行各业带来了全新的可能性。…

第五节 JDBC驱动程序类型

JDBC驱动程序是什么&#xff1f; JDBC驱动程序在JDBC API中实现定义的接口&#xff0c;用于与数据库服务器进行交互。 例如&#xff0c;使用JDBC驱动程序&#xff0c;可以通过发送SQL或数据库命令&#xff0c;然后使用Java接收结果来打开数据库连接并与数据库进行交互。 JDK…

MATLAB BP神经网络工具箱

1. 原理 BP神经网络结构&#xff1a; Matlab神经网络工具箱&#xff1a; BP神经网络定义&#xff1a; netnewff(PR,[S1 S2...SNl],{TF1 TF2...TFNl},BTF,BLF,PF) 其中&#xff1a; PR --输入元素的最小值和最大值的Rx2矩阵R SI -- 第 i 层的大小&#xff0c;对于Nl层&…

YOLOV8介绍

原文链接&#xff1a; 1、 详解YOLOv8网络结构/环境搭建/数据集获取/训练/推理/验证/导出 2、Yolov8的详解与实战 3、YOLOV8模型训练部署&#xff08;实战&#xff09;&#xff08;&#xff09;有具体部署和训练实现代码YOLOV8模型训练部署&#xff08;实战&#xff09;&…

FPGA——三速自适应以太网设计(1)基本模块

FPGA——以太网设计&#xff08;1&#xff09;基本模块 1. 协议解析&#xff08;1&#xff09;MAC层&#xff08;2&#xff09;IP层 和 ARP层&#xff08;3&#xff09;UDP层 和 ICMP层 2.1 MAC接收模块2.2 MAC发送模块3.1 IP接收模块3.2 IP发送模块4.1 UDP接收模块4.2 UDP发送…

以创新筑牢安全盾牌,广师大隐盾科技照亮软件知识产权保护之路

“很感谢隐盾科技团队的各位成员对我司计算机软件代码保护的鼎力相助……”广州市硬科技百强企业在给予隐盾科技团队的感谢信中写道。据了解&#xff0c;该公司在使用了隐盾科技团队研发的隐盾代码虚拟化系统后&#xff0c;企业开发盗版率从45%降至0%、保护该企业年侵权成本超过…

计算机设计大赛 深度学习的智能中文对话问答机器人

文章目录 0 简介1 项目架构2 项目的主要过程2.1 数据清洗、预处理2.2 分桶2.3 训练 3 项目的整体结构4 重要的API4.1 LSTM cells部分&#xff1a;4.2 损失函数&#xff1a;4.3 搭建seq2seq框架&#xff1a;4.4 测试部分&#xff1a;4.5 评价NLP测试效果&#xff1a;4.6 梯度截断…

Linux conntrack和iptables技术解析

Linux虚拟文件系统管理技术 1. netfilter解析1.1 netfilter的基础原理1.2 netfilter的相关hook 2. conntrack解析2.1 conntrack的基础原理2.2 conntrack的表记录解析 3. iptables解析3.1 iptables基础原理3.2 融合conntrack表的iptables规则 4. 疑问和思考4.1 conntrack和iptab…

Tensorflow2.0笔记 - 常见激活函数sigmoid,tanh和relu

本笔记主要记录常见的三个激活函数sigmoid&#xff0c;tanh和relu&#xff0c;关于激活函数详细的描述&#xff0c;可以参考这里&#xff1a; 详解激活函数&#xff08;Sigmoid/Tanh/ReLU/Leaky ReLu等&#xff09; - 知乎 import tensorflow as tf import numpy as nptf.__ve…

20240306-1-大数据的几个面试题目

面试题目 1. 相同URL 题目: 给定a、b两个文件&#xff0c;各存放50亿个url&#xff0c;每个url各占64字节&#xff0c;内存限制是4G&#xff0c;让你找出a、b文件共同的url&#xff1f; 方案1&#xff1a;估计每个文件的大小为50G64320G&#xff0c;远远大于内存限制的4G。所以…