CkEditor 5 不适用于 ReactJs 18.2.0答案

【问题标题】：CkEditor 5 not working with ReactJs 18.2.0CkEditor 5 不适用于 ReactJs 18.2.0
【发布时间】：2022-08-06 07:13:49
【问题描述】：

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

按照官方文档here，我已经导入并设置了 CkEditor。

不知何故，它不起作用。编辑器日志返回null

创建产品.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>
    );
}

包.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\"
}

...

控制台错误

浏览器输出不显示工具栏

可能复制到：stackoverflow.com/questions/72974217/…
@Raman，有点不同。对我来说，无论是初始还是刷新，它都不会出现。

标签： javascript reactjs ckeditor ckeditor5

【解决方案1】：

首先，您尝试选择一个 ID 为 createProduct 和 document.getElementById('createProduct') 的元素作为表达式，它本身不包含任何逻辑。如果您尝试检查具有此 id 的元素是否确实存在，请尝试使用例如

var createProduct = document.getElementById('createProduct');

if (createProduct != null && createProduct.value == '') { 
   ... 
}

但是，您只需在 index.js 文件中创建一次 root 元素，并且不建议每次要在文档中呈现单个组件时都创建此元素。因此，如果它有多个页面，您希望使用react-router-dom 库来处理应用程序内部的路由，而不是那样。否则，在index.js 中，您将呈现主要组件，例如，这些组件用于呈现您的页面的导航和容器，或者其中包含Routes 的Router，在单独的页面中呈现单个组件，如果您不尝试创建包含这些的 SPA，例如在App.js 组件中。

Learn more about routing in React apps.

【讨论】：