求助：Summernote编辑器图片插入链接显示在编辑器外如何修复

插入图片后，编辑器生成的内容会将图片包裹在链接标签内（如示例中的<a href="..."><img ...></a>），以下是几种可行的修复方案：

方案一：重写图片插入对话框的确认逻辑 #

通过初始化时的onInit回调，修改默认图片插入弹窗的确认按钮行为，直接插入纯<img>标签：

$(document).ready(function() {
    $('#description').summernote({
        height: 400,
        callbacks: {
            onInit: function() {
                const editor = this;
                // 监听图片对话框显示事件
                $(editor).on('summernote.dialog.shown', function() {
                    const $dialog = $('.note-image-dialog');
                    // 替换默认确认按钮的事件逻辑
                    $dialog.find('.note-btn-primary').off('click').on('click', function() {
                        const imgUrl = $dialog.find('.note-image-url').val().trim();
                        const imgAlt = $dialog.find('.note-image-alt').val().trim();
                        
                        if (imgUrl) {
                            const $img = $('<img>').attr({
                                'src': imgUrl,
                                'alt': imgAlt || ''
                            });
                            editor.summernote('insertNode', $img[0]);
                            editor.summernote('closeDialog');
                        }
                    });
                });
            }
        }
    });
});

方案二：通过内容变更事件自动清理包裹图片的链接 #

监听编辑器内容变更，自动移除所有包裹<img>标签的<a>标签，适合兼容已有内容的场景：

$(document).ready(function() {
    $('#description').summernote({
        height: 400,
        callbacks: {
            onChange: function(contents) {
                const $tempContainer = $('<div>').html(contents);
                // 移除所有包裹图片的a标签
                $tempContainer.find('a > img').each(function() {
                    $(this).unwrap();
                });
                // 更新编辑器内容（仅当内容有修改时）
                const processedContent = $tempContainer.html();
                if (processedContent !== contents) {
                    $(this).summernote('code', processedContent);
                }
            }
        }
    });
});

方案三：自定义图片上传逻辑（针对本地上传场景） #

如果是本地上传图片时出现此问题，可重写onImageUpload回调，直接插入<img>标签：

$(document).ready(function() {
    $('#description').summernote({
        height: 400,
        callbacks: {
            onImageUpload: function(files) {
                // 此处替换为你的图片上传逻辑（如AJAX上传到服务器）
                // 示例：假设上传后获取到图片URL
                const imgUrl = '上传后的图片地址';
                
                const $img = $('<img>').attr('src', imgUrl);
                $(this).summernote('insertNode', $img[0]);
            }
        }
    });
});

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