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",
相关推荐
古一木9 小时前
ROS1+Vscode
ide·vscode·编辑器
YONYON-R&D9 小时前
VSCODE 调试C程序时 打印中文
ide·vscode·编辑器
带土112 小时前
vscode 为什么没有生成c_cpp_properties.json文件
编辑器
web守墓人14 小时前
【编辑器】一款IDE(如VSCode等) 如何解析各类文件大纲及跳转对应行
ide·vscode·编辑器
星空的资源小屋15 小时前
Tuesday JS,一款可视化小说编辑器
运维·网络·人工智能·编辑器·电脑·excel
傅科摆 _ py2 天前
Vscode 如何配置远程环境的 ssh 连接
ide·vscode·编辑器·1024程序员节
Aevget3 天前
DevExpress WinForms v25.1亮点 - 电子表格组件、富文档编辑器全新升级
c#·编辑器·界面控件·devexpress·ui开发·winforms
R-G-B3 天前
【23】MFC入门到精通——MFC资源视图 报错“在另一个编辑器中打开” ,MFC Dialog窗口消失 资源视图“在另一个编译器中打开”
c++·编辑器·mfc·“在另一个编辑器中打开”·mfc dialog窗口消失
广州华锐视点3 天前
多场景 VR 教学编辑器:重构教学流程的场景化实践
重构·编辑器·vr
alladmin3 天前
Clang-LLVM编译STM32
编辑器