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

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

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

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

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

  1. import { CKEditor } from '@ckeditor/ckeditor5-react'
  2. import { Editor } from 'ckeditor5-custom-build/build/ckeditor';
  3. const DashboardPage = () => {
  4. return (
  5. <>
  6. <div className='card'>
  7. <div className='card-body'>
  8. {/* begin::Editor */}
  9. <div className='mx-auto'>
  10. <CKEditor
  11. editor={Editor}
  12. data="<p>Hello from CKEditor 5!</p>"
  13. onReady={editor => {
  14. // You can store the "editor" and use when it is needed.
  15. console.log('Editor is ready to use!', editor);
  16. }}
  17. onChange={(event, editor) => {
  18. // const data = editor.getData();
  19. // console.log({ event, editor, data });
  20. }}
  21. onBlur={(event, editor) => {
  22. console.log('Blur.', editor);
  23. }}
  24. onFocus={(event, editor) => {
  25. console.log('Focus.', editor);
  26. }
  27. }
  28. />
  29. {/* end::Editor */}
  30. </div>
  31. </div>
  32. </div>
  33. </>
  34. )
  35. }

以下是使用的CKEditor5版本,

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

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

u4vypkhs

u4vypkhs1#

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

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

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

iyzzxitl

iyzzxitl2#

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

相关问题