Question 191684 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – CKEditor5 Online Builder Failed to Render – React Version

I was trying to use the CKEditor5’s online builder to render the editor in my React 18 app but after I put my code in, the editor did not render and in the console, I saw the following error.

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)

I followed the instruction to put the downloaded CKEditor5 folder in the root directory of my project. The following is my code to integrate the editor into the React component,

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

These are the versions of the CKEditor5 used,

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

The thing is that I tried the prebuilt classic, balloon versions of CKEditor5 they all render nicely in the page. What did I do wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Anyway I realised the real issue causing the problem - I yarn installed multiple prebuilt editors e.g., BalloonEditor and ClassicEditor along with my online built editor and somehow they cannot exist together hence causing the error.

    Putting this out there for others' reference :)


  2. 0

    I tried to research this CKEditor 5 online builder. As they mentioned in their docs:

    If you want to use the CKEditor 5 online builder, make sure that the watchdog feature is not selected. The React integration comes with the watchdog feature already integrated into the core.

    You could try the below snippet:

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

    For more reference, this is a sample example.

    Hope this helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search