How to replace imgae file with url from the server in tinyMCE?

Question

So, Im changing the rich text editor from Quill to tinyMCE,The issue Im facing is when I upload an image from the local machine, I'm getting it as a file when getting using tinymce.activeEditor.getContent(). something like this<img style="display: block; margin-left: auto; margin-right: auto;" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAA......">

I need it to be converted to a file URL. Something like this https://cdn.pixabay.com/photo/2023/04/05/12/37/town-7901424_960_720.jpg

Which will be from the database. How do I do that?

I believe I can use PreInit() for this, but I'm not sure,

This is my init setup for tinyMCE for now

tinymce.init({
.......
.......
images_upload_handler: scope.image_upload_handler(),
setup: function(editor) {
                        editor.on('Paste Change input Undo Redo', function () {
                            clearTimeout(editorChangeHandlerId);
                            editorChangeHandlerId = setTimeout(function() {
                                scope.ngModel = tinymce.activeEditor.getContent();
                                console.log(scope.ngModel)
                            }, 100);
                        });
                    }
})

and here is the scope.image_upload_handler function, It saves the image to s3 and I can get the file URL as a response, what I'm trying to achieve is which is the correct method to be used at someMethod and someOtherMethod

scope.image_upload_handler = function () {
               
                // Listen upload local image and save to server
                scope.input.onchange = function() {
                    const file = scope.input.files[0];
                    console.log(file)

                    // file type is only image.
                    if (/^image\//.test(file.type)) {
                        console.log(file.type)
    
                        

                        scope.fileUploading = true;
                        commonSrv.fnFileUpload(file, {"pathToBeSave":'tinyMceImages'}).then(function(response) {
                            scope.fileUploading = false;
                            var fileUrl = bbConfig.CLOUD_ASSET_STORAGE_URL + '/tinyMceImages/' + response.data.replace('"', '').replace('"', '');
                            var range = tinymce.someMethod();
                            console.log(range)
                            tinymce.someOtherMethod(range.index, 'image', fileUrl);
                        });


                    } else {
                        console.warn('You could only upload images.');
                    }
                }
            }

Answer 1

Here is a solution to my own question:

function image_upload_handler(blobInfo, progress) {
  return new Promise(function (resolve, reject) {
    commonSrv
      .fnFileUpload(blobInfo.blob(), { pathToBeSave: "tinyMceImages" })
      .then(function (response) {
        if (response.status == 200) {
          var fileUrl =
            bbConfig.CLOUD_ASSET_STORAGE_URL +
            "/" +
            pathToBeSave +
            "/" +
            response.data.replace('"', "").replace('"', "");
          resolve(fileUrl);
        } else {
          reject(response.status + " Some Error Occurred");
        }
      });
  });
}

I moved the function from the scope object to a standalone function. It is used once TinyMCE is initialized. Though, it's not related to my problem.

After going through the TinyMce documentation I have found an actual way to implement this. You can refer to the documentation