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

1.首先自己写一个编辑器

输入文字;

支持选择表情;

可添加小程序链接;可添加网页链接;并且可以编辑删除;效果如下



2.输入完毕后,点击文本输入框保存,将便携式内容回显,

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

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

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

bash 复制代码
.text-left-info{
    pointer-events: none;
  }

以下是关于编辑器的代码部分,需要使用的人请自行下载。

https://download.csdn.net/download/weixin_43517190/88084920

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

dependencies引用

bash 复制代码
 "braft-editor": "^2.3.9",
 "braft-utils": "^3.0.12",

devDependencies下引用

bash 复制代码
 "@types/draft-js": "^0.11.12",
相关推荐
空影星13 小时前
SiriKali,一款跨平台的加密文件管理器
python·编辑器·电脑·智能硬件
TLucas13 小时前
Layui连线题编辑器组件(ConnectQuestion)
前端·编辑器·layui
添砖java‘’19 小时前
vim高效编辑:从入门到精通
linux·编辑器·操作系统·vim
非得登录才能看吗?1 天前
VScode 入门(设置篇)
ide·vscode·编辑器
AlphaFinance1 天前
Windows下Vscode连接到WSL的方法
ide·vscode·编辑器
空影星1 天前
Tablecruncher,一款轻量级CSV编辑器
python·编辑器·电脑·智能硬件
开发游戏的老王2 天前
虚幻引擎入门教程:虚幻编辑器的基本操作
编辑器·游戏引擎·虚幻
止观止2 天前
如何开发 VSCode 内置扩展:从零开始构建最简扩展
ide·vscode·编辑器
楚韵天工2 天前
宠物服务平台(程序+文档)
java·网络·数据库·spring cloud·编辑器·intellij-idea·宠物
呱呱巨基2 天前
vim编辑器
linux·笔记·学习·编辑器·vim