Fatal编程技术网
  • ckeditor/
  • this.props.editor.create不是CKEditor-NextJS中的函数

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

ckeditor next.js

this.props.editor.create不是CKEditor-NextJS中的函数,ckeditor,next.js,Ckeditor,Next.js,我正在遵循中的步骤。我的CKEditor现在可以在我的nextjs应用程序上运行了。但问题是，当我想放置SimpleUploadapter时，会出现一条错误消息，说props.editor.create不是一个函数。代码如下： import Head from 'next/head' import styles from '../styles/Home.module.css' import React, { useState, useEffect, useRef } from 'react'

我正在遵循中的步骤。我的CKEditor现在可以在我的nextjs应用程序上运行了。但问题是，当我想放置SimpleUploadapter时，会出现一条错误消息，说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>
  )
}

从“下一个/头部”导入头部
从“../styles/Home.module.css”导入样式
从“React”导入React，{useState，useffect，useRef}
导出默认函数Home（）{
const editorCKRef=useRef（）
常量[editorLoaded，setEditorLoaded]=useState（false）
const{CKEditor，simpleuploadapter，ClassicEditor}=editorCKRef.current | |{
useffect（（）=>{
editorCKRef.current={
CKEditor:require（“@CKEditor/ckeditor5 react”），
//SimpleUploadapter:require（'@ckeditor/ckeditor5 upload/src/adapters/simpleUploadapter'），
ClassicEditor:require（“@ckeditor/ckeditor5 build classic”）
}
setEditorLoaded（真）
}, [])
返回(
我的编辑5
在Next JS中使用CKEditor 5内置
{editorLoaded&&ClassicEditor&&
{
//您可以存储“编辑器”，并在需要时使用它。
log（'Editor已准备好使用！'，Editor）；
} }
onChange={（事件，编辑器）=>{
const data=editor.getData（）；
console.log（'ON CHANGE'）
//console.log（ClassicEditor.create（））
//log（{event，editor，data}）；
} }
onBlur={（事件，编辑器）=>{
log（'Blur'，编辑器）；
} }
onFocus={（事件、编辑器）=>{
console.log（'Focus'，编辑器）；
} }
配置={
{
simpleUpload：{
uploadUrl:'localhost:8000/api/files/upload/question/1'
}
}
}
/>
}
)
}
这就是错误：

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

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

但在您的情况下，您还需要使用另一个插件
SimpleUploAdapter

我尝试使用CKEditor React component+build classic+simpleuploadapter，但遇到错误“build classic和源代码之间的代码复制（simpleuploadapter）”

所以我决定定制ckeditor5 build classic，将插件添加到其中并重新构建，然后使其工作：）（）

以下是几点评论：

  • 定制ckeditor5构建经典版
  • 在我们的应用程序中使用自定义版本
总而言之：

  • 自定义CKEditor构建，添加所需插件。。。然后重建。把它们做成本地包
  • 在我们的应用程序中使用该本地软件包
  • 请查看我的git示例，并附上详细注释：
我通过将CKEditor组件包装到我自己的类组件中来工作

类RichTextEditor扩展React.Component{
render（）{
const{content}=this.props；
返回(
);
}
}
看起来CKEditor对功能组件的处理不好。如果您使用的是NextJS，那么使用动态导入加载包装器

const RichTextEditor=dynamic（（）=>import（“/path/to/RichTextEditor”）{
ssr：错，
});

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