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",
相关推荐
Lecxcy_Kastreain3 小时前
解决VSCode默认F5配置无法启动调试器的问题
ide·vscode·编辑器
一骑红尘荔枝来9 小时前
转载:VSCODE 关闭文件和资源管理器关联
ide·vscode·编辑器
2501_9159184114 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
乐吾乐科技15 小时前
乐吾乐大屏可视化组态软件【SQL数据源】
物联网·信息可视化·编辑器·数据可视化·大屏端
数字冰雹1 天前
“图观”端渲染场景编辑器
人工智能·编辑器
云梦谭1 天前
Cursor 编辑器:面向 AI 编程的新一代 IDE
ide·人工智能·编辑器
ONLYOFFICE2 天前
【技术教程】如何将ONLYOFFICE文档集成到使用Spring Boot框架编写的Java Web应用程序中
java·spring boot·编辑器
Blue桃之夭夭2 天前
Visual Studio Code设置个性化背景教程
ide·vscode·编辑器
EQ-雪梨蛋花汤2 天前
【Unity笔记】Unity 编辑器扩展:打造一个可切换 Config.assets 的顶部菜单插件
unity·编辑器·游戏引擎
byte轻骑兵3 天前
365 天技术创作手记:从一行代码到四万同行者的相遇
ide·vscode·编辑器