如何在Summernote自定义插件中实现选中图片复制到剪贴板功能

你现有的自定义插件已经正确拿到了当前选中的图片对象，只需要补充图片转二进制、写入系统剪贴板的逻辑即可，修改后的完整插件代码如下：

$.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: async function () {
                    const $targetImg = $($editable.data('target'));
                    // 校验选中元素是否为图片
                    if ($targetImg[0]?.nodeName !== 'IMG') return;
                    try {
                        // 加载原图资源
                        const img = new Image();
                        img.crossOrigin = 'anonymous';
                        img.src = $targetImg.attr('src');
                        await new Promise((resolve, reject) => {
                            img.onload = resolve;
                            img.onerror = reject;
                        });
                        // 绘制图片到canvas
                        const canvas = document.createElement('canvas');
                        canvas.width = img.naturalWidth;
                        canvas.height = img.naturalHeight;
                        const ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);
                        // canvas转png格式Blob
                        const imgBlob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
                        // 写入系统剪贴板
                        await navigator.clipboard.write([
                            new ClipboardItem({
                                [imgBlob.type]: imgBlob
                            })
                        ]);
                        // 成功提示（可选）
                        context.invoke('editor.createTooltip', lang.imageCopy.success || '图片已复制', 'success');
                        setTimeout(() => context.invoke('editor.hideTooltip'), 2000);
                    } catch (err) {
                        console.error('复制失败：', err);
                        // 失败提示（可选）
                        context.invoke('editor.createTooltip', lang.imageCopy.error || '复制失败，请检查图片权限', 'error');
                        setTimeout(() => context.invoke('editor.hideTooltip'), 2000);
                    }
                }
            });
            return button.render();
        });
    }
});

必要配置与注意事项 #

• 初始化Summernote时需要将自定义按钮加入图片弹出层配置：

$('.summernote').summernote({
    // 其他原有配置
    popover: {
        image: [
            ['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
            ['float', ['floatLeft', 'floatRight', 'floatNone']],
            ['remove', ['removeMedia']],
            ['custom', ['imageCopy']] // 新增自定义复制按钮
        ]
    },
    // 自定义按钮图标配置，可根据使用的图标库修改
    imageCopy: {
        icon: '<i class="fa fa-copy"></i>'
    },
    // 中文提示配置
    lang: 'zh-CN',
    langInfo: {
        zhCN: {
            imageCopy: {
                tooltip: '复制图片',
                success: '图片已复制到剪贴板',
                error: '图片复制失败'
            }
        }
    }
});

• 浏览器兼容性：该方案依赖Clipboard API，支持Chrome 66+、Firefox 63+、Safari 13.1+版本，老旧浏览器无法使用
• 跨域资源要求：如果要复制的图片存储在第三方域名，需要对应资源服务器配置CORS允许当前站点访问，否则canvas绘制会触发跨域污染报错
• 运行环境要求：Clipboard API仅在HTTPS域名、localhost本地开发环境下可用，HTTP公网环境无法调用

内容的提问来源于stack exchange，提问作者user754730