React 框架下自己写一个braft编辑器,然后将编辑器内容展示在网页端

news2024/11/23 21:33:11

1.首先自己写一个编辑器
输入文字;
支持选择表情;
可添加小程序链接;可添加网页链接;并且可以编辑删除;效果如下
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.输入完毕后,点击文本输入框保存,将便携式内容回显,
在这里插入图片描述

渲染时,因为是html格式,所以采用dangerouslySetInnerHTML属性来渲染

<div
  className="text-left-info"
  dangerouslySetInnerHTML={{ __html: msg.text?.content }}
></div>

添加样式,渲染后里面的链接内容都点击没反应,比如说编辑器里的a标签

.text-left-info{
    pointer-events: none;
  }

以下是关于编辑器的代码部分,需要使用的人请自行下载。
https://download.csdn.net/download/weixin_43517190/88084920

切记package.json中一定要引用相关插件
dependencies引用

 "braft-editor": "^2.3.9",
 "braft-utils": "^3.0.12",

devDependencies下引用

 "@types/draft-js": "^0.11.12",

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

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

相关文章

python中——requests爬虫【中文乱码】的3种解决方法

requests是一个较为简单易用的HTTP请求库&#xff0c;是python中编写爬虫程序最基础常用的一个库。 而【中文乱码】问题&#xff0c;是最常遇到的问题&#xff0c;对于初学者来说&#xff0c;是很困恼的。 本文将详细说明&#xff0c;python中使用requests库编写爬虫程序时&…

List集合类详解(附加思维导图)

目录 一、List集合思维导图 二、List集合类的常见方法 2.1、ArrayList集合常用方法 2.2、LinkedList集合常用方法 一、List集合思维导图 二、List集合类的常见方法 2.1、ArrayList集合常用方法 ①.add(Object element) 向列表的尾部添加指定的元素。 ②.size() 返回列表中…

前端vue部署到nginx并且配置https安全证书全流程

说明一下&#xff1a; 本人原本使用的是docker安装nginx通过挂载实现部署&#xff0c;但是出现了很多bug&#xff08;例如部署安全证书后还是无法访问&#xff09;&#xff0c;所以困扰了很久&#xff0c;最后改为本地安装nginx&#xff0c;最终在不懈的努力下终于按照好了&…

H5页面 卡片 分享朋友圈和好友

项目背景&#xff1a; 前后端分离&#xff1a; 后端&#xff1a; C# 开发 前端&#xff1a; 就是微信中打开的 H5页面 纯 H5 业务流程&#xff1a; 因为在 h5 中实现 卡片分享 的一个字段, 需要后端 访问 腾讯API 生成&#xff0c;所以整个分享结构和流程就比较长&#xff…

Stable diffusion 和 Midjourney 怎么选?

通过这段时间的摸索&#xff0c;我将和你探讨&#xff0c;对普通人来说&#xff0c;Stable diffusion 和 Midjourney 怎么选&#xff1f;最重要的是&#xff0c;学好影视后期制作对 AI 绘画创作有哪些帮助&#xff1f;反过来&#xff0c;AI 绘画对影视后期又有哪些帮助&#xf…

Python案例变量实践

编程&#xff1a;非常需要实践&#xff0c;不要光看&#xff0c;一定要动动手 什么是程序&#xff1f; 数据结构算法 数据结构&#xff1a;存储和使用数据的方式 算法&#xff1a;解决问题的步骤 解决一个问题的时候&#xff0c;分析问题&#xff0c;设计算法&#xff0c;编…

网约车服务端线上流量巡检与测试验收技术

摘要 滴滴网约车致力于让出行更美好&#xff0c;平台为司乘提供良好体验的同时承载了广大群众的出行服务&#xff0c;致使我们对服务可用性的要求较高。更快地发现系统bug&#xff0c;可以让更少的司乘用户受影响。发现bug的能力更精细&#xff0c;可以让一些不易被用户感知但…

2D坐标系下的点的转换矩阵(平移、缩放、旋转、错切)

文章目录 1. 平移 &#xff08;Translation&#xff09;2. 缩放 &#xff08;Scaling&#xff09;3. 旋转 &#xff08;Rotation&#xff09;4. 错切 &#xff08;Shearing&#xff09;5. 镜像 &#xff08;Reflection&#xff09; 1. 平移 &#xff08;Translation&#xff09…

Nautilus Chain:主权模块化区块链的早期实践

