如何使用 Reactjs 从 Ckeditor 添加图像

Question

I am working on Reactjs and using "nextjs" framework,Right now i am using Ckeditor,Editor is working except image section,So how can i insert/add image using ckeditor? here is my current code,Following is "Ckeditor.js" file (inside component folder)

import React, { useEffect, useRef } from "react";export default function CKeditor({ onChange, editorLoaded, name, value }) {
    const editorRef = useRef();
    const { CKEditor, ClassicEditor } = editorRef.current || {};useEffect(() => {
    editorRef.current = {
         CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, 
         ClassicEditor: require("@ckeditor/ckeditor5-build-classic")
        };
    }, []);
    return (
        <>
            {editorLoaded ? (
                <CKEditor
                    type=""
                    name={name}
                    editor={ClassicEditor}
                    data={value}
                    onChange={(event, editor) => {
                        const data = editor.getData();
                        onChange(data);
                    }}
                />
            ) : (
                <div>Editor loading</div>
            )}
        </>
    )
}

And here is my code in "Addblog.js" file

import { useEffect, useState } from "react";
import CKeditor from "../components/CKeditor";export default function index() {
  const [editorLoaded, setEditorLoaded] = useState(false);
  const [data, setData] = useState("");useEffect(() => {
    setEditorLoaded(true);
  }, []);
  return (
    <div>
      <CKeditor
        name="description"
        onChange={(data) => {
          setData(data);
        }}
        editorLoaded={editorLoaded}
      />       {JSON.stringify(data)}    </div>
  );
}

Answer 1

It might be due to the fact that you have not configured the component to allow image uploads. To allow image uploads in the CKEditor component, you will need to include a file upload adapter and configure the component to use it.

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html

And then just import it into the component:

import MyCustomUploadAdapterPlugin from './MyCustomUploadAdapterPlugin';

and configure like so:

editorLoaded={editorLoaded}
config={{
  extraPlugins: [ MyCustomUploadAdapterPlugin ],
}}