TinyMCE с React.js отображает HTML-теги во внешнем интерфейсе

Question

Я пытаюсь реализовать TinyMCE с React.js вместе с DRF в бэкэнде.

Редактор 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 самостоятельно.Из их документации :

dangerouslySetInnerHTML является заменой React для использования innerHTML в DOM браузера.В общем, настройка HTML из кода рискованна, потому что легко непреднамеренно подвергнуть ваших пользователей атаке межсайтового скриптинга (XSS).Таким образом, вы можете установить HTML непосредственно из React, но вы должны ввести опасно SetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это опасно.

Так что в этом случае что-то вроде:

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

.. должен отображать содержимое HTML, созданное в TinyMCE.