使用document.execCommand的insertHTML无法设置contenteditable="false"

问题原因 #

document.execCommand('insertHTML') 在处理插入的HTML字符串时，会对内容做规范化处理，可能自动移除与当前编辑上下文冲突的属性——比如contenteditable="false"，因为当前父容器是可编辑状态，浏览器会认为这个属性不符合编辑区域的默认规则，从而直接过滤掉它。

解决方案 #

放弃使用已被标记为废弃的document.execCommand，改用Range和Selection API直接操作DOM元素，这样能完整保留所有设置的属性。

具体实现步骤 #

1. 手动创建需要插入的DOM结构（包含带contenteditable="false"的span）
2. 获取当前编辑区域的选中范围
3. 将创建好的DOM元素插入到选中位置

代码示例 #

替换原来的document.execCommand调用，改用以下代码：

// 1. 构建完整的DOM结构
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';

const iconWrapper = document.createElement('div');
iconWrapper.className = 'icon-wrapper';

const closeSpan = document.createElement('span');
closeSpan.className = 'material-symbols-outlined';
closeSpan.textContent = 'close';
closeSpan.setAttribute('contenteditable', 'false'); // 直接设置属性，确保不丢失

const img = document.createElement('img');
img.src = 'IMAGE_URL'; // 替换为你的图片实际地址

// 组装DOM节点
iconWrapper.appendChild(closeSpan);
wrapper.appendChild(iconWrapper);
wrapper.appendChild(img);

// 2. 获取当前编辑区域的选中范围
const selection = window.getSelection();
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0);
  // 3. 插入DOM元素到选中位置
  range.deleteContents(); // 清除选中的内容（如果有）
  range.insertNode(wrapper);
  
  // 可选：将光标移动到插入内容的后方，保证编辑连贯性
  range.setStartAfter(wrapper);
  range.setEndAfter(wrapper);
  selection.removeAllRanges();
  selection.addRange(range);
}

额外补充 #

• 直接操作DOM元素能确保所有属性被完整保留，不会被浏览器的HTML规范化逻辑过滤
• 如果需要处理复杂的HTML字符串，可以先用DOMParser把字符串转成DOM元素再插入：

  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  const targetElement = doc.body.firstChild;
  // 后续将targetElement插入到选中范围即可
  

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