Ckeditor CK编辑器div标记将替换为p标记(React JS)

Ckeditor CK编辑器div标记将替换为p标记(React JS),ckeditor,ckeditor5,Ckeditor,Ckeditor5,我正在使用CK编辑器并将初始数据传递给编辑器,如下所示 import React from 'react'; import CKEditor from '@ckeditor/ckeditor5-react'; import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; classEditor extends React.Component{ constructor(props){ super(props) this.state=

我正在使用CK编辑器并将初始数据传递给编辑器,如下所示

import React from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

classEditor extends React.Component{
constructor(props){
super(props)
this.state={
editorState:'<div class="main"><div class="child-1"><div>Iam inside </div></div><div class="child-2">Child 2</div></div>'
}
}
render(){
return           <CKEditor
                      editor={ClassicEditor}
                      data={this.state.editorState}
                      onInit={editor => {
                        // You can store the "editor" and use when it is needed.
                        console.log('Editor is ready to use!', editor);
                      }}
                      config={{
                        allowedContent:true,
                        extraAllowedContent:true
                      }}
                      onChange={(event, editor) => {
                        const data = editor.getData();
                        this.handleEditorChange(data);
                        console.log(data);
                      }}
                    />
}
}
从“React”导入React;
从“@CKEditor/ckeditor5 react”导入CKEditor;
从“@ckeditor/ckeditor5 build classic”导入ClassicEditor;
类编辑器扩展了React.Component{
建造师(道具){
超级(道具)
这个州={
编辑状态:“我在孩子2里面”
}
}
render(){
返回{
//您可以存储“编辑器”,并在需要时使用它。
log('Editor已准备好使用!',Editor);
}}
配置={{
允许内容:正确,
额外允许的内容:正确
}}
onChange={(事件,编辑器)=>{
const data=editor.getData();
此.handleEditorChange(数据);
控制台日志(数据);
}}
/>
}
}
当调用OnChange处理程序时,它会将最初传递的html更改为如下内容

<p>Iam inside</p><p>Child 2</p>
Iam内部

Child 2

如何阻止CK编辑器用p标记替换div标记并允许自定义样式和类名

Nikhil 关于您的帖子,您似乎要在编辑器中为内联文本创建一个自定义主题。。我不确定这是否正确。 但是,如果是这样,您可以自定义编辑器主题并将其用于您的目的。 CKEditor具有强大的内置功能。 此外,如果要自定义编辑器,可以这样做。 请查看以下链接: 希望这有帮助。

config.protectedSource.push(/]*>/g);
config.protectedSource.push(/<p[^>]*><\/p>/g);
在editorConfig中使用此代码

CKEDITOR.editorConfig = function (config) {
    config.protectedSource.push(/<i[^>]*><\/i>/g);  };
CKEDITOR.editorConfig=函数(配置){
config.protectedSource.push(/]*>/g);};

此配置选项有帮助吗<代码>输入模式:CKEDITOR。输入\u DIV