Summernote编辑器图片上传异常：图片插入至note-editable外部求助

核心原因 #

上传模态框关闭时，note-editable容器丢失焦点，导致图片插入操作的上下文被切换到编辑器外部的DOM节点；或是自定义上传逻辑未使用编辑器内置API处理插入，手动操作DOM导致位置错误。

具体修复方案 #

1. 用编辑器内置API插入图片（优先推荐） #

不要手动修改note-editable的DOM，改用Summernote提供的insertImage方法，同时确保插入前让编辑器重新聚焦：

修改Summernote组件.ts代码中的上传回调：

onImageUpload(files: FileList) {
  const editor = this.summernoteInstance;
  const uploadFile = files[0];
  const formData = new FormData();
  formData.append('image', uploadFile);

  fetch('/你的图片上传接口', {
    method: 'POST',
    body: formData
  })
  .then(res => res.json())
  .then(uploadResult => {
    // 先强制聚焦编辑器，确保插入上下文正确
    editor.summernote('focus');
    // 用内置方法插入图片，自动匹配光标位置
    editor.summernote('insertImage', uploadResult.imageUrl, uploadFile.name);
  })
  .catch(err => console.error('图片上传失败:', err));
}

2. 监听模态框关闭事件，恢复编辑器焦点 #

如果是模态框关闭导致焦点丢失，添加监听事件在模态框关闭后重新聚焦编辑器：

// 编辑器初始化完成后添加监听
this.summernoteInstance.on('summernote.image.modal.close', () => {
  // 延迟100ms确保模态框完全关闭后再聚焦
  setTimeout(() => {
    this.summernoteInstance.summernote('focus');
  }, 100);
});

3. 优化编辑器初始化配置 #

在父组件的HTML调用中，添加初始化时的焦点配置，确保编辑器始终保持上下文：

<summernote
  [(ngModel)]="editorContent"
  [options]="{
    callbacks: {
      onInit: function() {
        $(this).summernote('focus');
      }
    },
    // 你的其他配置项
  }"
></summernote>

关键注意事项 #

• 绝对避免直接操作note-editable的DOM元素插入图片，编辑器的内部状态和光标位置需要通过官方API维护
• 检查页面中是否有其他弹窗、滚动或焦点切换的逻辑，可能在上传过程中抢占了编辑器的焦点
• 如果使用第三方封装的Summernote组件，确保组件正确暴露了编辑器实例供你调用API

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