如何在Summernote编辑器中获取选中文本对应的HTML代码

实现代码 #

直接调用以下逻辑即可拿到选中区域带HTML标签的完整内容：

// 定位编辑器可编辑区域
const noteEditable = $('#summernote').siblings('.note-editor').find('.note-editable')[0];
// 获取当前选中的Range对象
const selectionRange = $('#summernote').summernote('createRange');

// 仅当存在选中内容时执行
if (selectionRange && selectionRange.toString().trim()) {
  // 克隆选中范围内的全部DOM节点
  const selectedFragment = selectionRange.cloneContents();
  // 临时容器转存获取HTML
  const tempContainer = document.createElement('div');
  tempContainer.appendChild(selectedFragment);
  // 最终拿到的选中区域HTML
  const selectedHtml = tempContainer.innerHTML;
  
  // 此处可对selectedHtml做后续业务处理
  console.log('选中的HTML内容：', selectedHtml);
}

说明 #

• 你之前调用createRange().toString()只能拿到纯文本，是因为toString()是Range接口的原生方法，设计上就是仅返回范围内的文本内容，丢弃所有DOM标签
• 用cloneContents()可以完整保留选中区域内的所有标签、行内样式、自定义属性，包括图片、链接、列表、代码块等特殊元素的完整结构
• 该方法不需要依赖Summernote的额外API，仅基于原生DOM API实现，兼容性和稳定性更高

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