CODEWITHSUNDEEP
reactjsckeditorhtml-parsingckeditor5ckeditor5-react
Mohammed Sabir
Mohammed Sabir

Reputation: 354

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

I am using React-ckeditor 5 package in my project. I am getting an unserialize html data and I am parsing it into html template using React-html-parser package and this parsed data is passed to ckeditor so that it should get display in editable format.

Here is code:

 <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 );
                } }
            />

But this giving me an issue of CKEditorError: datacontroller-set-non-existent-root: Attempting to set data on a non-existing root, I had gone through the provided link in above exception : https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_controller_datacontroller-DataController.html

REACT HTML PARSER giving output as 

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)

Paymeny Thank You. <--- This the text in

tag But I am not getting where I am doing this wrong, please guide. Thanks

Upvotes: 3

Views: 5003

Answers (1)

oleq
oleq

Reputation: 15895

The data property of the component expects a plain string while ReactHtmlParser returns parsed React components. Make sure you pass the right data format to the component:

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

Upvotes: 1

Related Questions