将光标保持在可编辑的位置 [英] Retain cursor position in contenteditable

问题描述

我正在尝试使用contenteditable创建一个RTF文本区域.突出显示的解析器返回一个html字符串，我用html字符串替换了元素的内容(也许无效，这就是目前的方式).

I am trying to create a richtext area using contenteditable. The parser for the highlighting returns a html string which I replace the content of the element with (perhaps ineffective, thats the way it has to be for now).

contenteditable的问题在于，在我可以理解的情况下，光标位置没有保留下来.

The problem with contenteditable is that the cursor position is not retained after something like this, which I can understand.

有没有办法保持这个位置?如果可以帮助解决方案，我可以使解析器返回一个元素，该元素表示插入符号的位置(考虑到光标在文本中的偏移).

Is there a way to retain this position? I could make the parser return a element representing where the caret should be (given the cursors offset in the text) if this would aid in a solution.

谢谢.

推荐答案

我可以使解析器返回一个表示插入符号应该在哪里的元素

I could make the parser return a element representing where the caret should be

那就足够了.假设您解析了生成的HTML，现在在sentinel中具有对插入符号应在此处"的引用.

That would be enough. Suppose you parse the generated HTML and now you have a reference to the caret-should-be-here element in sentinel.

使用document.createRange()创建DOM范围.设here为新范围.调用 here.selectNode(sentinel) 以使范围围绕元素.

Use document.createRange() to create a DOM range. Let here be the new range. Call here.selectNode(sentinel) to have the range surround the element.

调用 here.deleteContents() 删除虚拟元素.

Call here.deleteContents() to remove the dummy element.

调用window.getSelection().removeAllRanges()清除当前选择，该选择由于HTML更改而变得混乱.

Call window.getSelection().removeAllRanges() to clear the current selection, which has gotten messed up by the HTML change.

调用window.getSelection().addRange(here)将光标置于元素所在的位置.

Call window.getSelection().addRange(here) to put the cursor where the element used to be.

sentinel是我的锚点元素吗?

is sentinel my anchor element?

是的，我想.

如何获取字符串中的光标位置? ...我想要从字符串开头的偏移量.

How do I fetch the cursor position in the string? ... I want the offset from the start of the string.

让我们从光标位置开始.窗口选择的第零范围应该是光标的位置.也就是说，范围的起点和终点在光标处的同一位置.但是，这些位置的表达方式是针对DOM树的，而不是字符串和偏移量.它们具有一个(start | end)容器和一个(start | end)Offset.检查DOM规范的含义.

Let's start with the cursor position. The zeroth range of the window's selection should be the cursor's position. That is, the range's start and end are in the same place, at the cursor. However, these locations are expressed in a way that's geared toward DOM trees, rather than for string and offsets. They have a (start|end)Container and a (start|end)Offset. Check the DOM spec for what these mean.

您对某种字符串偏移量感兴趣.按照我的解释，这就像是如果您采用了纯文本版本的子树，那么对应于范围的索引是什么?定义子树的纯文本版本有多种方法.一种是textContent属性返回的内容，其中foo<br>bar给出"foobar".某些浏览器定义innerText，其中foo<br>bar给出"foor \ nbar".您可能已经选择了将要使用的那个，但是问题中没有提到它.

You're interested in some sort of string offset. As I interpret it, this would be like, if you took a plaintext-only version of the subtree, what index corresponds to the range? There are multiple ways to define a plaintext version of a subtree. One is what the textContent property returns, where foo<br>bar gives "foobar". Some browsers define innerText, where foo<br>bar gives "foor\nbar". You've probably picked the one that you'll be using, but it's not stated in the question.

无论如何，这是一个主意，但这可能不是您应用程序的正确补偿方式.

Anyway, here's an idea, but it might not be the right kind of offset for your app.

将窗口选择范围设置为从开头(应为索引0的任何地方)到光标位置的单个范围.

Set the window selection to a single range going from the beginning (wherever index 0 should be) to the cursor position.

阅读 window.getSelection().toString().length .在我开发的浏览器中，选择对象上的toString给出的结果可与innerText媲美.

Read window.getSelection().toString().length. In the browsers I've developed for, toString on a selection object gives results comparable to innerText.

这篇关于将光标保持在可编辑的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！