reactjs - react -ckeditor5 : CKEditorError: datacontroller-set-non-existent-root: Attempting to set data on a non-existing root

Question

我在我的项目中使用 React-ckeditor 5 包。我得到一个反序列化的 html 数据，我正在使用 React-html-parser 包将它解析成 html 模板，并将这个解析的数据传递给 ckeditor，以便它应该以可编辑的格式显示。

代码如下:

 <CKEditor
                editor={ getEditor(this.props.editor) }
                data= {ReactHtmlParser(this.props.html)}

                onChange={ ( event, editor ) => {
                    const data = editor.getData();
                    console.log( { event, editor, data } );
                    this.props.onEmailChange(data)
                } }
                onBlur={ editor => {
                    console.log( 'Blur.', editor );
                } }
                onFocus={ editor => {
                    console.log( 'Focus.', editor );
                } }
            />

但是这给了我一个问题 CKEditorError: datacontroller-set-non-existent-root: Attempting to set data on a non-existing root，我已经通过上面异常中提供的链接: https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_controller_datacontroller-DataController.html

REACT HTML PARSER 输出为

Array(1)
0:
$$typeof: Symbol(react.element)
key: "0"
props:
children: ["<div> Paymeny Thank You. </div>"]
key: (...)
get key: ƒ warnAboutAccessingKey()
__proto__: Object
ref: null
type: "p"
_owner: FiberNode {tag: 1, key: null, elementType: ƒ, type: ƒ, stateNode: AllCKEditor, …}
_store: {validated: false}
_self: null
_source: null
__proto__: Object
length: 1
__proto__: Array(0)

付款谢谢。 <--- 这是

标签中的文本 但是我没有得到我做错的地方，请指导。 谢谢

Answer 1

组件的 data 属性需要一个纯字符串，而 ReactHtmlParser 返回解析后的 React 组件。确保将正确的数据格式传递给组件:

<CKEditor
    editor={getEditor(this.props.editor)}
    data= {this.props.html}
    // ...
/>