TinyMCE 渲染不正确

Question

我的 TinyMCE 在我的 React 项目中运行良好。直到我尝试在同一页面上呈现多个编辑器。当我这样做时，只有一个按预期工作。

这是我放置它们的方式...

render(){
        return(
            <Div>
                <select onChange={this.selectTheme}
                    value={this.state.client}>
                    <option default>Select Client...</option>
                    {this.state.clients.map(item => (
                        <option key={item.client}>{item.client}</option>
                    ))}
                </select>
                <h3 dangerouslySetInnerHTML={{ __html: this.state.client }}></h3>
                <img className="img-fluid" src={this.state.logo} alt="client logo" />
                <button onClick={this.appendPolicy}>Add Policy</button>
                <div id="policy-container">
                    <TinyEditor color1={this.state.color1} color2={this.state.color2} />
                    <TinyEditor color1={this.state.color1} color2={this.state.color2} />
                    <TinyEditor color1={this.state.color1} color2={this.state.color2} />
                </div>
            </Div>
        )
    }

如果有帮助，这是我的编辑器代码：

render() {
                return (
            <div>
                <div className="container">
                    <h1 style={{ background: this.props.color1, color: this.props.color2}} dangerouslySetInnerHTML={{__html: this.state.policy}}></h1>
                    <Editor
                        apiKey='yf9eajz93s3akrlb24b8ja9xcszddbxx22x4ug8c2q5boxw3'
                        className="mceEditor"
                        id='myTextArea'
                        init={{
                            height: 500,
                            editor_selector: 'mceEditor',
                            menubar: false,
                            browser_spellcheck: true,
                            contextmenu: true,
                            branding: false,
                            plugins: [
                                'advlist autolink lists link image charmap print preview anchor',
                                'searchreplace visualblocks code fullscreen',
                                'insertdatetime media table paste code help wordcount'
                            ],
                            toolbar:
                                'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | help'
                        }}
                        onEditorChange={this.handleEditorChange}
                        value={this.state.content}
                    />
                    <button onClick={this.handleClick}>Save</button>
                    <button onClick={this.saveOverTemplate}>Save Over Template</button>
                    <button onClick={this.showAllPolicies}>Get All Policies</button>
                    
                    <select onChange={this.selectPolicy}
                            value={this.state.policy}>
                        <option default>Select Policy...</option>
                        { this.state.policies.map(item => (
                            <option key={item.policy}>{item.policy}</option>
                        ))}
                    </select>

                    {/* <div dangerouslySetInnerHTML={{__html: this.state.content}}></div> */}
                </div>
            </div>
        )
    }

第一个看起来和我预期的一模一样，但下面两个不一样。我在控制台中没有收到任何错误，而且我确实看到我请求的所有数据都按预期检索。它只是失去了它的格式。下面是它的照片：知道为什么底部 2 个不同吗？

Answer 1

问题出在编辑器中。您使用的是相同的 'id':

id='myTextArea'

移除它或使用道具。类似于：

id='{props.id}'

TinyMCE 渲染不正确

TinyMCE Rendering Incorrectly

javascript

reactjs

tinymce

tinymce-5