在前端开发中，使用 contenteditable 属性可以使一个元素变成可编辑的，类似于一个富文本编辑器。然而，在使用这个属性时，很多开发者会遇到一个问题：如何在光标所在位置插入特定的符号？
问题描述
假设我们有一个 div 元素，设置了 contenteditable="true" 属性：
<div contenteditable="true"></div>
当我们点击这个元素并开始输入时，光标会出现在其中一个字符的位置上。我们希望在这个位置之前或之后插入一个特定的符号，例如逗号。
解决方案
为了在 contenteditable 元素中插入符号，我们需要使用 Range 对象和 Selection API。
Range 对象
Range 对象表示文档中的一个范围，它通常由起始节点、起始偏移量、结束节点和结束偏移量组成。我们可以使用 Range 对象来操作元素的子节点和文本节点。
创建一个 Range 对象非常简单，只需调用 document.createRange() 方法即可。例如，我们可以通过以下代码创建一个包含整个 div 元素的 Range 对象：
const range = document.createRange(); range.selectNodeContents(myDiv);
Selection API
Selection API 是一组与用户选择相关的方法和事件。我们可以使用它来获取当前选中的区域，并在其中插入新的内容。
获取当前选中区域的方法很简单，只需调用 window.getSelection() 方法即可。例如：
const selection = window.getSelection();
我们还可以使用 selection.getRangeAt(0) 方法获取当前选中区域的 Range 对象。如果用户没有选择任何内容，这个方法会返回文档中的一个空 Range 对象。
插入符号
现在我们已经获得了 Range 对象和 Selection 对象，就可以在光标所在位置前或后插入符号了。
假设我们要插入逗号，我们可以按照以下步骤操作：
- 获取当前选中区域的 Range 对象。
- 使用 Range 对象的
getClientRects()方法获取光标位置的信息。 - 根据光标位置的信息计算出逗号应该插入的位置。
- 如果光标在行末，则在行末插入逗号；否则，在光标后面插入逗号。
- 更新 Range 对象的起始节点和起始偏移量。
- 将新的字符插入到 Range 对象中。
- 将 Range 对象重新设置为当前选中区域。
代码示例：
-- -------------------- ---- ------- -------- ------------- - ----- ----- - ------------------------------------ ----- ----- - ----------------------- ----- ---- - ------------------ - --- ----- - - ----------- ----- - - ------------ ----- ------- - ----------------------------- ----- -------- - ----------------------- ------------------------------------- ----------------- ----------------------------- -------------------------------- --------------------------------------- ---------------------- ------------------------------------- ---------------------- ----- --------- - ---------------------- ---------------------------- -------------------------- -
指导意义
使用 contenteditable 属性可以简化开发人员的工作，使得用户可以轻松地编辑富文本内容。了解 Range 对象和 Selection API 可以帮助我们更好地控制可编辑元素中的内容，实现一些复杂的交互效果。
在实际开发中，我们还需要考虑兼容性问题。不同浏览器对 Selection API 的支持程度可能存在差异，因此建议在使用时进行测试。
最后，为了保证用户
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12657