I am developing a form in angular 10 and implement summernote. one of the things I have to implement is that when inserting an image in the form it is saved in the back-end but it does not access the function. They told me that a correct way would be to use ngZone but never use it. Problems that come up with the onImageUpload and onImageLinkInsert callbacks do not work, $ (el) .summernote ( gives me the error Property 'summernote' does not exist on type 'JQuery'
This is the code. component.ts
config = {
tabsize: 2,
height: '300px',
toolbar: [
['misc', ['undo', 'redo']],
['font', ['bold', 'italic', 'underline', 'clear']],
['para', ['style']],
['table', ['table']],
['insert', ['picture', 'link', 'hr']],
],
disableDragAndDrop: true,
callbacks: {
onImageUpload: function (files, editor, welEditable) {
console.log('onImageUpload');
for (var i = files.length - 1; i >= 0; i--) {
this.sendFile(files[i], this);
}
},
onImageLinkInsert: function (url) {
// // url is the image url from the dialog
let img = $('<img>').attr({ src: url });
this.summernote.summernote('insertNode', img[0]);
console.log('onImageLinkInsert');
},
onPaste: function (e) {
//Para evitar el paste con formato
var bufferText = (
(e.originalEvent || e).clipboardData || ClipboardEvent.call
) /*|| window.clipboardData*/
.getData('Text');
e.preventDefault();
document.execCommand('insertText', false, bufferText);
console.log('onPaste');
},
},
};
sendFile(file, el) {
var form_data = new FormData();
form_data.append('file', file);
console.log(el);
//this.ImageService.setImagenPDF()
$.ajax({
data: form_data,
type: "POST",
url: '/img/pdf',
headers: {
"Authorization": "Bearer ****"
},
cache: false,
contentType: false,
processData: false,
success: function(response) {
var img = $('<img />').attr({ src: response.url })
img.attr('data-fileId', response.id);
$(el).summernote('insertNode', $img[0]);
}
});
}
component.ts
<textArea formControlName="html" #refsummernote id="summernote" [ngxSummernote]="config"></textArea>
the summernote library I'm using https://www.npmjs.com/package/ngx-summernote