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錯誤“無法讀取屬性'創建'未定義” - 未定義“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 }
/>