Блог

Я пытаюсь использовать CKEditor5 в NextJS. Вот мои версии пакетов:

 "@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 в пакет, как я вижу. Вот один пример в пакете node_modules в codeblockui.js:

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

Как я могу решить эту проблему?

Поскольку вы используете NextJs , вы должны рассмотреть NextJS css import rules .

Если вы хотите импортировать файл css внутри ваших компонентов (модуля), имя файла css должно быть примерно таким [any name].module.css .

Как импортировать:

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

Как использовать:

 <div className={`${styles.class1} ${styles.class2}`}>
  

Если ваш файл css не соответствует правилу именования, вы получили ошибку.

Также вы можете импортировать файл css с любым именем только внутри _app.js обычным способом.

вы установили type или module в package.json?

Если есть надежда, что вы могли бы обновить пакеты или скопировать весь репозиторий и проверить, является ли это устаревшей проблемой?

Версия узла тоже приходит на ум, но у меня также была проблема с NextJS 13 и Node LTS, я думаю, это было связано с настройкой type: module (или, скажем,: не настройка). Мне пришлось включить его один раз из-за другой проблемы, затем, наконец, вошел в него, в этих свойствах нет необходимости.

до NextJS 9 вам приходилось использовать пакет next-css, который позволял импортировать из любого места, поэтому удалите этот пакет, если он у вас есть (также предоставьте весь package.json, пожалуйста. и next.config.

Если вы используете несколько файлов CSS, импортируйте их все из _app.js , прочитайте, что также может привести к конфликтам.

В противном случае я рекомендую дополнительно показать tsconfig / jsconfig, если вы находитесь в monorepo или одном пакете, как вы

Поскольку это ограничение на стороне next 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

Я попробовал это на следующем 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