CkEditor 5不使用ReactJ18.2.0

Question

我正在开发一个ReactJs (v18.2.0)项目，它需要与CkEditor5集成。

在正式文档这里之后，我导入并设置了CkEditor。

不知怎么的，它不起作用。编辑器的日志返回null

CreateProduct.jsx

import React, { useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

...
<div>
    <CKEditor
        editor={ClassicEditor}
        data="<p>Hello World</p>"
        onReady={editor => {
            console.log(editor)
        }}
        onChange={(event, editor) => {
            console.log(editor.getData())
        }}

        onBlur={(event, editor) => {}}

        onFocus={(event, editor) => {}}
    />
</div>

...
export default CreateProduct;

if (document.getElementById('createProduct')) {

    const container = document.getElementById('createProduct');
    const root = createRoot(container);
    root.render(
        <React.StrictMode>
            <CreateProduct />
        </React.StrictMode>
    );
}

package.json .

"devDependencies": {
    "@babel/preset-react": "^7.13.13",
    "@ckeditor/ckeditor5-build-classic": "^34.2.0",
    "@ckeditor/ckeditor5-react": "^5.0.2",
    "@fortawesome/fontawesome-free": "^6.1.1",
    "@popperjs/core": "^2.10.2",
    "@table-library/react-table-library": "^4.0.10",
    "@tailwindcss/forms": "^0.5.2",
    "autoprefixer": "^10.4.7",
    "axios": "^0.27.2",
    "bootstrap": "^5.2.0",
    "check-npm": "^1.0.0",
    "formik": "^2.2.9",
    "laravel-mix": "^6.0.49",
    "lodash": "^4.17.19",
    "postcss": "^8.4.14",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.53.0",
    "sass-loader": "^13.0.2",
    "sweetalert2": "^11.4.23",
    "sweetalert2-react-content": "^5.0.1",
    "tailwindcss": "^3.1.6",
    "yup": "^0.32.11"
}

..。

控制台错误

​

浏览器输出不显示工具栏

​

Answer 1

在我的例子中，CKEditor根本没有出现。

我通过删除<React.StrictMode>修复了它

希望它有帮助:)