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

news2024/11/23 20:04:42

我们接着上一节的示例内容,现在有如下需求,我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能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}>
      <Editable
        onKeyDown={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}>
      <Editable
        onKeyDown={event => {
          console.log(event.key)
          if (event.key === '&') {
            event.preventDefault()
            editor.insertText('and')
          }
        }}
      />
    </Slate>
  )
}

export default SDocer;

在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

羊大师分享,羊奶奶有哪些对健康有益的喝法?

羊大师分享&#xff0c;羊奶奶有哪些对健康有益的喝法&#xff1f; 羊奶奶有多种对健康有益的喝法&#xff0c;以下是一些建议&#xff1a; 直接饮用&#xff1a;将羊奶直接煮沸后饮用&#xff0c;可以保留羊奶中的营养成分&#xff0c;为身体提供全面的滋养。羊奶的丰富蛋白质…

从李一舟看AI浪潮: 聚合数据教你如何把握数据的真正价值

AI热潮的追捧与质疑 在人工智能&#xff08;AI&#xff09;技术的浪潮中&#xff0c;每天都有新的进展让我们惊叹不已。最近&#xff0c;OpenAI的Sora模型如同一颗璀璨的明星&#xff0c;闪耀在科技界的夜空。与此同时&#xff0c;各种AI相关的产品和课程如同春雨后的竹笋&…

四川易点慧电子商务有限公司抖音小店靠谱吗?

在当下电商行业风起云涌的时代&#xff0c;四川易点慧电子商务有限公司作为抖音小店的一家新兴力量&#xff0c;是否靠谱成为了许多消费者和创业者关注的焦点。今天&#xff0c;我们就来深度解析一下这家公司&#xff0c;看看它的抖音小店究竟靠不靠谱。 一、公司背景介绍 四川…

