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

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

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

scope.image_upload_handler = function () {

  1.             // 监听上传本地图像并保存到服务器
  2.             scope.input.onchange = function() {
  3.                 const file = scope.input.files[0];
  4.                 console.log(file)
  6.                 // 文件类型仅限图像。
  7.                 if (/^image\//.test(file.type)) {
  8.                     console.log(file.type)
  10.                     
  12.                     scope.fileUploading = true;
  13.                     commonSrv.fnFileUpload(file, {"pathToBeSave":'tinyMceImages'}).then(function(response) {
  14.                         scope.fileUploading = false;
  15.                         var fileUrl = bbConfig.CLOUD_ASSET_STORAGE_URL + '/tinyMceImages/' + response.data.replace('"', '').replace('"', '');
  16.                         var range = tinymce.someMethod();
  17.                         console.log(range)
  18.                         tinymce.someOtherMethod(range.index, 'image', fileUrl);
  19.                     });
  20.                 } else {
  21.                     console.warn('You could only upload images.');
  22.                 }
  23.             }
  24.         }
英文:

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

  1. tinymce.init({
  2. .......
  3. .......
  4. images_upload_handler: scope.image_upload_handler(),
  5. setup: function(editor) {
  6.                         editor.on('Paste Change input Undo Redo', function () {
  7.                             clearTimeout(editorChangeHandlerId);
  8.                             editorChangeHandlerId = setTimeout(function() {
  9.                                 scope.ngModel = tinymce.activeEditor.getContent();
  10.                                 console.log(scope.ngModel)
  11.                             }, 100);
  12.                         });
  13.                     }
  14. })

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

  1. scope.image_upload_handler = function () {
  2.                
  3.                 // Listen upload local image and save to server
  4.                 scope.input.onchange = function() {
  5.                     const file = scope.input.files[0];
  6.                     console.log(file)
  8.                     // file type is only image.
  9.                     if (/^image\//.test(file.type)) {
  10.                         console.log(file.type)
  11.     
  12.                         
  14.                         scope.fileUploading = true;
  15.                         commonSrv.fnFileUpload(file, {"pathToBeSave":'tinyMceImages'}).then(function(response) {
  16.                             scope.fileUploading = false;
  17.                             var fileUrl = bbConfig.CLOUD_ASSET_STORAGE_URL + '/tinyMceImages/' + response.data.replace('"', '').replace('"', '');
  18.                             var range = tinymce.someMethod();
  19.                             console.log(range)
  20.                             tinymce.someOtherMethod(range.index, 'image', fileUrl);
  21.                         });
  24.                     } else {
  25.                         console.warn('You could only upload images.');
  26.                     }
  27.                 }
  28.             }

答案1

得分: 0

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

  1. function image_upload_handler(blobInfo, progress) {
  2.   return new Promise(function (resolve, reject) {
  3.     commonSrv
  4.       .fnFileUpload(blobInfo.blob(), { pathToBeSave: "tinyMceImages" })
  5.       .then(function (response) {
  6.         if (response.status == 200) {
  7.           var fileUrl =
  8.             bbConfig.CLOUD_ASSET_STORAGE_URL +
  9.             "/" +
  10.             pathToBeSave +
  11.             "/" +
  12.             response.data.replace("'", "").replace("'", "");
  13.           resolve(fileUrl);
  14.         } else {
  15.           reject(response.status + " Some Error Occurred");
  16.         }
  17.       });
  18.   });
  19. }

我将函数从“scope”对象移动到了一个独立的函数中。这在TinyMCE初始化后被调用。尽管如此，它与我的问题无关。

在查阅TinyMce文档后，我找到了实际实现这一点的方法。您可以参考文档。

英文:

Here is a solution to my own question:

  1. function image_upload_handler(blobInfo, progress) {
  2.   return new Promise(function (resolve, reject) {
  3.     commonSrv
  4.       .fnFileUpload(blobInfo.blob(), { pathToBeSave: "tinyMceImages" })
  5.       .then(function (response) {
  6.         if (response.status == 200) {
  7.           var fileUrl =
  8.             bbConfig.CLOUD_ASSET_STORAGE_URL +
  9.             "/" +
  10.             pathToBeSave +
  11.             "/" +
  12.             response.data.replace('"', "").replace('"', "");
  13.           resolve(fileUrl);
  14.         } else {
  15.           reject(response.status + " Some Error Occurred");
  16.         }
  17.       });
  18.   });
  19. }

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
  • angularjs
  • integration
  • javascript
  • performance
  • tinymce
匿名

发表评论

匿名网友

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

确定