Question

我正在按照this中的步骤进行操作。我的CKEditor现在可以在我的nextjs应用程序上运行。但是问题是当我想放入simpleUploadAdapter时，出现一条错误消息，指出props.editor.create不是函数。这是代码：

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

，这是错误：

那么这里有什么问题？谢谢

Answer 1

我通过将 CKEditor 组件包装在我自己的类组件中来开始工作。

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

CKEditor 似乎对函数组件不太友好。如果您使用 NextJS，则使用动态导入来加载包装器。

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

Answer 2

我记得CKEditor4在Next.js中更容易设置。 CKEditor5需要做更多的工作，您必须在模式ssr = false

下使用动态导入

但是在您的情况下，您还想使用另一个插件SimpleUploadAdapter

我尝试使用CKEditor React组件+构建经典+ SimpleUploadAdapter，但是遇到错误“构建经典和源（SimpleUploadAdapter）之间的代码重复”。

因此，我决定自定义ckeditor5-build-classic，将插件添加到其中并进行重建，然后使其起作用：）（https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html）

以下几句话：

自定义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

在我们的应用中使用自定义版本

// 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>",
              },
            },
          }}
...

动态导入，用于从客户端加载编辑器

// pages/index.js
import dynamic from "next/dynamic";
const Editor = dynamic(() => import("../components/editor"), {ssr: false})

总结：

自定义CKEditor构建，添加所需的插件...然后重建。将它们作为本地包
在我们的应用中使用该本地包！
使用长注释检查我的git示例：https://github.com/nghiaht/nextjs-ckeditor5

this.props.editor.create不是CKEditor中的函数-NextJS

2 个答案: