Problem :- So when I insert an image in quill js editor it uploads image as data base64 format. Which is very big to move around different pages.
Aim :- I want to make a program so that when an image is inserted in editor I download the image, through laravel backend and return image url to replace the img src in the dom. I have already done the downloading of image and url returning part of the code.
Main Question :- If I edit Delta of quill js will it change the img src in the dom too??
P.S. :- I don't have a code yet to submit I am just curious to know if delta changes will reflect in DOM or not. Please comment if you need more info, Thanks
So I figured it out I stored delta to a variable, then I made changes to that variable and then I setContents(delta) to the editor and that changed the data base 64 to url.
emailEditor.on('editor-change', function(eventName,args) {
var delta = ( emailEditor.getContents() );
if (eventName === 'text-change') {
let arr = (args['ops']);
if (args['ops'].length == 1 && !(arr[0].hasOwnProperty('delete'))){
if (args['ops'][0]['insert']['image'] != null){
for (let index = 0; index < delta['ops'].length; index++) {
if (delta['ops'][index]['insert'].hasOwnProperty('image') && args['ops'][0]['insert']['image'] == delta['ops'][index]['insert']['image']) {
saveImage(index);
}
}
}
}
else if (args['ops'].length == 2 && !(arr[1].hasOwnProperty('delete'))){
if (args['ops'][1]['insert']['image'] != null){
for (let index = 0; index < delta['ops'].length; index++) {
if (delta['ops'][index]['insert'].hasOwnProperty('image') && args['ops'][1]['insert']['image'] == delta['ops'][index]['insert']['image']) {
saveImage(index);
}
}
}
}
}
function saveImage(key) {
let imageURL = JSON.stringify(delta['ops'][key]['insert']['image']);
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: "POST",
url: "url-to-backend",
data: { "imageURL": imageURL },
success: function (data) {
delta['ops'][key]['insert']['image'] = (data);
emailEditor.setContents(delta);
},
error: function (data) {
alert("some Error");
}
});
}
});
My code is not perfect, but it works for me, if you find this not suitable for community or if you want me to add comments on working let me know I will delete/edit the Question/Answer.