Блог

Я пытаюсь интегрировать редактор TinyMCE в свой веб — сайт (интерфейс- угловой). Пользователи должны иметь возможность загружать фотографии в редактор, а затем на сервер. Мне удалось реализовать логику, когда изображение загружается на сервер. Изображение отправляется на сервер после того, как пользователь загрузил его в редактор.

Но если пользователь решит не публиковать фотографию и удалит ее из редактора. Картинка по — прежнему остается на сервере. Чтобы избежать сохранения избыточных изображений на сервере, я нашел в 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) amp;amp; tinymce.activeEditor.selection) { // delete amp; backspace keys
            var selectedNode = tinymce.activeEditor.selection.getNode(); // get the selected node (element) in the editor
            if (selectedNode amp;amp; 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. Во-первых, я не могу использовать «PostService» внутри «this.tinymceInit» или в любом методе, связанном с ним, например » deleteImageFromServer(src: строка)». Он игнорируется, и этот код внутри него не выполняется: ‘this.PostService.Удалить изображение(src)’. Даже если я перепишу код и мне удастся его выполнить, он выдаст ошибку здесь: «this.PostService.Удалить изображение(src)» или в «PostService» здесь: «this.http.delete(«http://localhost:8080/api/posts/upload/image/» путь);’ Я подозреваю, что он неправильно инициализирован. Как я могу это исправить?
2. Кроме того, можно ли использовать «PostService» и его методы для загрузки фотографий, чтобы избежать отправки http-запросов внутри компонента, подобного этому:

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

I cannot use ‘PostService’ methods here that’s why i cannot inject a JWT token inside the’tinymceInit’ to pass the token with the request.

3. Is it possible to upload pictures to the server not right after uploading them to the editor but after submitting the form to avoid this complex logic of deleting pictures from the server in the first place?

What am i missing here? Many thanks in advance