我的 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不同?