Summernote - 如何通过单击按钮获取图像参考

问题描述

使用 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
} 

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)