typescript CKEditor 5 Online Builder无法渲染- React版本

8wigbo56  于 2023-06-24  发布在  TypeScript
关注(0)|答案(2)|浏览(210)

我试图使用CKEditor5的在线构建器在我的React 18应用程序中渲染编辑器,但在我放入代码后,编辑器没有渲染,并且在控制台中,我看到了以下错误。

ckeditor.tsx:156  TypeError: Cannot read properties of undefined (reading 'create')
    at to._createEditor (ckeditor.tsx:169:1)
    at Vr._creator (ckeditor.tsx:133:1)
    at editorwatchdog.js:115:1
    at async to._initializeEditor (ckeditor.tsx:151:1)
    at async to.componentDidMount (ckeditor.tsx:102:1)

我按照说明将下载的CKEditor5文件夹放在我的项目的根目录中。以下是我将编辑器集成到React组件中的代码:

import { CKEditor } from '@ckeditor/ckeditor5-react'
import { Editor } from 'ckeditor5-custom-build/build/ckeditor';

const DashboardPage = () => {
  return (
    <>
      <div className='card'>
        <div className='card-body'>

          {/* begin::Editor */}
          <div className='mx-auto'>
            <CKEditor
              editor={Editor}
              data="<p>Hello from CKEditor 5!</p>"
              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 });
              }}
              onBlur={(event, editor) => {
                console.log('Blur.', editor);
              }}
              onFocus={(event, editor) => {
                console.log('Focus.', editor);
              }
              }
            />
            {/* end::Editor */}
          </div>
        </div>
      </div>
    </>
  )
}

以下是使用的CKEditor5版本,

"@ckeditor/ckeditor5-build-balloon": "^38.0.1",
"@ckeditor/ckeditor5-react": "^6.0.0",
"ckeditor5-custom-build": "file:./ckeditor5",

问题是,我尝试了CKEditor5的预构建classicballoon版本,它们都在页面中呈现得很好。我做错了什么?

u4vypkhs

u4vypkhs1#

我试着研究这个CKEditor 5在线构建器。正如他们在文档中提到的:
如果要使用CKEditor 5在线构建器,请确保未选中看门狗功能。React集成带有已经集成到核心中的看门狗功能。
你可以尝试下面的代码片段:

<CKEditor
        editor={Editor}
        data="<p>Hello from CKEditor 5!</p>"
        watchdogConfig={ { crashNumberLimit: 10 } } //try to add this `watchdogConfig` feature
...
/>

更多参考,这是一个sample example
希望这有帮助!

iyzzxitl

iyzzxitl2#

无论如何,我意识到真正的问题导致问题-我yarn安装了多个预建编辑器,例如,BalloonEditorClassicEditor沿着我的在线构建编辑器,不知何故,他们不能存在在一起,从而导致错误。
把这个放出来给别人参考:)

相关问题