设置光标位置

### WangEditor 中设置光标位置的方法 在 WangEditor 富文本编辑器中，可以通过特定 API 来精确控制光标的放置位置。对于版本 4.3.0 的 WangEditor，可以使用 `editor.command` 或者直接操作 DOM 节点的方式来进行光标定位。 #### 使用命令方式设置光标位置 通过调用 editor 实例下的 command 方法，能够更加灵活地处理光标的移动逻辑： ```javascript // 假设已经初始化了一个名为 editor 的实例 const pElement = document.createElement('p'); // 创建一个新的段落元素 editor.insertElem(pElement); // 将新创建的节点插入到编辑区 editor.command({ name: 'insertHTML', value: '<span>新的内容</span>', callback(editor, result) { const range = document.createRange(); const sel = window.getSelection(); let lastChild; if (result.node && result.node.lastChild) { lastChild = result.node.lastChild; } else { lastChild = pElement; } range.setStartAfter(lastChild); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); // 移动光标到最后一个字符后面 } }); ``` 上述代码片段展示了如何在一个指定的新创建的内容之后重新设定光标的位置[^2]。 #### 利用 Document 对象调整光标 当遇到复杂场景下无法直接获取光标时，可以在原有基础上增加对文档对象的操作以确保能正确找到光标所在之处： ```javascript function setCursorAtEnd(node){ var selection = window.getSelection(), range = document.createRange(); while (node.lastChild){ node=node.lastChild;} range.setStartAfter(node); range.collapse(true); selection.removeAllRanges(); selection.addRange(range); } let container = editor.txt.$textContainerEl[0]; // 获取编辑区域容器 setCursorAtEnd(container); // 设置光标至结尾处 ``` 此方法适用于那些由于某些原因导致常规手段难以获得光标的情况，比如多级嵌套结构或者自定义组件内部[^3]。 #### 注意事项 - 上述两种方法均需确保当前页面具有可选中文档的能力（即未禁用用户选择） - 如果是在异步加载数据后再执行这些操作，则应考虑延迟执行或等待渲染完成再进行光标重置