英文:
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 () {
// 监听上传本地图像并保存到服务器
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论