为什么 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

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

Answer 2

你可以这样做

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

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

或

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