具有CKEditor的图像上传功能

Question

我想将CKEditor与react（redux）一起使用，并上传图像文件。文本编辑器可以成功运行，但不能使用图像上传器。选择图像时出现错误。屏幕截图一击。

和我的代码：

<div className="App">
  <h2>Using CKEditor 5 Framework in React</h2>
  <CKEditor
    editor={ ClassicEditor }
    onInit={ editor => {
      console.log( "Editor is ready to use", editor)
    }}
    onChange={ ( event, editor ) => console.log( editor.getData() ) }
    config={ {
        plugins: [ Essentials, Paragraph, Bold, Italic, Heading, Alignment, UploadAdapter, Autoformat,
                    EasyImage, Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, ],
                  toolbar: [ 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo', '|',  'alignment', '|', 'imageUpload'],
        ckfinder: {
          uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
        },
    } }

    data="<p>Hello from CKEditor 5!</p>"
  />
</div>

第二个问题，

我将创建POST按钮，并在我单击POST按钮时将包含图像url的完整html代码保存在数据库中，并将图像文件保存在后端文件夹中。但是，我认为图像是在单击POST按钮之前使用ckfinder保存的。那么，如何使用not-clicked-post-button post (canceled post)处理图像？如果某人仅上传图像而退出发布，那么无用的图像会保留在我的服务器存储库中，对吗？

请回复并帮助我

Answer 1

我不知道这是不是您的情况，但是您应该具有运行在服务器上，https://example.com-无效的网址的服务器端连接器。

这里是PHP安装指南https://ckeditor.com/docs/ckfinder/ckfinder3-php/quickstart.html#quickstart_installation_folders

而且，您应该已经安装了CKFInder插件

import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';