为什么 TinyMCE 显示 HTML 标签？

Question

我正在尝试将TinyMCE与前端的 React 和后端的 django(DRF) 集成。

当我从 TinyMCE 保存数据时，它会将数据与 HTML 标签一起保存，并且相同的数据与 HTML 标签一起显示，例如

<p>test</p> <div>Test inside div</div>

在没有 HTML 标签的情况下以正确的网页格式显示数据的最佳方式是什么？

这是 TinyMCE 元素设置

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


 handleSubmit = e => {

        e.preventDefault();

        this.props.form.validateFields((err, values) => {
            if (!err) {

                this.props.blogCreate(this.state.title, this.state.short_title, this.state.content);

                console.log(this.props.res)
            }


        });
    };




    handleEditorChange = (e) => {

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

    }

                        <Editor
                            apiKey="************************"
                            //initialValue="<p>Blog Content</p>"
                            //cloudChannel='stableDefault'

                            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: 'p,br,div,Row,Col,a[title|target|href],strong,em,ul,ol,li,--[*]',

                                branding: false,
                                height: 400,
                                contextmenu: 'formats | link image',
                                forced_root_block: false,
                            }}

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

                        />

Answer 1

你可以这样做

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

Editor.activeEditor.selection.getContent({ format: 'text' });

或者

tinyMCE.activeEditor.getContent({ format: 'text' });

Answer 2

要以原始格式的 HTML 显示数据，您需要在从 div 内的数据库中获取文本时添加以下内容：危险地SetInnerHTML={{ __html: this.state.content}}