hỏi về cách upload image trong tinymce

@quangnv1311 mình đọc phần đó r nhưng đang chưa hiểu đoạn xử lý upload bên tinymce

@sven_9x editor.uploadImages() hoặc có thể sử dụng option automatic_uploads đều sẽ gọi tới server backend(của bạn tự code) và upload file. Nếu ko có path remote của file trả về từ response sau upload thì sẽ convert ảnh thành base64 và lưu dạng base64 luôn.

Note: Execute the editor.uploadImages() function before submitting the editor contents to the server to avoid storing the images as Base64. Use a success callback to execute code once all the images are uploaded. This success callback can save the editor’s content to the server through a POST. Đoạn này ý nghĩa là hãy handle cái hàm trên trước khi gửi editor contents xuống server để lưu trữ.

Đầu tiên phần config tinymce(Theo hướng sử dụng automatic_uploads option để tự động upload image lúc chọn xong, bạn có thể chọn sử dụng editor.uploadImages() như trên thì bỏ option automatic_uploads đi và gọi editor.uploadImages() để gửi cả 1 loạt ảnh xuống server rồi mới gửi request lưu data):

this.tinymceOptions = {
      image_title: true,
      // enable automatic uploads of images represented by blob or data URIs
      automatic_uploads: true,
      // URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
      // here we add custom filepicker only to Image dialog
     file_picker_types: 'image',
     images_upload_url: '<ipserver:port/upload', #Chỗ này là path tới API Post
     file_picker_callback: function (callback, value, meta) { # Chỗ này ghi đè lại behavior default của file picker
        if (meta.filetype == 'image') {
          $('#upload').trigger('click');
          $('#upload').on('change', function () {
            var file = this.files[ 0 ];
            var reader = new FileReader();
            reader.onload = function (e) {
              callback(e.target.result, {
                alt: ''
              });
            };
            reader.readAsDataURL(file);
          });
        }
      }
}

Phần HTML

<textarea ui-tinymce="X.tinymceOptions" ng-model="X.lessonBody"></textarea>
<input name="image" type="file" id="upload" style="display:none;" onchange="">

Dưới server thì handle POST request tại path /upload rồi thực hiện logic upload file Nên sử dụng 1 function normalize filename và add thêm uniqueID tự generate ngẫu nhiên để tránh trùng tên Ví dụ: "Đây là tên file.txt" => "day_la_ten_file_fkuujs909032.txt" Rồi trả về response dạng { 'location': 'ipserver:port/path_to_folder/day_la_ten_file_fkuujs909032.txt' }' Phần backend nhớ lưu ý phần CORS.

Bạn có thể xem thêm tại đây: https://www.tiny.cloud/docs/general-configuration-guide/upload-images/#images_upload_url