在前端开发中，contenteditable 属性被广泛用于实现富文本编辑器。用户可以在这种区域内输入文字、插入图片或其他 HTML 标签，并设置样式。但是，有时候需要获取光标所在位置或选中的文本，以便进行进一步的操作。
获取光标位置
要获取光标位置，我们可以使用 Selection API 中的对象。该对象表示当前文档中用户选择的文本范围或光标位置。以下是获取光标位置的示例代码：
-- -------------------- ---- -------
-------- ------------------------- -
--- ----------- - --
----- --- - ----------------------
-- --------------- - -- -
----- ----- - ------------------
----- ------------- - -------------------
------------------------------------------
---------------------------------------- -----------------
----------- - --------------------------------
-
------ ------------
-上述代码中，element 是一个带有 contenteditable 属性的 HTML 元素。函数返回从元素的起始点到光标位置之间的字符数量。注意，如果此时没有光标，则返回值为 0。
插入 HTML 内容
接下来，让我们看一下如何在 contenteditable 区域中插入 HTML 内容。刚才提到了 Selection API，它不仅可以获取光标位置，还可以用于插入文本或 HTML。以下是一个示例函数：
function insertHtmlAtCaret(html) {
const sel = window.getSelection();
if (sel.rangeCount) {
const range = sel.getRangeAt(0);
const node = range.createContextualFragment(html);
range.insertNode(node);
}
}上述代码中，html 参数包含要插入的 HTML 内容。该函数将使用 Selection API 中当前选择的范围插入该内容。
操作 contenteditable 区域
最后，让我们看一下如何操作 contenteditable 区域以及其中的 HTML 内容。可以通过以下两个事件来监听区域中的变化：
input：在用户输入时触发。blur：在元素失去焦点时触发。
以下是带有这些事件处理程序的示例代码：
-- -------------------- ---- ------- ----- -------- - --------------------------------------- ---------------------------------- -- -- - -- ----------- --- --------------------------------- -- -- - -- ------------- ---
总结
在 contenteditable 区域内定位符号和 HTML 内容可能很棘手，但使用 Selection API 可以轻松实现。此外，了解 input 和 blur 等事件可以帮助您更好地操作编辑器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14540