Компонент React.js CKEditor5 - проблема при создании компонента

Я пытаюсь интегрировать CKEditor в наш проект React.js, используя компонент, найденный здесь: https://github.com/ckeditor/ckeditor5-react.

Я использовал этот код в репозитории git для определения компонента CKEditor:

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

И внутри моего кода я ссылаюсь на компонент:

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

Когда я загружаю свою страницу, я получаю сообщение об ошибке javascript «Невозможно прочитать свойство« создать »из неопределенного» из ckeditor.js - значение «this.props.editor» не определено. Я новичок, чтобы реагировать, поэтому я уверен, что просто упускаю что-то довольно простое. Предложения?


reactjs javascript ckeditor5
person Andy Wallace    schedule 24.09.2018    source источник
comment
Судя по вашей ошибке, похоже, что CKEditor ожидает передачи реквизита с именем «редактор». В настоящее время у вас есть имя, контент, значение, но не «редактор».   -  person Bricky    schedule 24.09.2018

Ответы (1)


arrow_upward
3
arrow_downward

Ваша ошибка связана с компонентом (CKEditor), ожидающим поддержку с ключом «редактор», который вы в настоящее время не предоставляете.

Вы, вероятно, можете найти список параметров в их документах, но, проверяя их репо, я нашел этот пример, где они устанавливают редактор на ClassicEditor, который вы уже импортируете:

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

Итак, это должно работать:

<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 }
/>
person Bricky    schedule 24.09.2018
comment
Спасибо большое. Это решило мою проблему - я подумал, что это что-то простое. Все еще пытаюсь понять реакцию/реквизит/и т.д. - person Andy Wallace; 24.09.2018