如何用服务器上的URL替换TinyMCE中的图像文件?

huangapple go评论67阅读模式
英文:

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

问题

所以,我正在将富文本编辑器从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,该URL将来自数据库。我该怎么做?

我相信我可以使用PreInit()来实现这一点,但我不确定。

这是我目前针对tinyMCE的初始化设置。

images_upload_handler:scope.image_upload_handler()

设置: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作为响应获取。我试图实现的是在someMethodsomeOtherMethod中使用的正确方法。

scope.image_upload_handler = function () {

            // 监听上传本地图像并保存到服务器
            scope.input.onchange = function() {
                const file = scope.input.files[0];
                console.log(file)

                // 文件类型仅限图像。
                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.');
                }
            }
        }
英文:

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


答案1

得分: 0

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

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文档后,我找到了实际实现这一点的方法。您可以参考文档

英文:

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

huangapple
  • 本文由 发表于 2023年4月19日 14:58:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76051556.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定