Javascript CKEditor 4将html div标记更改为p标记_Javascript_Reactjs_Redux_Ckeditor_Ckeditor4.x

Javascript CKEditor 4将html div标记更改为p标记

javascript reactjs redux ckeditor

Javascript CKEditor 4将html div标记更改为p标记,javascript,reactjs,redux,ckeditor,ckeditor4.x,Javascript,Reactjs,Redux,Ckeditor,Ckeditor4.x,我想知道如何使用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);

我想知道如何使用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”导入React；
从“ckeditor4 react”导入CKEditor；
类编辑器扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
配置：{
extraAllowedContent:'div（*）'，
允许内容：正确
}
电子邮件正文：`
订单确认
订购日期：
${orderdate！'}
`
}
handleChange=值=>{
this.setState（{emailbody:value}）；
}
render（）{
}
}

要解决此问题，请使用“react-ckeditor组件”，而不是像这样使用“ckeditor 4 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>
    }

}

从'react CKEditor component'导入CKEditor；
类编辑器扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
电子邮件正文：`
订单确认
订购日期：
${orderdate！'}
`
}
handleChange=（事件）=>{
这是我的国家({
emailbody:event.target.value
});
};
render（）{
}
}

在浪费了太多时间后，我得到了上述问题的解决方案，请欣赏