【Mars3d】进行水平测量measure.area({的时候,会被模型遮挡的处理方法

问题&#xff1a; 1.thing/analysis/measure 水平面积 measure.area({ 在模型上测量的时候会被遮挡 2. 通过 addHeight:10000,增加高度也不可以实现这种被遮挡的效果&#xff0c;都增加到10000了&#xff0c;还是会被遮挡 export function measureArea() { measure.area({ s…

释放 群星聚落 时 自动魔免【War3地图编辑器】

文章目录 前言实现原理具体步骤1、创建隐形单位2、新建触发器2.1、新事件开端 2.2、环境→新条件2.3、动作2.3.1、创建单位2.3.2、单位 发布指令(指定单位) 前言 白虎 在斗蛐蛐中又称 白给&#xff0c;因为战绩长期倒数单挑能力和大法师并列倒数第一然而在实战中&#xff0c;大…

【Linux C | 网络编程】getaddrinfo 函数详解及C语言例子

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

视频和音频使用ffmpeg进行合并和分离(MP4)

1.下载ffmpeg 官网地址&#xff1a;https://ffmpeg.org/download.html 2.配置环境变量 此电脑右键点击 属性 - 高级系统配置 -高级 -环境变量 - 系统变量 path 新增 文件的bin路径 3.验证配置成功 ffmpeg -version 返回版本信息说明配置成功4.执行合并 ffmpeg -i 武家坡20…

群控代理IP搭建教程:打造一流的网络爬虫

目录 前言 一、什么是群控代理IP&#xff1f; 二、搭建群控代理IP的步骤 1. 获取代理IP资源 2. 配置代理IP池 3. 选择代理IP策略 4. 编写代理IP设置代码 5. 异常处理 三、总结 前言 群控代理IP是一种常用于网络爬虫的技术&#xff0c;通过使用多个代理IP实现并发请求…

【设计模式】(二、)设计模式六大设计原则

一、 设计原则概述 设计模式中主要有六大设计原则&#xff0c;简称为SOLID &#xff0c;是由于各个原则的首字母简称合并的来(两个L算一个,solid 稳定的)&#xff0c;六大设计原则分别如下&#xff1a; ​ 1、单一职责原则&#xff08;Single Responsibitity Principle&#…

Flutter SDK 常见问题

镜像配置 配置pub服务的镜像地址&#xff1a; export PUB_HOSTED_URLhttps://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn 第一次运行项目很慢&#xff0c;搜索整个Flutter SDK项目&#xff0c;使用以下内容替换google和mavenCentral仓…

【精选】Java项目介绍和界面搭建——拼图小游戏 中

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

福派斯课堂:猫软便呕吐不吃东西有什么影响?

&#x1f431; 猫软便、呕吐、不吃东西&#xff0c;这些症状听起来让人担心。作为猫咪的主人&#xff0c;看到它们不舒服&#xff0c;心里肯定不好受。那么&#xff0c;这些症状对猫咪有什么影响呢&#xff1f; 1️⃣ 营养失衡&#xff1a;如果猫咪不吃东西&#xff0c;身体就无…

[⑥5G NR]: 无线接口协议,信道映射学习

5G系统整体包括核心网、接入网以及终端部分&#xff0c;接入网与终端间通过无线空口协议栈进行连接。无线接口可分为三个协议层&#xff1a;物理层&#xff08;L1&#xff09;、数据链路层&#xff08;L2&#xff09;和网络层&#xff08;L3&#xff09;。 L1&#xff1a;物理…

【设计模式】(一)设计模式概述

一、设计模式概述 设计模式&#xff08;Design pattern&#xff09;**是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结 在GOF编写的设计模式(可复用面向对象软件的基础)一书中说道: 本书涉及的设计模式并不描述新的或未经证实的设计&#xff0c;我们只收…

LeetCode34.在排序数组中查找元素的第一个和最后一个位置

题目 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 示例 输入…

模型选择与评估

&#x1f6a9; 机器学习的一般流程包括&#xff1a;数据集的准备与预处理、搭建模型、模型训练、模型评估与应用。 在现实任务中&#xff0c;我们往往有多种学习算法可供选择&#xff0c;甚至对同一个学习算法&#xff0c;当使用不同的参数配置时&#xff0c;也会产生不同的模型…

Javascript:输入输出

目录 一.前言 二.正文 1.输出 2.输入 3.字面量 概念&#xff1a; 三.结语 一.前言 Javascript作为运行浏览器的语言&#xff0c;对于学习前端的同学来说十分重要&#xff0c;那么从现在开始我们将开始介绍有关 Javascript。 二.正文 1.输出 document.write() : 向body内…

新品齐发!小牛电动打造全场景高端化产品阵列!

2 月 29 日&#xff0c;全球智能城市出行品牌小牛电动发布“新世代性能旗舰”电摩NX、电自NXT&#xff0c;以及“全场景智驾越野电摩”X3三款新品。同时&#xff0c;与知名体育电竞俱乐部——JDG京东电子竞技俱乐部携手&#xff0c;打造“英雄的联盟”超级形象&#xff0c;引领…

扫码点餐多门店先付后餐小程序开发

多门店扫码点餐系统-先付后餐模式-公众号与小程序开源版 适用范围&#xff1a;适用于快销类餐饮&#xff0c;如早餐、面馆、快餐、零食小吃等&#xff0c;满足顾客快捷扫码点餐的需求。 该系统仅支持先付款后就餐的模式&#xff0c;不支持赊账或后付款服务。 核心功能&…

免费pr素材(Premiere创意彩色图形动画背景视频素材)下载

Premiere素材&#xff0c;10个创意彩色图形动画pr背景视频素材&#xff0c;Pr动态图形模板mogrt下载。 特点&#xff1a;Premiere Pro 2023或更高版本&#xff0c;超高清分辨率&#xff1a;38402160&#xff0c;每秒25帧的帧速率&#xff0c;包括教程视频。来自PR素材网&#x…