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

蓉妹妹2023-07-25 15:38

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

输入文字；

支持选择表情；

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

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

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

bash 复制代码

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

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

bash 复制代码

.text-left-info{
    pointer-events: none;
  }

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

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

dependencies引用

bash 复制代码

 "braft-editor": "^2.3.9",
 "braft-utils": "^3.0.12",

devDependencies下引用

bash 复制代码

 "@types/draft-js": "^0.11.12",