React.js 的 TinyMCE 在前端显示 html 标签

Question

我正在尝试在后端使用 React.js 和 DRF 来实现 TinyMCE。

tinymce 编辑器正在将数据与 html 元素一起保存在数据库中。我尝试时面临的主要问题为了在前端显示数据，它也会显示 html 标签。（另外，在浏览器中检查它的元素显示为单个字符串，这里附上截图）

如何在不在前端显示那些 html 标签的情况下以正确的 html 格式显示数据？

这是 tinymce 的设置

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


handleEditorChange = (e) => {

    this.setState({
      content: e.target.getContent({ format: 'html' })

   })

}
<Editor
   apiKey="t80f2hbf54gftyp5lr9wre6ud85z5o12gf54kjaywq10bk1gue"

   init={{
         selector: 'textarea',
            plugins: ['advlist autolink autosave lists link image charmap print preview hr anchor 
            pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen',
           'insertdatetime media nonbreaking save table  directionality','emoticons template paste  
            textpattern imagetools codesample toc help'],
        toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright 
            alignjustify | bullist numlist outdent indent | link image',
       toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
         image_advtab: true,
         file_browser_callback_types: 'image',
          valid_elements: '*[*]',
         branding: false,
         height: 400,
         contextmenu: 'formats | link image',
         forced_root_block: false,

     }}

      name='content'
       onChange={this.handleEditorChange}

/>

Answer 1

React 不会自己渲染 HTML 的字符串。来自他们的 documentation:

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

所以在这种情况下，类似于：

function MyComponent() {
  return <div class="blog_content" dangerouslySetInnerHTML={blog.content} />;
}

..应该呈现在 TinyMCE 中创建的 HTML 内容。

React.js 的 TinyMCE 在前端显示 html 标签

TinyMCE with React.js is displaying html tags in frontend

tinymce

django-rest-framework

reactjs