时间戳

首页 > 解决方案 > 带有 React.js 的 TinyMCE 在前端显示 html 标签

reactjs - 带有 React.js 的 TinyMCE 在前端显示 html 标签

问题描述

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

tinymce 编辑器将数据与 html 元素一起保存在 DB 中。当我尝试在前端显示数据时，我在这里面临的主要问题，它也显示 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}

/>

标签： reactjsdjango-rest-frameworktinymce

解决方案

React 不会自己渲染 HTML 字符串。从他们的文档中：

dangerouslySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 中设置 HTML，但你必须输入 dangerouslySetInnerHTML 并使用 __html 键传递一个对象，以提醒自己这是危险的。

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

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

..应该渲染在 TinyMCE 中创建的 HTML 内容。

推荐阅读