在日常开发中，我们常会遇到需要在`contenteditable="true"`的元素中操作光标位置的需求。比如用户正在编辑一段文字时，我们需要在光标所在的位置插入特定的内容，如表情符号或代码片段。这不仅能提升用户体验，还能让交互更有趣！🤔

首先，我们需要获取当前光标的位置，可以通过创建一个范围（Range）对象来实现。然后，使用`insertNode()`方法将新内容插入到光标处。例如，在用户输入文字时，可以自动为其添加一些可爱的emoji，像🎉、✨或者🥰，这样既实用又贴心。💖

代码示例：

```javascript

function insertAtCursor(html) {

let sel, range;

if (window.getSelection) {

sel = window.getSelection();

if (sel.getRangeAt && sel.rangeCount) {

range = sel.getRangeAt(0);

range.deleteContents();

let el = document.createElement("span");

el.innerHTML = html;

range.insertNode(el);

}

}

}

```

通过这样的小技巧，我们可以轻松地在任何`contenteditable`区域为用户提供个性化的服务，让网页更加生动有趣！🎉