如何将 CKEditor 5 与 Next.js 中的 MathTyp 插件一起使用

Question

我在 Next.js 应用程序中使用 MathType 插件运行 CKEditor5 时遇到问题。 当我打开数学面板时，我看不到或执行附件中的任何操作，这是怎么回事：

这是我正在使用的代码： 请帮助解决此问题以及需要执行哪些步骤才能使其正常工作？

// @ts-nocheck
import React, { useEffect, useState } from "react";
import dynamic from 'next/dynamic'

const CKEditor = dynamic(
  () => import('@ckeditor/ckeditor5-react').then(module => module.CKEditor),
  { ssr: false }
);
// import ClassicEditor from "ckeditor5-build-classic-mathtype";
import ClassicEditor from "ckeditor5-mathtype/build/ckeditor";
// const ClassicEditor = dynamic(() => import('ckeditor5-classic-with-mathtype').then(module => module.ClassicEditor), { ssr: false })
// import ClassicEditor from 'ckeditor5-classic-with-mathtype';

export default function RichTextEditor() {
  const [ckData, setCkData] = useState("");
  const [loading, setLoading] = useState(true)
  useEffect(() => {
    setTimeout(() => {
      setLoading(false)
    }, 3000);
  }, [])
  
  return (
    <React.Fragment>
      {!loading ? <CKEditor
        editor={ClassicEditor}
        config={{
          toolbar: {
            shouldNotGroupWhenFull: true,
            items: [
              "heading",
              "fontsize",
              "alignment",
              "fontColor",
              "fontBackgroundColor",
              "outdent",
              "indent",
              "|",
              "bold",
              "italic",
              "link",
              "bulletedList",
              "numberedList",
              "imageUpload",
              "mediaEmbed",
              "insertTable",
              "blockQuote",
              "undo",
              "redo",
              "|",
              "MathType",
              "ChemType"
            ]
          }
        }}
        data={ckData}
        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();
          // console.log({ event, editor, data });
          setCkData(data);
        }}
      />: 'loading text editor...'}
      <div>{ckData}</div>
    </React.Fragment>
  );
}

Answer 1

看起来编辑器没有正确加载。请发送电子邮件至 [email protected]，我们将为您提供进一步的帮助以解决问题。谢谢！