Question

我正在使用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);
                      }}
                    />
}
}

调用OnChange处理程序时，它会将最初传递的html更改为这样的

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

如何停止CK Editor用p标签替换div标签并允许customStyles和classNames

Answer 1

尼基尔关于您的帖子，似乎您将要在编辑器中为嵌入式文本创建自定义主题。.我不确定这是否正确。但是，如果是这样，则可以自定义编辑器主题并将其用于您的目的。 CKEditor具有强大的内置功能。另外，如果要自定义编辑器，则可以执行。请查看以下链接： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/basic-api.html#creating-an-editor https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/theme-customization.html 希望对您有所帮助。

Answer 2

config.protectedSource.push(/<p[^>]*><\/p>/g);

在editorConfig中使用此代码

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

CK Editor的div标签被p标签替换（React JS）

2 个答案: