this.props.editor.create is not a function in CKEditor - NextJS

user_3436248 0
Viewed 1881

I'm following the steps from this. And my CKEditor now can run on my nextjs app. But the problem is when I wanna put simpleUploadAdapter, there is an error message saying props.editor.create is not a function. Here's the code :

import Head from 'next/head'
import styles from '../styles/Home.module.css'

import React, { useState, useEffect, useRef } from 'react'

export default function Home() {
  const editorCKRef = useRef()
  const [editorLoaded, setEditorLoaded] = useState(false)
  const { CKEditor, SimpleUploadAdapter, ClassicEditor } = editorCKRef.current || {}

  useEffect(() => {
    editorCKRef.current = {
      CKEditor: require('@ckeditor/ckeditor5-react'),
      // SimpleUploadAdapter: require('@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter'),
      ClassicEditor: require('@ckeditor/ckeditor5-build-classic')
    }
    setEditorLoaded(true)
  }, [])

  return (
    <div className={styles.container}>
      <Head>
        <title>My CKEditor 5</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <h2>Using CKEditor 5 build in Next JS</h2>
      {editorLoaded && ClassicEditor &&
        <CKEditor
          name="editor"
          editor={ typeof ClassicEditor !== 'undefined' ? 
            ClassicEditor.create(
              document.getElementsByName("editor"), {
                 plugins: [ SimpleUploadAdapter],
                //toolbar: [ ... ],
                simpleUpload: {
                    // The URL that the images are uploaded to.
                    uploadUrl: 'http://example.com',
        
                    // Enable the XMLHttpRequest.withCredentials property.
                    withCredentials: false
                }
              }

              ): ''
          }
          data="<p>Hello from CKEditor 5!</p>"
          onInit={ 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('ON CHANGE')
              // console.log(ClassicEditor.create())
              // console.log( { event, editor, data } );
          } }
          onBlur={ ( event, editor ) => {
              console.log( 'Blur.', editor );
          } }
          onFocus={ ( event, editor ) => {
              console.log( 'Focus.', editor );
          } }

          config={
            {
              simpleUpload: {
                uploadUrl: 'localhost:8000/api/files/upload/question/1'
              }
            }
          }

        />
      }
      
    </div>
  )
}

and this is the error: enter image description here

So what's the problem in here? Thank you

next.js ckeditor
2 Answers

I got mine to work by wrapping the CKEditor component in a class component of my own.

    class RichTextEditor extends React.Component<Props, State> {
      render() {
        const { content } = this.props;
        return (
          <CKEditor
            editor={ClassicEditor}
            data={content}
          />
        );
      }
    }

It seems CKEditor just doesn't play nice with function components. Then use dynamic import to load the wrapper if you're using NextJS.

    const RichTextEditor = dynamic(() => import("/path/to/RichTextEditor"), {
        ssr: false,
    });
user_31448390

I remembered that CKEditor4 is easier to setup in Next.js. CKEditor5 require more work, you have to use dynamic import with mode ssr=false

But in your case, you also want to use another plugin SimpleUploadAdapter

I tried using CKEditor React component + build classic + SimpleUploadAdapter but meets the error "Code duplication between build classic and source (SimpleUploadAdapter)".

So I decided to custom the ckeditor5-build-classic, add the plugin into there and rebuild, then make it works :)(https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html)

Here are few remarks:

  • Custom ckeditor5-build-classic
// ckeditor5-build-classic-custom local package
// Add SimpleUploadAdapter into the plugin list
// src/ckeditor.js
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';  

ClassicEditor.builtinPlugins = [
...
SimpleUploadAdapter
...
]

// Rebuild for using in our app
npm run build
  • Use the custom build in our app
// app/components/Editor.js

import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";

...
<CKEditor
          editor={ClassicEditor}
          config={{
            // Pass the config for SimpleUploadAdapter
            // https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html
            simpleUpload: {
              // The URL that the images are uploaded to.
              uploadUrl: "http://example.com",

              // Enable the XMLHttpRequest.withCredentials property.
              withCredentials: true,

              // Headers sent along with the XMLHttpRequest to the upload server.
              headers: {
                "X-CSRF-TOKEN": "CSRF-Token",
                Authorization: "Bearer <JSON Web Token>",
              },
            },
          }}
...
  • Dynamic import for loading the editor from client-side
// pages/index.js
import dynamic from "next/dynamic";
const Editor = dynamic(() => import("../components/editor"), {ssr: false})

To sum up:

user_21452130
Related