Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs NextJS+;带有代码块插件的CKEditor5失败(全局CSS导入错误)_Reactjs_Ckeditor_Next.js_Ckeditor5 React - Fatal编程技术网

Reactjs NextJS+;带有代码块插件的CKEditor5失败(全局CSS导入错误)

Reactjs NextJS+;带有代码块插件的CKEditor5失败(全局CSS导入错误),reactjs,ckeditor,next.js,ckeditor5-react,Reactjs,Ckeditor,Next.js,Ckeditor5 React,我正在尝试在NextJS中使用CKEditor5。以下是我的软件包版本: "@ckeditor/ckeditor5-build-classic": "^22.0.0", "@ckeditor/ckeditor5-code-block": "^22.0.0", "@ckeditor/ckeditor5-react": "^2.1.0", "next": &qu

我正在尝试在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}
    />
  )
}
正如我看到的,CKEditor代码块插件试图在包中导入全局CSS。下面是codeblockui.js中node_模块包中的一个示例:

import '../theme/codeblock.css';

如何解决此问题?

尝试删除/注释ckeditor导入css的行,并将该css导入到您的_app.js中。它不在某个位置,其中有很多。而且我正在寻找一种不编辑库的解决方案。此外,我只想在必要的页面中导入它们。今天遇到了这个问题。运气好吗?
import '../theme/codeblock.css';