Using Summernote WYSIWYG editor. I created a custom button, added it to the image popover, and want to do some things to the image. The image is stored in the server, so Summernote only stores the image reference ("src=..."), not the base64 method. The image upload/delete to the server is working fine.
When I click on the custom button, a function is initiated. I want to get the details of what was clicked on so it can be manipulated by the function. The Summernote initialization code and the custom button code is shown.
//*** SUMMERNOTE INITIATE ***
$('#summernote').summernote({
callbacks: {
onImageUpload: function(files) {
for(let i=0; i < files.length; i++) {
$.upload(files[i]);
}
},
onMediaDelete : function(target) {
//alert(target[0].src)
deleteFile(target[0].src);
}
},
height: 300,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline']],
['para', ['ul', 'ol', 'paragraph']],
['insert', ['link', 'picture', 'video']],
['view', ['codeview', 'help']],
],
popover: {
image: [
['custom', ['captionIt']],
['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']],
['mybutton', ['custom']]
],
},
buttons: {
custom: customButton
}
});
//*** THE CUSTOM BUTTON ***
var customButton = function (context) {
var ui = $.summernote.ui;
var button = ui.button({// create button
contents: '<i class="fa fa-child"/> Custom',
tooltip: 'do something',
click: function () {
context.invoke('editor.insertText', 'Do Something');//test by inserting text
//**** how to capture the image dom reference? ****
}
});
return button.render(); // return button as jquery object
}