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

utugiqy6 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(106)

我有以下问题：
未处理的运行时错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。检查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>
  )}
}

reactjs

来源：https://stackoverflow.com/questions/66681320/how-ckeditor-5-works-at-next-js

2条答案

按热度按时间

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

赞(0）回复(0）举报 2023-06-22

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>
  );
}

赞(0）回复(0）举报 2023-06-22

我来回答

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

2条答案

相关问题

热门标签

最新问答