reactjs CKEditor 5如何在Next.JS上工作?

utugiqy6  于 2023-06-22  发布在  React
关注(0)|答案(2)|浏览(105)

我有以下问题:
未处理的运行时错误:元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:您可能忘记了从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。检查Resumos的渲染方法。
这些不同的解决方案不起作用:
解决方案1:

import dynamic from "next/dynamic";

const { CKEditor } = dynamic(
  () => {
    return import('@ckeditor/ckeditor5-react');
  },
  { ssr: false }
);

const {ClassicEditor} = dynamic(
  () => {
    return import('@ckeditor/ckeditor5-build-classic');
  },
  { ssr: false }
);

const Resumos = ({id}) => {
  <CKEditor 
       editor={ ClassicEditor }
       data={textoResumoAluno}
       onChange={handleChangeTextoResumoAluno}
  />
}

溶液2:

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

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

{editorLoaded ? ( 
      <CKEditor
           editor={ ClassicEditor }
           data={textoResumoAluno}
           onInit={ editor => { /*You can store the "editor" and use when it is needed.
                 console.log('Editor is ready to use!', editor)*/
            }}
           onChange={handleChangeTextoResumoAluno}
       /> 
  ) : (
          <div>Editor loading</div>
  )}
}
fruv7luv

fruv7luv1#

谢谢@EstusFlask,它帮助我找到了解决方案!

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>}
     </>
     )
}
jjhzyzn0

jjhzyzn02#

实际上,你可以这样做:https://stackoverflow.com/a/72813101/4345461
(添加了我的版本,下面有一些改进,以减少点击-如果这对您有帮助,请也支持原始答案)
@/components/CKEditor/ClassicCKEditor:

"use client";

import React from "react";
import { CKEditor } from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

function ClassicCKEditor({
  data,
  onChange,
}: {
  data: string;
  onChange: (event: any, editor: ClassicEditor) => void;
}) {
  return (
    <CKEditor
      editor={ClassicEditor}
      data={data}
      onReady={(editor) => {
        console.log("ClassicCKEditor is ready to use!", editor);
      }}
      onChange={(event, editor) => {
        const data = editor.getData();
        console.log({ event, editor, data });
        onChange(event, editor);
      }}
      onBlur={(event, editor) => {
        console.log("Blur.", editor);
      }}
      onFocus={(event, editor) => {
        console.log("Focus.", editor);
      }}
    />
  );
}

export default ClassicCKEditor;

EmailTemplateView.tsx

"use client";

import dynamic from "next/dynamic";
import { useCallback } from "react";

interface Params {
  uid: string;
}

interface AllParameters {
  params: Params;
  searchParams: any;
}

const ClassicCKEditor = dynamic(
  () => import("@/components/CKEditor/ClassicCKEditor"),
  { ssr: false }
);

export default function EmailTemplateView({ params }: AllParameters) {
  const onCKChange = useCallback((value: any) => {
    console.log("CK Change");
    console.log("value", value);
  }, []);

  return (
    <div>
      <h2>Using CKEditor 5 build in React</h2>

      <ClassicCKEditor
        data={"<p>Hello from CKEditor 5!</p>"}
        onChange={onCKChange}
      />
    </div>
  );
}

相关问题