jquery - Rangy + ContentEditable + 设置插入符和替换选择

Question

我有以下代码片段将插入符号设置为给定索引 index

var el = $("#subjectMessage"), index = 9 ;
var range = rangy.createRange();
range.setStart(el[0].childNodes[0], index);
range.collapse(true);
var sel = rangy.getSelection();
sel.setSingleRange(range);

当我将输入元素添加到 contentEditable div 时出现问题，我无法再始终如一地将插入符号设置在所需位置。

我想将这些输入视为 div 中的一个位置(就像它们只是一个字符一样)。

除此之外，我还需要类似的代码来将此 contentEditable div 中的选择替换为我自己的一些文本，而且我不是很熟悉(完全) 以了解如何使这项工作...

非常欢迎所有帮助!

这是一个你可以玩弄的 fiddle :

http://jsfiddle.net/ee93P/

Answer 1

Rangy 的选择和范围 API 是标准 DOM 选择和范围 API 的超集，因此来自 MDN(Range、Selection)等位置的文档适用。

您遇到的问题是范围边界表示为包含 DOM 节点内的偏移量。例如，在下面的 HTML 中，插入符号表示为竖线字符:

<p>Foo<br>b|ar</p>

...插入符号范围的开始和结束边界相同，并设置为文本节点“bar”中的偏移量 1。

如果您想将位置设置为 <p> 的文本内容中的偏移量元素，则需要进行一些 DOM 遍历。我已经根据 another answer of mine 编写了一个实现.这是天真的实现:它没有考虑任何可能不可见的文本(例如，通过 CSS 或在 or 元素中)并且可能有换行符的浏览器差异(IE 与其他所有内容)，并采用没有考虑折叠的空白(例如 2 个或更多连续的空格字符折叠到页面上的一个可见空间)。这是一件很难做对的事情，这就是为什么我通常不推荐它。我计划为 Rangy 编写一个基于文本的模块来处理所有这些，但我还没有开始。

http://jsfiddle.net/ee93P/2/

代码:

function setCaretCharIndex(containerEl, index) {
    var charIndex = 0, stop = {};

    function traverseNodes(node) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (index >= charIndex && index <= nextCharIndex) {
                rangy.getSelection().collapse(node, index - charIndex);
                throw stop;
            }
            charIndex = nextCharIndex;
        }
        // Count an empty element as a single character. The list below may not be exhaustive.
        else if (node.nodeType == 1
                 && /^(input|br|img|col|area|link|meta|link|param|base)$/i.test(node.nodeName)) {
            charIndex += 1;
        } else {
            var child = node.firstChild;
            while (child) {
                traverseNodes(child);
                child = child.nextSibling;
            }
        }
    }

    try {
        traverseNodes(containerEl);
    } catch (ex) {
        if (ex != stop) {
            throw ex;
        }
    }
}