“Nautilus Chain 是目前行业内首个以模块化的方式构建的主权 Layer3 区块链系统&#xff0c;其也是 Celestia 模块化 Layer0 体系下最早的印证者&#xff0c;现在 Nautilus Chain 主网正式上线&#xff0c;揭示着模块化区块链正在从早期的理论阶段走向实践。” Celestia &…

Godot 4 源码分析 - 获取属性信息

在管道通信基础上&#xff0c;可进行宿主程序与Godot的双向通信。 先拿属性信息试试手。 DrGraph端 static UnicodeString command "Book.position"; if (InputQuery("输入窗口", "请输入待获取的属性信息", command)) {TDrStream_Get drGet…

5.10 Bootstrap 按钮(Button)插件

文章目录 Bootstrap 按钮&#xff08;Button&#xff09;插件加载状态单个切换复选框&#xff08;Checkbox&#xff09;单选按钮&#xff08;Radio&#xff09;用法选项方法 Bootstrap 按钮&#xff08;Button&#xff09;插件 按钮&#xff08;Button&#xff09;在 Bootstrap…

forEach遍历访问set造成的无限循环问题

抛出问题 先给出一段代码&#xff0c;我们创建了一个集合set&#xff0c;它里面有一个元素数字1和2&#xff0c;接着我们调用forEach方法来遍历该集合。在遍历函数中&#xff0c;首先调用delete方法删除数字1&#xff0c;再执行了某些业务操作后紧接着调用add方法将数字1加回&…

Linux系统root用户切换及密码修改

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

2023 年第二届钉钉杯大学生大数据挑战赛 初赛 B:美国纽约公共自行车使用量预测分析 问题二Python代码分析

2023 年第二届钉钉杯大学生大数据挑战赛 初赛 B&#xff1a;美国纽约公共自行车使用量预测分析 问题二 相关链接 【2023 年第二届钉钉杯大学生大数据挑战赛】 初赛 B&#xff1a;美国纽约公共自行车使用量预测分析 问题一Python代码分析 【2023 年第二届钉钉杯大学生大数据挑…

面试—Redis相关

文章目录 一、概述二、缓存1、缓存穿透2、缓存击穿3、缓存雪崩4、双写一致性5、持久化6、数据过期策略7、数据淘汰策略 三、分布式锁四、其它面试题1、主从复制2、哨兵3、分片集群结构4、I/O多路复用 一、概述 使用场景&#xff1a; Redis的数据持久化策略有哪些什么是缓存穿透…

[PyTorch][chapter 44][RNN]

简介 循环神经网络&#xff08;Recurrent Neural Network, RNN&#xff09;是一类以序列&#xff08;sequence&#xff09;数据为输入&#xff0c;在序列的演进方向进行递归&#xff08;recursion&#xff09;且所有节点&#xff08;循环单元&#xff09;按链式连接的递归神经网…

leetcode 面试题 判定是否互为字符重排

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;判定是否互为字符重排 思路&#xff1a; 两个字符串的每个字母和数量都相等。那么 s2 一定可以排成 s1 字符串。 代码&#xff1a; bool CheckPermutation(char* s1, char* s2){char hash1[26] {0};char hash2[26] {…

Python深度学习“四大名著”之一【赠书活动|第二期《Python机器学习:基于PyTorch和Scikit-Learn》】

近年来&#xff0c;机器学习方法凭借其理解海量数据和自主决策的能力&#xff0c;已在医疗保健、 机器人、生物学、物理学、大众消费和互联网服务等行业得到了广泛的应用。自从AlexNet模型在2012年ImageNet大赛被提出以来&#xff0c;机器学习和深度学习迅猛发展&#xff0c;取…

不知道零基础小白拥有一个黑客梦有没有机会能够实现

01.简单了解一下网络安全 说白了&#xff0c;网络安全就是指网络系统中的数据受到保护不被破坏。而我们从事网络信息安全工作的安全工程师&#xff0c;主要工作当然是设计程序来维护网络安全了。 网络安全工程师是一个统称&#xff0c;还包含很多职位&#xff0c;像安全产品工…

【代码随想录day19】从前序与中序遍历序列构造二叉树

题目 思路 使用递归建树&#xff0c;流程如下&#xff1a; 取出后序节点创建新树的节点 找到新树的节点在中序中的索引 分割中序序列 分割后序序列 继续递归建立整颗新树 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftN…