javascript - 在 Angular 的 tinymce 编辑器中删除图片时无法从服务器中删除图片

Question

我正在尝试将 tinyMCE 编辑器集成到我的网站（前端 - Angular）中。用户应该能够将图片上传到编辑器，然后再上传到服务器。当图片上传到服务器时，我设法实现了逻辑。图片在用户上传到编辑器后发送到服务器。

但是如果用户决定不发布图片并将其从编辑器中删除。图片仍然保留在服务器上。为了避免在服务器上保留多余的图片，我在 StackOverflow 上找到了一个解决方案，如果在编辑器中删除了图片，则从服务器中删除图片。

这是我的组件：

export class CreatePostComponent implements OnInit {

      constructor(private router: Router, private postService: PostService,
              private topicService: TopicService) {
    }


 this.tinymceInit = {
      plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
      ],
      toolbar: 'formatselect | bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist outdent indent  | removeformat | image |',
      images_upload_handler: this.uploadImageToServer,
      setup: function (ed: any) {
        this.delete_image_from_editor(ed);
      },
      delete_image_from_editor: function (ed: any) {
        ed.on('KeyDown', (e: any) => {
          if ((e.keyCode == 8 || e.keyCode == 46) && tinymce.activeEditor.selection) { // delete & backspace keys
            var selectedNode = tinymce.activeEditor.selection.getNode(); // get the selected node (element) in the editor
            if (selectedNode && selectedNode.nodeName == 'IMG') {
              console.log(selectedNode.src)
              this.delete_image_from_server(selectedNode.src); // A callback that will let me invoke the deletion of the image on the server if appropriate for the image source.
            }
          }
        });
      },
      delete_image_from_server: (src: string) => {
        this.deleteImageFromServer(src)
      }
    }
  }

  uploadImageToServer (blobInfo: any, success: any, failure: any) {
    var image_size = blobInfo.blob().size / 1000;  // image size in kbytes
    console.log('type - ' + blobInfo.blob().type)
    var max_size = 100                // max size in kbytes
    if (image_size > max_size) {
      failure('Image is too large( ' + image_size + ') ,Maximum image size is:' + max_size + ' kB');
      return;
    }
    var xhr: XMLHttpRequest, formData;

    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'http://localhost:8080/api/posts/upload/image');

    xhr.onload = function () {
      var json;
      if (xhr.status != 200) {
        failure('Error: ' + +xhr.status + ' Something went wrong!');
        //failure('HTTP Error: ' + xhr.status);
        return;
      }
      json = xhr.responseText;
      success(json);
    };
    formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    xhr.send(formData);
  }

  deleteImageFromServer(src: string) {
    this.postService.deleteImage(src)
  }

这是服务：

export class PostService {

  constructor(private http: HttpClient, private localStorage: LocalStorageService) {
  }

  deleteImage(path: string) {
    this.http.delete("http://localhost:8080/api/posts/upload/image/" + path);
  }

所以我有几个问题：

1. 首先，我不能在“this.tinymceInit”内部或任何连接到它的方法中使用“postService”，例如“deleteImageFromServer(src: string)”。它被忽略并且其中的这段代码不会被执行：'this.postService.deleteImage(src)'。即使我重写代码并设法让它执行，它也会在这里抛出一个错误：'this.postService.deleteImage(src)' 或在'PostService' 中：'this.http.delete("http://localhost:8080 /api/posts/upload/image/" + 路径);' 我怀疑，它没有正确初始化。我该如何解决？

2. 另外，是否可以使用'PostService'及其方法来上传照片以避免在组件内部发送http请求，如下所示：

   xhr = 新的 XMLHttpRequest(); xhr.withCredentials = 假；xhr.open('POST', 'http://localhost:8080/api/posts/upload/image');

我不能在这里使用“PostService”方法，这就是为什么我不能在“tinymceInit”内注入 JWT 令牌以将令牌与请求一起传递。

3. 是否可以在将图片上传到编辑器之后而不是在提交表单之后将图片上传到服务器，以避免首先从服务器删除图片的复杂逻辑？

我在这里想念什么？提前谢谢了

标签： javascriptangulartypescripttinymce