当前位置: 首页 > news >正文

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.lryc.cn/news/95515.html

相关文章:

  • 基于DNN深度学习网络的OFDM+QPSK信号检测算法matlab仿真
  • 学生管理系统-05封装选项卡
  • 关于一些C++、Qt、Python方面的术语
  • k8s中强制删除pv
  • 60寸透明屏的透明度怎么样?
  • Python:使用openpyxl读取Excel文件转为json数据
  • 在Microsoft Excel中如何快速合并表格
  • 【RS】基于规则的面向对象分类
  • SWF格式视频怎么转换成AVI格式?简单的转换方法分享
  • Hive数据仓库
  • 公网访问的Linux CentOS本地Web站点搭建指南
  • ChatGPT:人机交互新境界,AI智能引领未来
  • 微信小程序值相同的数据,一个数据setDate修改后,另一个值相同的数据也会修改
  • Spring5学习笔记 — IOC
  • DevOps自动化平台开发之 Shell脚本执行的封装
  • STM32CubeIDE(I2C)
  • http 请求报文响应报文的格式以及Token cookie session 区别
  • 智能汽车的主动悬架工作原理详述
  • vue2和vue3的一些技术点复习
  • 安装nvm 切换node版本
  • 【html中的BFC是什么】
  • 苹果账号被禁用怎么办
  • 跨境出海企业,如何防范恶意退货欺诈
  • 数据出境要依法“过安检”!什么是数据出境?
  • ARM——点灯实验
  • Kubernetes 使用 helm 部署 NFS Provisioner
  • Istio Pilot源码学习(二):ServiceController服务发现
  • Spring框架中的ResourcePatternResolver只能指定jar包内文件,指定容器中文件路径报错:FileNotFoundException
  • pytorch工具——认识pytorch
  • 解决Jmeter响应内容显示乱码