带有 CodeBlock 插件的 NextJS + CKEditor5 失败（全局 CSS 导入错误）

Question

我正在尝试在 NextJS 中使用 CKEditor5。这是我的软件包版本：

"@ckeditor/ckeditor5-build-classic": "^22.0.0",
"@ckeditor/ckeditor5-code-block": "^22.0.0",
"@ckeditor/ckeditor5-react": "^2.1.0",
"next": "9.5.1",

我的组件的相关部分是：

import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';

const editorConfig = {
  toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'codeBlock'],
  plugins: [CodeBlock],
  codeBlock: {
    languages: [
      { language: 'plaintext', label: 'Plain text' },
      { language: 'c', label: 'C' },
      { language: 'cs', label: 'C#' },
      { language: 'cpp', label: 'C++' },
      { language: 'css', label: 'CSS' },
      { language: 'diff', label: 'Diff' },
      { language: 'html', label: 'HTML' },
      { language: 'java', label: 'Java' },
      { language: 'javascript', label: 'JavaScript' },
      { language: 'php', label: 'PHP' },
      { language: 'python', label: 'Python' },
      { language: 'ruby', label: 'Ruby' },
      { language: 'typescript', label: 'TypeScript' },
      { language: 'xml', label: 'XML' }
    ]
  }
};

export default function AddForm() {
  return (
    <CKEditor
      editor={ClassicEditor}
      config={editorConfig}
    />
  )
}

我收到以下错误。

./node_modules/@ckeditor/ckeditor5-code-block/theme/codeblock.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/@ckeditor/ckeditor5-code-block/src/codeblockui.js

正如我所见，CKEditor CodeBlock 插件尝试在包中导入全局 CSS。以下是 codeblockui.js 中的 node_modules 包中的一个示例：

import '../theme/codeblock.css'; 如何解决这个问题？

Answer 1

既然你用的是

NextJs

，那你一定要考虑NextJs

css import rules

。

如果你想在组件（模块）中导入css文件，css文件名必须类似于

[any name].module.css

。

如何导入：

import styles from './index.module.css';

使用方法：

<div className={`${styles.class1} ${styles.class2}`}> 如果您的 css 文件不符合命名规则，则会出现错误。

您也可以以正常方式仅在

_app.js

内导入任意名称的css文件。

Answer 2

您在 package.json 中设置了

type

 或 

module

 吗？

如果有任何希望可以升级软件包，或者复制整个存储库并检查它是否是遗留问题？

我也想到了 Node 版本，但我也遇到了 NextJS 13 和 Node LTS 的问题，我认为这与设置

type: module

 有关（或者可以说：不设置）。由于另一个问题，我不得不启用一次它，然后最终走进了它，不需要该属性。

在 NextJS 9 之前，您必须使用允许从任何地方导入的 next-css 包，因此如果有该包，请卸载该包（还请提供整个 package.json 和 next.config。

如果您使用多个 CSS 文件，请从 _app.js 导入它们，请阅读这也可能会引入冲突。

否则我建议另外显示 tsconfig/jsconfig，如果你在 monorepo 或单个包中，你会如何

Answer 3

由于它是下一个 js 方面的限制，因此完成此操作的最简单方法是使用来自

https://ckeditor.com/ckeditor-5/online-builder/ 的自定义构建版本

添加您想要的所有插件，然后按照

https://ckeditor.com/docs/ckeditor5/latest/installation/frameworks/react.html#integrating-a-build-from-the-online-builder 中的说明进行操作

我已经在next js 12.2.2上尝试过了

    import { useRef } from 'react';

    import { CKEditor } from '@ckeditor/ckeditor5-react';
    import DecoupledEditor from 'ckeditor5-custom-build/build/ckeditor';

    const Editor = () => {
        const editorRef = useRef(null);

        return (
            <CKEditor
                editor={DecoupledEditor}
                data="<p>Hello from CKEditor 5!</p>"
                style={{ height: 500 }}
                config={{
                    codeBlock: {
                        languages: [
                            { language: 'plaintext', label: 'Plain text' },
                            { language: 'c', label: 'C' },
                            { language: 'cs', label: 'C#' },
                            { language: 'cpp', label: 'C++' },
                            { language: 'css', label: 'CSS' },
                            { language: 'diff', label: 'Diff' },
                            { language: 'html', label: 'HTML' },
                            { language: 'java', label: 'Java' },
                            { language: 'javascript', label: 'JavaScript' },
                            { language: 'php', label: 'PHP' },
                            { language: 'python', label: 'Python' },
                            { language: 'ruby', label: 'Ruby' },
                            { language: 'typescript', label: 'TypeScript' },
                            { language: 'xml', label: 'XML' }
                        ]
                    }

                }}
                onReady={editor => {
                    // You can store the "editor" and use when it is needed.
                    console.log('Editor is ready to use!', editor);
                    editor.ui.getEditableElement().parentElement.insertBefore(
                        editor.ui.view.toolbar.element,
                        editor.ui.getEditableElement()
                    );

                    editorRef.current = editor;
                }}
                onChange={(event, editor) => {
                    const data = editor.getData();
                    console.log({ event, editor, data });
                }}
                onBlur={(event, editor) => {
                    console.log('Blur.', editor);
                }}
                onFocus={(event, editor) => {
                    console.log('Focus.', editor);
                }}

                onError={(error, { willEditorRestart }) => {
                    // If the editor is restarted, the toolbar element will be created once again.
                    // The `onReady` callback will be called again and the new toolbar will be added.
                    // This is why you need to remove the older toolbar.
                    if (willEditorRestart) {
                        if (editorRef.current) {
                            editorRef.current.ui.view.toolbar.element.remove();
                        }
                    }
                }}
            />
        )
    }

    export default Editor

Answer 4

@hco 您必须使用默认情况下具有代码块插件的自定义构建。

https://ckeditor.com/ckeditor-5/online-builder/ 您可以在上述站点上构建它并将其用作 npm 包。 这是我根据我的要求创建的包。

https://www.npmjs.com/package/ckeditor5-custom-build-mathtype-imageresize