如何在 tinyMCE 中用服务器的 url 替换 imgae 文件？

Question

所以，我将富文本编辑器从 Quill 更改为 tinyMCE，我面临的问题是当我从本地计算机上传图像时，我在使用

tinymce.activeEditor.getContent()

时将其作为文件获取。像这样

<img style="display: block; margin-left: auto; margin-right: auto;" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAA......">

我需要将其转换为文件 URL。像这样

https://cdn.pixabay.com/photo/2023/04/05/12/37/town-7901424_960_720.jpg

这将来自数据库。我该怎么做？

我相信我可以为此使用

PreInit()

，但我不确定，

这是我现在的 tinyMCE 初始化设置

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);
                        });
                    }
})

这里是 scope.image_upload_handler 函数，它将图像保存到 s3，我可以获得文件 URL 作为响应，我想要实现的是在

someMethod

和

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

这是我自己的问题的解决方案：

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");
        }
      });
  });
}

我将函数从

scope

对象移动到独立函数。一旦 TinyMCE 被初始化，它就会被使用。虽然，这与我的问题无关。

在浏览完 TinyMce 文档后，我找到了实现它的实际方法。可以参考文档