在富文本编辑场景里，contenteditable元素是很常用的实现方案，很多时候我们需要在用户当前光标位置插入一段带有自定义样式的文本，比如高亮的提示文字、特殊格式的标记内容等。这个需求的核心是要先拿到当前光标的位置信息，再在对应位置插入构建好的带样式节点。
核心原理说明
要实现在contenteditable元素光标处插入内容，需要用到浏览器提供的Selection和Range两个API。Selection对象代表用户选择的文本范围或者光标位置，Range对象则表示文档中的一个连续范围，我们可以通过这两个对象获取当前光标所在的节点和偏移量，然后创建新的带样式节点插入到对应位置。
关键API介绍
- Selection对象：通过
window.getSelection()获取，包含当前用户的选择信息，其getRangeAt(0)方法可以拿到当前第一个选择范围（单光标场景下只有一个范围）。 - Range对象：包含
startContainer（范围起始的节点）、startOffset（起始偏移量）、insertNode方法（在范围起始位置插入节点）等属性和方法。 - Document.createTextNode：用于创建纯文本节点，如果需要带样式，通常会配合
Document.createElement创建元素节点，再往元素里添加文本。
基础实现步骤
整体实现流程可以分为四步：获取当前光标范围、创建带样式的文本节点、在光标位置插入节点、调整光标位置到插入内容末尾。
第一步：获取当前光标范围
首先需要判断当前是否有选中的范围，并且确保光标在目标contenteditable元素内部，避免操作到其他区域的内容。
// 获取contenteditable元素
const editableEl = document.getElementById('editable');
// 获取当前选择对象
const selection = window.getSelection();
// 如果没有选择范围，直接返回
if (selection.rangeCount === 0) return;
// 获取第一个范围
const range = selection.getRangeAt(0);
// 判断范围是否在目标可编辑元素内
if (!editableEl.contains(range.startContainer)) return;
第二步：创建带样式的文本节点
我们需要创建一个包含文本和样式的元素，比如创建一个带红色字体、加粗样式的<span>元素，内部放置要插入的文本。
// 创建承载文本的span元素
const styleSpan = document.createElement('span');
// 设置样式，这里可以自定义需要的样式
styleSpan.style.color = 'red';
styleSpan.style.fontWeight = 'bold';
// 设置要插入的文本内容
styleSpan.textContent = '插入的带样式文本';
第三步：在光标位置插入节点
使用Range对象的insertNode方法，将创建好的带样式节点插入到光标当前位置。
// 删除当前选中的内容（如果有选中内容的话，可选操作） range.deleteContents(); // 在光标位置插入带样式的节点 range.insertNode(styleSpan);
第四步：调整光标位置
插入节点后，默认光标会停留在插入内容的前面，我们需要把光标移动到插入内容的末尾，方便用户继续输入。
// 移动光标到插入内容的末尾 range.setStartAfter(styleSpan); range.collapse(true); // 清除原有选择，设置新的选择范围 selection.removeAllRanges(); selection.addRange(range);
完整示例代码
下面是一个完整的可运行示例，包含一个contenteditable元素和触发插入的按钮，点击按钮会在当前光标位置插入带样式的文本。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>contenteditable插入带样式文本示例</title>
<style>
#editable {
width: 500px;
height: 200px;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="editable" contenteditable="true">
在这里点击光标后，点击下方的插入按钮
</div>
<button id="insertBtn">插入带样式文本</button>
<script>
const editableEl = document.getElementById('editable');
const insertBtn = document.getElementById('insertBtn');
insertBtn.addEventListener('click', () => {
const selection = window.getSelection();
if (selection.rangeCount === 0) return;
const range = selection.getRangeAt(0);
// 判断光标是否在可编辑元素内
if (!editableEl.contains(range.startContainer)) {
alert('请先将光标放在可编辑区域内');
return;
}
// 创建带样式的节点
const styleSpan = document.createElement('span');
styleSpan.style.color = '#1677ff';
styleSpan.style.fontSize = '16px';
styleSpan.style.backgroundColor = '#e6f4ff';
styleSpan.textContent = '【插入的提示文本】';
// 插入节点
range.deleteContents();
range.insertNode(styleSpan);
// 调整光标位置
range.setStartAfter(styleSpan);
range.collapse(true);
selection.removeAllRanges();
selection.addRange(range);
});
</script>
</body>
</html>
兼容注意事项
不同浏览器对Selection和Range的实现存在细微差异，实际使用时需要注意以下几点：
- 在IE浏览器中，获取选择对象的方式是
document.selection，和标准的window.getSelection()不同，如果需要兼容旧版IE需要做对应判断。 - 如果contenteditable元素内部有嵌套的子元素，获取
startContainer时可能是文本节点，也可能是元素节点，插入节点时不需要特殊处理，insertNode方法会自动处理位置。 - 如果插入的内容包含HTML标签，需要使用
range.pasteHTML（IE）或者先创建元素再插入，避免直接插入字符串导致标签被转义为纯文本。
常见问题解答
插入后样式不生效怎么办？
首先检查创建的样式节点是否正确设置了样式属性，其次确认contenteditable元素本身没有用更高优先级的CSS规则覆盖插入节点的样式，比如父元素的!important样式会影响子元素的样式表现。
为什么插入后光标跑到最前面了？
这是因为没有执行调整光标位置的步骤，插入节点后需要手动设置Range的起始位置到插入节点的后面，再重新设置选择范围，才能让光标跟随到插入内容的末尾。
contenteditableJavaScriptRangeSelection光标操作修改时间：2026-07-02 09:00:20