CKEditorError: ckeditor-duplicated-modules in next js

Question

所以我的代码是：

import { useEffect, useState, useRef } from "react";

function TextEditor({ token }) {
  const editorRef = useRef();
  const [editorLoaded, setEditorLoaded] = useState(false);
  const { CKEditor, ClassicEditor } = editorRef.current || {};
  const [data, setData] = useState("");

  useEffect(() => {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor,
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic"),
      Paragraph: require("@ckeditor/ckeditor5-paragraph/src/paragraph"),
    };
    setEditorLoaded(true);
  }, []);

  return (
    <div className="bg-[#F8F9FA] h-5/7 overflow-y-scroll max-w-6xl mx-auto">
      {editorLoaded ? (
        <CKEditor
          editor={ClassicEditor}
          data=""
          config={{
            plugins: [Paragraph],
            toolbar: ["bold", "italic"],
          }}
          onReady={(editor) => {
            // You can store the "editor" and use when it is needed.
            console.log("Editor is ready to use!", editor);
          }}
          onChange={(event, editor) => {
            const data = editor.getData();
            setData(data);
          }}
        />
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default TextEditor;

所以问题是我只想要我的编辑器中的段落但是当我运行这个代码时它 returns CKEditorError: ckEditor-duplicated-modules 我也尝试添加 .Paragraph段落导入前面的代码有问题吗

注意下一个js 12

Answer 1

最好的提示是使用 next/script 我猜。

import Script from "next/script";
...
<Script ... />

因为您将以不同的方式在 NextJs 库“外部”导入 CKEditor。

或尝试这种方式：

    const Resumos = () => {
        const editorRef = useRef()
        const [ editorLoaded, setEditorLoaded ] = useState( false )
        const { CKEditor, ClassicEditor} = editorRef.current || {}

        useEffect( () => {
            editorRef.current = {
              CKEditor: require( '@ckeditor/ckeditor5-react' ).CKEditor, //Added .CKEditor
              ClassicEditor: require( '@ckeditor/ckeditor5-build-classic' ),
            }
            setEditorLoaded( true )
        }, [] );
        
      const [data, setData] = useState('');

        return( 
          <>
            {editorLoaded ? <CKEditor
                editor={ ClassicEditor }
                data={data}
                onReady={ editor => {
                  // You can store the "editor" and use when it is needed.
                  console.log('Editor is ready to use!', editor);           
                } }
                onChange={ (event, editor ) => {
                  const data = editor.getData()
                  setData(data);
                } }
            /> : <p>Carregando...</p>}
        </>
        )
    }

编辑配置（删除编辑器选项等）

    <CKEditor
      ...
      config={{
        removePlugins: ['Image', 'ImageCaption', 'ImageStyle', 'ImageToolbar', 'ImageUpload', 'MediaEmbed']
      }}
        ...
    >
    </CKEditor>

编辑工具栏

    <CKEditor
      ...
      toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote' ],
        ...
    >
    </CKEditor>

React ckEditor 集成参考： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html

配置参考： https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/configuration.html

试试这个，让我保持联系。希望这个提示能解决问题！[=16=]

CKEditorError: ckeditor-duplicated-modules in next js

CKEditorError: ckeditor-duplicated-modules in next js

javascript

reactjs

next.js

ckeditor

编辑配置（删除编辑器选项等）

编辑工具栏