javascript - CKEditor 4 将 html div 标签更改为 p 标签
问题描述
我想知道如何使用 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>
}
}
在浪费了太多时间之后,我得到了上述问题的解决方案,请欣赏
推荐阅读
- c - 我不明白如何使用 cJSON 将 JSON 文件解析为结构
- java - 从二进制转换中删除前导零
- c# - 将动画连接到运动时,不断弹出错误 UnassignedReferenceException
- ios - Firebase Push 静默推送通知 HTTP v1
- python - 如何检查 Pandas/NumPy 任意对象是否包含 NaT/NaN/Null
- c# - Blazor:范围类型输入的 OnHold 场景(可能吗?)
- xamarin.forms - 如何获取 BindableProperty 的值?
- python - 当我将变量定义为项目的拆分时,我不能只打印变量吗?
- python - 计算线性百分比差异
- git - 远程查找分支上的 git commit 和 tag 信息