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

JS

使用NextJS和CKEditor5创建富文本编辑器是一项常见的任务。其中，CodeBlock插件是一个非常有用的插件，它允许我们在编辑器中添加代码块。然而，有时当我们尝试将这两个技术结合在一起时，可能会遇到一些问题。其中一个常见的问题是全局CSS导入错误。

当我们尝试将NextJS和CKEditor5与CodeBlock插件一起使用时，我们通常会遇到一个问题，即全局CSS导入错误。这是由于NextJS的CSS模块化特性所引起的。在NextJS中，每个页面都有自己的CSS作用域，因此全局CSS样式不会自动应用于所有页面。

为了解决这个问题，我们需要修改NextJS的配置，以便正确导入全局CSS样式。首先，我们需要在NextJS项目的根目录中创建一个名为next.config.JS的文件。然后，我们可以在该文件中添加以下代码：

Javascript
// next.config.JS
const withCSS = require('@zeit/next-CSS');
module.exports = withCSS({
  CSSModules: false,
});

这段代码使用@zeit/next-CSS插件来处理CSS导入。我们将CSSModules选项设置为false，以确保全局CSS样式可以正常导入。

在完成这些配置后，我们可以尝试重新运行项目，看看是否成功解决了全局CSS导入错误的问题。如果一切顺利，我们应该能够正常使用NextJS和CKEditor5与CodeBlock插件了。

示例代码：

Javascript
import React from 'react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock';
const Editor = () => {
  const editorConfig = {
    plugins: [CodeBlock],
    toolbar: ['heading', '|', 'codeBlock', '|', 'bold', 'italic', 'link'],
    codeBlock: {
      languages: [
        { language: 'plAIntext', label: 'PlAIn text' },
        { language: 'c', label: 'C' },
        { language: 'cpp', label: 'C++' },
        { language: 'Javascript', label: 'JavaScript' },
        { language: 'Python', label: 'Python' },
      ],
    },
  };
  return (
    <div>
      <h1>使用CKEditor5的NextJS示例</h1>
      <CKEditor editor={ClassicEditor} config={editorConfig} />
    </div>
  );
};
export default Editor;

在这个示例代码中，我们首先导入所需的库和组件。然后，我们定义了一个Editor组件，它包含一个使用CKEditor5的富文本编辑器。我们还使用了CodeBlock插件来添加代码块功能。

在editorConfig对象中，我们配置了所需的插件和工具栏选项。我们还指定了可用的代码块语言，如C、C++、JavaScript和Python。

最后，我们将Editor组件导出并在其他页面中使用。通过这个示例代码，我们可以在NextJS中成功使用CKEditor5和CodeBlock插件，从而创建一个功能强大的富文本编辑器。