React js：图片上传在 CKEditor 中不起作用

Question

CKEditor 图片上传不起作用，下面是代码

<CKEditor
                    editor={ ClassicEditor }
                    data={this.state.miscNotesData.miscnote}
                    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();
                        this.handleChange(data);
                        console.log( { event, editor, data } );
                    } }

                />

错误：

  backend.js:6 filerepository-no-upload-adapter: Upload adapter is not defined. 
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

Answer 1

如文档中提供的https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/image-upload.html 在 CKEDitor 中上传图像有 4 个选项：Easy Image（专有）、CKFinder（需要 PHP 或 ASP.net 上的连接器）、简单适配器、Base64 适配器

我在 Node js 服务器上使用简单适配器来实现此目的：

首先，我在ClassicEditor中安装了SimpleUploadAdapter，然后在CKEditor中设置了配置：

   <CKEditor
        data={input.value}
        editor={ ClassicEditor }
        config={{
          simpleUpload: {
            uploadUrl: 'https://myserver.herokuapp.com/image-upload'
          },
          toolbar: ['heading', '|', 'bold', 'italic', 'blockQuote', 'link', 'numberedList', 'bulletedList', 'imageUpload', 'insertTable',
            'tableColumn', 'tableRow', 'mergeTableCells', 'mediaEmbed', '|', 'undo', 'redo']
        }}
      />

并在我的服务器上创建 url /image-upload

Answer 2

您可以使用额外的插件选项.. 要使用它，您可以修改他们的文档。 在配置中，您将设置 extraPlugins 。 你可以让 uploadPlugin 函数来工作。

 <CKEditor
                    editor={ ClassicEditor }
                    config = {{
                        placeholder : "please your question, here",
                        extraPlugins: [uploadPlugin] 
                    }}