为啥 TinyMCE 显示 HTML 标签？

Posted 2023-03-06

【中文标题】为啥 TinyMCE 显示 HTML 标签？

【英文标题】：Why is TinyMCE displaying HTML tags?为什么 TinyMCE 显示 HTML 标签？

【发布时间】：2020-01-17 00:21:40

【问题描述】：

我正在尝试将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

                        />

【参考方案1】：

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

【参考方案2】：

你可以这样做

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

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

或

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

【讨论】：

根据您的建议，我更新了我的问题。现在它是在没有 html 标签的情况下保存数据，但现在我关心的是如何以原始格式显示数据，例如较大字体的 h1 标签，较小字体的 p。因为现在它正在删除所有必需的 html 标签。你能调查一下吗？

实际上我正在尝试使用或不使用 html 标签保存数据（我不知道哪个会更好）但我唯一担心的是用户在“源代码”的帮助下填写内容时在 editor 中，所有的 html 标签，如 p、span、div、h1、h2 都应该像普通的 html 元素一样工作，但不能显示标签本身。

你不能那样做。您需要将 html 内容存储在您的数据库中。如果您担心安全问题，请考虑应用渲染受信任的 html