微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

我正在尝试在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 举报,一经查实,本站将立刻删除。