如何在reactjs中显示富文本数据或如何在reactjs中转换富文本?

How to display richtext data in reactjs or how to convert richtext in reactjs?

提问人:Ibrahim Khalil 提问时间:9/24/2023 最后编辑:Ibrahim Khalil 更新时间:9/25/2023 访问量:142

问:

使用 reactJs 从后端获取富文本编辑器的数据后,文本在我的 div 中显示带有 HTML 标签。

获取的数据如下:

const richText ='<p>Hello<strong> World</strong></p><p><strong>Next Line</strong></p>';

现在我想在 REACT 组件中“渲染”richText,如下所示:

你好世界

下一行

RichTextBox RTF 编辑器 富文本 RichTextBlock

评论


答:

0赞 Ibrahim Khalil 9/24/2023 #1

步骤1:

npm i dompurify

步骤2:

import DOMPurify from 'dompurify'

在要显示数据的组件中:

<div dangerouslySetInnerHTML={{__html:DOMPurify.sanitize(richText)}} > </div>