HTML 标签在 React js 中使用 TinyMCE 文本编辑器未以正确的方式呈现 [duplicate]

HTML tags not rendering in proper way in React js using TinyMCE text editor [duplicate]

提问人：Firoz Khan 提问时间：10/20/2023 更新时间：10/20/2023 访问量：30

问：

这个问题在这里已经有答案了：
如何通过 props 将原始 HTML 内容渲染到 React pass？ （1 个回答）
上个月关闭。

我在 React js 中使用 TinyMCE 文本编辑器。由于使用富文本编辑器的目的是将数据与 html 标签一起保存。

我面临的问题是我保存在带有“p”标签的 firebase 中的数据，它没有在页面中以正确的方式呈现/行为。

谁能告诉我我做错了什么？

这是屏幕截图： enter image description here

使用 TinyMCE 富文本编辑器：

import { Editor } from '@tinymce/tinymce-react';


     <Editor 
      id='tinyMce' 
      
       init={{
        height: 200,
        menubar: false,
        toolbar_sticky: true,

        plugins: [
          'a11ychecker','advlist','advcode','advtable','autolink','checklist','export', 
          'lists','link','image','charmap','preview','anchor','searchreplace','visualblocks',
          'powerpaste','fullscreen','formatpainter','insertdatetime','media','table','help','wordcount'
       ],
       toolbar: 'undo redo | casechange blocks | bold italic backcolor | ' +
       'alignleft aligncenter alignright alignjustify | ' +
       'bullist numlist checklist outdent indent | removeformat | a11ycheck code table help'
      }}

      value={title}
      onEditorChange={setTitle}

       />

检索数据：

{values.Title}

谢谢

reactjs firebase dom tinymce-plugins

评论

答：

0赞 ray 10/20/2023 #1

您保存在集合中的 html 字符串没问题。当您在表中取回它时，它是一个字符串，而不是 dom 元素。

考虑将其呈现为字符串的情况：

export default function App() {
  const content = "<p>Hi</p>";
  return <div className="App">{content}</div>; //Output is <p>Hi</p>
}

现在将内容直接绑定到 dom：

export default function App() {
  const content = "<p>Hi</p>";
  return <div dangerouslySetInnerHTML={{ __html: content }} />; //Output is Hi
}

但是，dangerouslySetInnerHTML 会将您的网页打开给 xss 攻击。因此，请明智地使用它并在传递数据之前对其进行清理。

评论

0赞 Firoz Khan 10/20/2023
谢谢这个工作很棒。<td dangerouslySetInnerHTML={{__html：值。描述}}>

上一个：React Javascript 助手

下一个：操作不安全