我试图使用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的预构建classic
,balloon
版本,它们都在页面中呈现得很好。我做错了什么?
2条答案
按热度按时间u4vypkhs1#
我试着研究这个CKEditor 5在线构建器。正如他们在文档中提到的:
如果要使用CKEditor 5在线构建器,请确保未选中看门狗功能。React集成带有已经集成到核心中的看门狗功能。
你可以尝试下面的代码片段:
更多参考,这是一个sample example。
希望这有帮助!
iyzzxitl2#
无论如何,我意识到真正的问题导致问题-我
yarn
安装了多个预建编辑器,例如,BalloonEditor
和ClassicEditor
沿着我的在线构建编辑器,不知何故,他们不能存在在一起,从而导致错误。把这个放出来给别人参考:)