3

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

Mohammed Sabir
  • 354
  • 1
  • 4
  • 16
  • Can you share a little bit more? Which editor is used? What is `getEditor`? What's the output type of `ReactHtmlParser`? – oleq Aug 01 '19 at 09:17
  • updated. please check @oleq – Mohammed Sabir Aug 01 '19 at 09:27
  • 1
    Looks like the parser returns an array. The component expects [`data` property](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html#component-properties) to be a plain string. – oleq Aug 01 '19 at 10:27
  • "
    Paymeny Thank You.
    " this is the value which should be passed to the data attribute. I faced the same error in which i passed an object instead of the actual value.     – Raphael Jan 12 '22 at 10:17

1 Answers1

1

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}
    // ...
/>
oleq
  • 15,697
  • 1
  • 38
  • 65