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

我们接着上一节的示例内容,现在有如下需求,我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能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.hqwc.cn/news/504117.html

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

相关文章

你心中的韩剧TOP1是哪一部

关注公众号&#xff1a;萌番bilfun&#xff0c;发送影片名称&#xff0c;即可获取资源链接 【2024最新韩剧来袭&#xff0c;准备好迎接心灵的震撼了吗&#xff1f;】 韩剧迷们&#xff0c;你们期待已久的2024最新韩剧终于来了&#xff01;准备好迎接心灵的震撼了吗&#xff1f…

mTLS: TLS/CA/证书 简介

TLS 传输层安全性协议&#xff08;英语&#xff1a;Transport Layer Security&#xff0c;缩写作TLS&#xff09;&#xff0c;及其前身安全套接层&#xff08;Secure Sockets Layer&#xff0c;缩写作SSL&#xff09;是一种安全协议&#xff0c;目的是为互联网通信提供安全及数…

【软考】UML中的图之通信图

目录 1. 说明2. 图示3. 特性4. 例题4.1 例题1 1. 说明 1.通信图强调收发消息的对象的结构组织2.早期版本叫做协作图3.通信图强调参加交互的对象和组织4.首先将参加交互的对象作为图的顶点&#xff0c;然后把连接这些对象的链表示为图的弧&#xff0c;最后用对象发送和接收的消…

Tomcat 部署和优化 (一)---------安装Oracle jdk 、tomcat

自 2017 年 11 月编程语言排行榜 Java 占比 13%&#xff0c;高居榜首&#xff0c;Tomcat 也一度成为 Java开发人员的首选。其开源、占用系统资源少、跨平台等特性被深受喜爱。本章主要学习如何部署 Tomcat 服务&#xff0c;根据生产环境实现多个虚拟主机的配置&#xff0c;最后…

24款奔驰C260L升级原厂360全景影像 高清环绕的视野

360全景影像影像系统提升行车时的便利&#xff0c;不管是新手或是老司机都将是一个不错的配置&#xff0c;无论是在倒车&#xff0c;挪车以及拐弯转角的时候都能及时关注车辆所处的环境状况&#xff0c;避免盲区事故发生&#xff0c;提升行车出入安全性。星骏汇小许Xjh15863 3…

人工智能基础——模型部分:模型介绍、模型训练和模型微调 !!

文章目录 前言 一、什么是模型 二、什么是模型训练 三、什么是模型微调 前言 本文将从什么是模型&#xff1f;什么是模型训练&#xff1f;什么是模型微调&#xff1f;三个问题&#xff0c;来展开介绍人工智能基础的模型部分。 模型族谱 一、什么是模型 模型是一个函数&#x…

SpringBoot整合JdbcTemplate

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 循序渐进学SpringBoot ✨特色专栏: MySQL学习 🥭本文内容:SpringBoot整合JdbcTemplate 📚个人知识库: Leo知识库,欢迎大家访问 目录 …

Linux中systemv共享内存

目录 1.原理 2.接口 1.shmget(share_memory_get获得共享内存) 2.ftok 3.shmat(share_memory_attaintion挂接到物理内存上) 4.key和shmid的区别 5.ipc 指令 6.shmdt函数&#xff08;share_memory_detach取消挂接&#xff09; 7.shmctl函数&#xff08;share_memory_cont…

电子科技大学《数据库原理及应用》(持续更新)

前言 电子科技大学的数据库课程缩减了部分的课时&#xff0c;因此&#xff0c;可能并不适合所有要学习数据库的宝子们&#xff0c;但是&#xff0c;本人尽量将所有数据库的内容写出来。本文章适用于本科生的期中和期末的复习&#xff0c;电子科技大学的考生请在复习前先看必读…

JS:原型与原型链(附带图解与代码)

一、原型 写在前面&#xff1a; 任何对象都有原型。 函数也是对象&#xff0c;所以函数也有原型。 1.什么是原型 在 JavaScript 中&#xff0c;对象有一个特殊的隐藏属性 [[Prototype]]&#xff0c;它要么为 null&#xff0c;要么就是对另一个对象的引用&#xff0c;该对象…

什么是人才储备?如何做人才储备?

很多小伙伴都会有企业面试被拒的情况&#xff0c;然后HR会告诉你&#xff0c;虽然没有录用你&#xff0c;但是你进入了他们的人才储备库&#xff0c;那么这个储备库有什么作用和特点呢&#xff1f;我们如何应用人才测评系统完善人才储备库呢&#xff1f; 人才储备一般有以下三…

[物联网] OneNet 多协议TCP透传

[物联网] OneNet 多协议TCP透传 STM32物联网–ONENET云平台的多协议接入产品创建 : https://blog.csdn.net/qq_44942724/article/details/134492924 Onenet tcp 透传 : https://blog.csdn.net/flyme2010/article/details/107086001 tcp服务端测试工具 : http://tcp.xnkiot.com/…