Summernote插入媒体时覆盖编辑器内容问题求助

数据老陈

2026-5-19

解决Summernote添加媒体时覆盖原有内容的问题

嘿，我之前也踩过这个坑！你遇到的媒体插入覆盖内容的问题，本质是用错了修改编辑器内容的方式——你大概率是直接替换了整个编辑器的HTML内容，而不是把媒体插入到现有内容里。

核心原因

如果你的代码里用了类似 $('#summernote').summernote('code', newMediaHtml) 这种方法，那肯定会覆盖原有内容，因为code()方法是直接设置编辑器的全部内容，而不是追加或插入。

正确解决方案：用插入类API

Summernote本身提供了专门的插入方法，会自动把媒体放到当前光标位置（如果没光标就追加到末尾），完全不会影响原有内容：

1. 插入图片

// 获取编辑器实例
const editor = $('#summernote').summernote('editor');
// 插入图片：参数1是图片URL，参数2是可选的alt文本
editor.insertImage('https://your-image-url.jpg', '图片说明');

2. 插入视频

const editor = $('#summernote').summernote('editor');
// 插入视频：参数是视频URL
editor.insertVideo('https://your-video-url.mp4');

自定义媒体元素的插入方式

如果需要给媒体加自定义样式（比如限制宽度、加边框），可以手动创建DOM节点再插入：

const editor = $('#summernote').summernote('editor');

// 自定义图片插入
const customImg = document.createElement('img');
customImg.src = 'https://your-image-url.jpg';
customImg.alt = '自定义图片';
customImg.style.maxWidth = '100%';
customImg.style.border = '1px solid #eee';
// 插入到编辑器
editor.insertNode(customImg);

// 自定义视频插入
const customVideo = document.createElement('video');
customVideo.src = 'https://your-video-url.mp4';
customVideo.controls = true;
customVideo.style.maxWidth = '100%';
editor.insertNode(customVideo);