javascript - Summernote - 如何在单击按钮时获取图像参考

Question

使用 Summernote 所见即所得编辑器。我创建了一个自定义按钮，将其添加到图像弹出框，并想对图像做一些事情。图片存储在服务器中，所以 Summernote 只存储图片引用（“src=...”），而不是 base64 方法。图像上传/删除到服务器工作正常。

当我单击自定义按钮时，会启动一个功能。我想获取单击内容的详细信息，以便该函数可以对其进行操作。显示了 Summernote 初始化代码和自定义按钮代码。

   //*** 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
} 

标签： javascriptsummernote