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

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

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

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

<divclassName="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.mzph.cn/news/7062.shtml

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

相关文章

[MySQL]MySQL用户管理

[MySQL]MySQL用户管理 文章目录 [MySQL]MySQL用户管理1. 用户的概念2. 用户信息3. 创建用户4. 修改用户密码5. 删除用户6. MySQL中的权限7. 给用户授权8. 回收权限 1. 用户的概念 MySQL中的用户分为超级用户&#xff08;root&#xff09;和普通用户。超级用户的操作是不受权限…

机器人制作开源方案 | 智能垃圾桶

1. 功能说明 智能垃圾桶是一种利用物联网技术和智能感知能力的智能设备&#xff0c;旨在提高垃圾分类和处理的效率。通常具备以下特点和功能&#xff1a; ① 智能感知&#xff1a;智能垃圾桶配备各种传感器&#xff0c;如压力传感器、红外线传感器等&#xff0c;可以实时感知…

Spring Cloud 之 Gateway 网关

&#x1f353; 简介&#xff1a;java系列技术分享(&#x1f449;持续更新中…&#x1f525;) &#x1f353; 初衷:一起学习、一起进步、坚持不懈 &#x1f353; 如果文章内容有误与您的想法不一致,欢迎大家在评论区指正&#x1f64f; &#x1f353; 希望这篇文章对你有所帮助,欢…

ohmyzsh遇到(eval):43: defining function based on alias `xxx‘的问题

好想发疯 为什么为什么&#xff0c;kamisama&#xff0c;为什么这种奇怪的bug总要发生在我的身上&#xff0c;呀哒呦呀哒呦&#xff0c;一定是哪里做错了desu&#xff0c;demo…bokuwa真的找到了解决の道啊&#xff01;不要小看Google的力量啊铁咩&#xff08;怒音&#xff01…

网络安全 Day20-计算机网络基础知识05(网络原理)

计算机网络基础知识05&#xff08;网络原理&#xff09; 1. OSI 模型2. VMware虚拟机NAT模式下上网原理3. 不能上网故障排查 1. OSI 模型 OSI 7层网络通信原理模型 OSI 国际网互联 OSI 数据包封装解封装过程 北京局域网主机A到深圳局域网主机B数据工作流程 2. VMware虚拟机N…

VUE中的生命周期、每个生命周期可以干什么

生命周期 就VUE来说就是一个程序的即将创建到销毁的一个过程&#xff0c;也就是vm对象实例从创建到最终销毁的过程。 VUE生命周期4个阶段8个钩子函数(到某一阶段自动调用的函数) 1.初始阶段&#xff08;虚拟的DOM生成&#xff09; beforeCreate() 初始化事件对象和生命周期…

人类机器人编程的心理机制(一)

\qquad 本文中的人类机器人编程(Human Robot Programming)意指“基于创伤的脑控(trauma-based mind control, T.B.M.C)”或“基于创伤的编程(trauma-based programming)”&#xff0c;文中用英文缩写“T.B.M.C”指代。T.B.M.C的操纵主体是施加编程的个人或机构&#xff0c;文中…

CentOS安装OpenBLAS教程

OpenBLAS 是一个基于BSD许可&#xff08;开源&#xff09;发行的优化 BLAS 计算库&#xff0c;BLAS&#xff08;Basic Linear Algebra Subprograms 基础线性代数程序集&#xff09;是一个应用程序接口&#xff08;API&#xff09;标准&#xff0c;用以规范发布基础线性代数操作…

【图论】二分图

二分图&#xff0c;即可以将图中的所有顶点分层两个点集&#xff0c;每个点集内部没有边 判定图为二分图的充要条件&#xff1a;有向连通图不含奇数环 1、染色法 可以解决二分图判断的问题 步骤与基本思路 遍历图中每一个点&#xff0c;若该点未被染色&#xff0c;则遍历该…

Unity如何快速接入iOS和GooglePlay的成就排行榜等GameCenter功能

一般在游戏开发中&#xff0c;经常有成就排行榜的需求&#xff0c;按照我们的理解&#xff0c;通常是要自己导入谷歌的sdk&#xff0c;或者苹果的sdk&#xff0c;然后封装后通过桥接来调用。 不用这么复杂&#xff0c;本鱼蛋(egostudio 防爬)告诉大家一个方法&#xff0c;其实…

el-table 表头设置渐变色

<el-table :data"tableData" stripe><el-table-column prop"name" label"测试" align"left"></el-table-column><el-table-column prop"code" label"测试1" align"left"></…

Sui Move与标准Move的有哪些区别和根本性创新

Sui网络将Sui Move作为其本地编程语言&#xff0c;使用Sui Move编写的apps利用Sui的共识机制&#xff0c;实现了令人印象深刻的交易性能。 然而&#xff0c;熟悉Move编程语言的开发者在探索Sui文档时可能会感到困惑&#xff0c;因为该文档着重介绍了对象和一些指令&#xff0c…

kafka消费者api和分区分配和offset消费

kafka消费者 消费者的消费方式为主动从broker拉取消息&#xff0c;由于消费者的消费速度不同&#xff0c;由broker决定消息发送速度难以适应所有消费者的能力 拉取数据的问题在于&#xff0c;消费者可能会获得空数据 消费者组工作流程 Consumer Group&#xff08;CG&#x…

刷题记:无重复字符的最长子串

● 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc”&#xff0c;所以其长度为 3。 输入: s “bbbbb” 输出: 1 解释: 因为无重复字符的最长子串是 “b”&#xff0c;所…

git 提示 不能合并

今天A分支合并B分支&#xff0c;提示“不能合并” 最终发现&#xff0c;是另一个分支的版本落后导致&#xff0c;但是git并未提示出来 有遇到这种问题可以先检查下版本

如何有效跟踪你的计费时间?

对于自由职业者、小型企业和远程团队来说&#xff0c;时间跟踪是必需的。了解自己在单个项目或任务上投入了多少时间&#xff0c;可以帮助他们有效管理资源和优化工作流程。 然而&#xff0c;在向客户收费时&#xff0c;时间跟踪多了一层复杂性&#xff1a;不仅需要跟踪所花费…

Java实现商品ID获取京东商品历史价格数据方法

要通过京东的API获取商品历史价格&#xff0c;您可以使用京东开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例&#xff0c;展示如何通过京东开放平台API获取商品历史价格&#xff1a; 首先&#xff0c;确保您已注册成为京东开放平台的开发者&#xff0c;并创…

Linux工具——vim

安装vim yum -y install vim 如果安装失败&#xff0c;提示Could not resolve host:mirrorlist.centos.org: Unkown error的问题&#xff0c;需要替换yum源&#xff0c;可以参考这个文章 配置vim root的vim配置文件在 /etc/vimrc 普通用户的vim配置文件在用户对应家目录下&a…

ElacticSearch入门

ElacticSearch 什么是Elasticsearch&#xff1f; Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java语言开发的&#xff0c;并作为Apache许可条款下的开放源码发布&#xff0c…

RabbitMQ的确认机制

RabbitMQ的确认机制 生产者确认 public class ProductionMessageConfirm {public static void Send(){ConnectionFactory factory new ConnectionFactory();factory.HostName "localhost";//RabbitMQ服务在本地运行factory.UserName "guest";//用户名…