CKeditor + java上传图片

Question

我见过很多“如何使用CKeditor上传图片”的例子，几乎所有我能理解的例子都是用PHP完成的。我正在 java 构建一个项目，所有示例与我的项目不太相关。

我想知道是否有更多 java 或 spring-mvc 相关的示例。
非常感谢任何帮助。

这是我尝试执行的操作，但当我单击“发送到服务器”按钮时，我不断收到相同的错误。

HTML 文件

<div class="editor">
  <div><label for="nome-do-produto-3" class="form-field-label">Informações gerais</label>
  <textarea placeholder="Rich text" maxlength="5000" id="info-field" name="info-field" class="form-text-field _90 w-input">
   </textarea></div>
</div>

Javascript

<script>
     CKEDITOR.replace( 'info-field', {
      height: 100,
      filebrowserUploadUrl: "/image/upload"
     });
    </script>
           

控制器.java

@PostMapping("/image/upload")
    @SneakyThrows
    public String upload(@RequestPart MultipartFile upload, HttpServletRequest request) throws IllegalStateException, IOException{
    String path = request.getServletContext().getRealPath("/");
    File files = new File(path + "upload");
    files.mkdir();
    upload.transferTo(new File(files.getPath()+File.separator+upload.getOriginalFilename()));
    System.out.println(upload.getOriginalFilename());
    return                                                           request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/upload/"+upload.getOriginalFilename();
}

图片上传查看

在我单击“发送到服务器”按钮后

我希望它在图像信息选项卡上显示上传的图像网址。

控制台错误

org.thymeleaf.exceptions.TemplateInputException: Error resolving template [http://localhost:8080/upload/image-1.jpg], template might not exist or might not be accessible by any of the configured Template Resolvers

Answer 1

filebrowserUploadUrl: "/image/upload" 替换为 url filebrowserUploadUrl: "image/upload" 希望它能工作

Answer 2

您可以将变量分配给实例：

 let instance_custom_name = CKEDITOR.replace( 'info-field', {
  height: 100,
  filebrowserUploadUrl: "/image/upload"
 });

之后就可以管理了：

instance_custom_name.on( 'fileUploadResponse', function( evt ) {

   // Prevent the default response handler.
   evt.stop();

   // Get XHR and response.
   var data = evt.data,
        xhr = data.fileLoader.xhr,
   response = xhr.responseText.split( '|' );

   if ( response[ 1 ] ) {
       // An error occurred during upload.
       data.message = response[ 1 ];
       evt.cancel();
   } else {
       data.url = response[ 0 ];
   }
});