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

编程问答 2022-06-12

问题描述

我正在尝试在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';

我该如何解决这个问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ckeditorckeditorckeditorckeditor5-reactreactjsreactjsreactjsreactjs