Question

我正在尝试使用位于https://github.com/ckeditor/ckeditor5-react的组件将CKEditor集成到我们的React.js项目中。

我已经在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错误“无法读取未定义的属性'create'（未定义）”-未定义“ this.props.editor”值。我是个新手，所以我敢肯定我只是缺少一些简单明了的东西。有建议吗？

Answer 1

您的错误是由于组件（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 }
/>

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

1 个答案: