[英]CKEditor 4 changes html div tag to p tag
我想知道如何使用 CKEditor 4 reactjs 顯示 html。 它顯示編輯器,但內聯樣式被刪除,所有 div 標簽都更改為 P 標簽。
如何在不將 div 更改為 P 標記的情況下按原樣顯示 html
import React from "react";
import CKEditor from 'ckeditor4-react';
class Editor extends React.PureComponent{
constructor(props) {
super(props);
this.state = {
config: {
extraAllowedContent: 'div(*)',
allowedContent: true
}
emailbody: `
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color: #DAD5CE; font-family:'browntt-regular', Verdana, Geneva, Tahoma, sans-serif">
<div class="content-box" style="display: block; align-items: center; justify-content: center; margin:25px 0">
<div style="height:100%; text-align: center;display:block; ">
<div style="font-weight: normal; font-size: 24pt; color: #000">order confirmation</div>
<div class="orderdate" style="font-size: 12pt; color: #51545D">order date:
<span style="color: #B39137;">${orderdate!''} </span>
</div>
</div>
</div>
</body>
</html>`
}
handleChange = value => {
this.setState({ emailbody: value });
}
render(){
<div>
<CKEditor
data={this.state.emailbody}
onChange={this.handleChange}
config={this.config}
/>
</div>
}
}
要解決此問題,請使用“react-ckeditor-component”而不是“ckeditor4-react”,如下所示:
import CKEditor from 'react-ckeditor-component';
class Editor extends React.PureComponent{
constructor(props) {
super(props);
this.state = {
emailbody: `
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color: #DAD5CE; font-family:'browntt-regular', Verdana, Geneva, Tahoma, sans-serif">
<div class="content-box" style="display: block; align-items: center; justify-content: center; margin:25px 0">
<div style="height:100%; text-align: center;display:block; ">
<div style="font-weight: normal; font-size: 24pt; color: #000">order confirmation</div>
<div class="orderdate" style="font-size: 12pt; color: #51545D">order date:
<span style="color: #B39137;">${orderdate!''} </span>
</div>
</div>
</div>
</body>
</html>`
}
handleChange = (event) => {
this.setState({
emailbody: event.target.value
});
};
render(){
<div>
<CKEditor
content={this.state.content}
config={{
extraAllowedContent: 'div(*)',
allowedContent: true
}}
events={{
change: this.handleChange
}}
/>
</div>
}
}
浪費太多時間后,我得到了上述問題的解決方案,請欣賞
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.