React.js CKEditor5 component - problem in creating the component

Question

I am attempting to integrate CKEditor into our React.js project, using the component found here: https://github.com/ckeditor/ckeditor5-react.

I have used this code in the git repository to define the CKEditor component:

https://github.com/ckeditor/ckeditor5-react/blob/master/src/ckeditor.jsx

And inside my code, I am referencing the component:

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


const TemplateForm = props => {
    return (
        <div>

            /*  Other form fields */

            <CKEditor
                name="body"
                placeholder="Compose message"
                content={ props.defaults.body }
                value={ props.defaults.body }
                errors={ props.errors.body }
                onInput={ props.onInput }
                onChange={ props.onValueChange }
            />

        </div>
    );
};

When I load my page, I get a javascript error "Cannot read property 'create' of undefined" from ckeditor.js - the "this.props.editor" value is not defined. I'm a newbie to react, so I'm sure I'm just missing something pretty straightforward. Suggestions?

From your error, it seems like the CKEditor is expecting a prop named 'editor' to be passed in. you currently have name, content, value, but not 'editor' — Bricky
– Bricky, Commented Sep 24, 2018 at 18:42

Bricky · Accepted Answer · 2018-09-24 18:49:28Z

4

Your error is from the component (CKEditor) expecting a prop with the key 'editor', which you're not currently supplying.

You can probably find a list of options in their docs, but checking their repo I found this example where they're setting the editor to ClassicEditor which you're already importing:

https://github.com/ckeditor/ckeditor5-react/blob/master/sample/index.html

So this should work:

<CKEditor
  name="body"
  placeholder="Compose message"
  content={ props.defaults.body }
  editor={ ClassicEditor }
  value={ props.defaults.body }
  errors={ props.errors.body }
  onInput={ props.onInput }
  onChange={ props.onValueChange }
/>

answered Sep 24, 2018 at 18:49

Bricky

2,27417 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andy Wallace Over a year ago

Thanks so much. That fixed my issue - I figured it was something simple. Still trying to wrap my head around react/props/etc.

Collectives™ on Stack Overflow

React.js CKEditor5 component - problem in creating the component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related