為什么 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}}