Search code examples
javascriptsummernote

Summernote copy image


I haven't found anything about this anywhere. How can I copy a selected image into the clipboard? I have created a custom js that adds a button to the popover of the image which works fine but I'm stuck here:

$.extend($.summernote.plugins, {
        'imageCopy': function (context) {
            var self = this;
            var ui = $.summernote.ui,
            $editable = context.layoutInfo.editable,
            options = context.options,
            $editor = context.layoutInfo.editor,
            lang = options.langInfo,
            $note = context.layoutInfo.note;

            context.memo('button.imageCopy', function () {
                var button = ui.button({
                    contents: options.imageCopy.icon,
                    container: false,
                    tooltip: lang.imageCopy.tooltip,
                    click: function () {
                        var img = $($editable.data('target'));
                        console.log('copy image=' + img);
                    }
                });
                return button.render();
            });
        }
    });

So I don't really know how I can get the data from the currently selected image and put it into the clipboard.


Solution

  • Just referred Summernote docs and other stuff. what I understood is it is providing restoreTarget attribute for getting reference of the selected image. You can get the source of the image through that and copy it to clipboard using Clipboard API.

    Here is the code that I've tried.