React.js CKEditor5 组件 - 创建组件时出现问题

Question

我正在尝试将 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>
    );
};

当我加载我的页面时，我从 ckeditor.js 收到 javascript 错误 "Cannot read property 'create' of undefined" - "this.props.editor" 值未定义。我是一个反应新手，所以我确定我只是错过了一些非常简单的东西。建议？

Answer 1

您的错误来自组件 (CKEditor)，该组件 (CKEditor) 需要一个带有密钥 'editor' 的道具，而您目前并未提供该道具。

您可能可以在他们的文档中找到选项列表，但在检查他们的回购协议时我发现了这个示例，他们将编辑器设置为您已经导入的 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 }
/>

React.js CKEditor5 组件 - 创建组件时出现问题

React.js CKEditor5 component - problem in creating the component

javascript

reactjs

ckeditor5