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

Question

我在 React js 中使用 TinyMCE 文本编辑器。因为使用富文本编辑器的目的是保存数据和 html 标签。

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

任何人都可以让我知道我做错了什么吗？

这是截图：

使用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}

谢谢

Answer 1

您保存在集合中的 html 字符串没问题。当您将其取回到表中时，它是一个 string，而不是 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 攻击。因此，请明智地使用它并在传递之前清理您的数据。