Question

我已经研究了所有的Rangy Q＆amp; Days，但是无法适应这种情况。

我有以下满足感

<div id="area" style="width:100%;height:2em;" 
contentEditable="true";
onkeyup="formatText();"
></div>

调用一个函数，每次用户输入内容时，它都会解析内容并格式化特定的标记。

 function formatText() {

    var el = document.getElementById('area');
    var savedSel = saveSelection(el); // calls Rangy function

    var tokenColor;

        // removes html tags before passing the expression to the parser
    var userInput = document.getElementById('area').innerHTML.replace(/(<([^>]+)>)/g,"").replace(/&amp;/g, "").replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/<span[^>]*>+<\/span>/, "");


    var i, newHTML=[];

    tokenType=[]; // [NUMBER,+,(,NUMBER,..]
    tokenArray=[]; // [3,+,(5,...]

    var resultOutput =  parse(userInput); // parser also fills tokenType and tokenArray

    for (i=0; i<tokenArray.length-1; i++){

        newHTML += "<span style='color: " + tokenColor + " '>" +  tokenArray[i] + "</span>";

         } // newHTML looks like <span style='color: red'>3</span><span style='color: black'>+</span> etc.


    el.innerHTML = newHTML; // replaces content of <div> with formatted text    

    restoreSelection(el, savedSel);  // calls Rangy function to restore cursor position
}

我在本论坛的其他帖子中使用了作者提供的以下基于Rangy的功能：

    function saveSelection(containerEl) {
    var charIndex = 0, start = 0, end = 0, foundStart = false, stop = {};
    var sel = rangy.getSelection(), range;

    function traverseTextNodes(node, range) {
        if (node.nodeType == 3) {
            if (!foundStart && node == range.startContainer) {
                start = charIndex + range.startOffset;
                foundStart = true;
            }

            if (foundStart && node == range.endContainer) {
                end = charIndex + range.endOffset;
                throw stop;
            }
            charIndex += node.length;


        }  else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                traverseTextNodes(node.childNodes[i], range);
            }   
        }
    }

    if (sel.rangeCount) {
        try {
            traverseTextNodes(containerEl, sel.getRangeAt(0));
        } catch (ex) {
            if (ex != stop) {
                throw ex;
            }
        }
    }

    return {
        start: start,
        end: end
    };
}



function restoreSelection(containerEl, savedSel) {
    var charIndex = 0, range = rangy.createRange(), foundStart = false, stop = {};
    range.collapseToPoint(containerEl, 0);

    function traverseTextNodes(node) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                throw stop;
            }
            charIndex = nextCharIndex;
        }   

        else {
            for (var i = 0, len = node.childNodes.length; i < len; ++i) {
                traverseTextNodes(node.childNodes[i]);
            }
        }
    }

    try {
        traverseTextNodes(containerEl);
    } catch (ex) {
        if (ex == stop) {
            rangy.getSelection().setSingleRange(range);   
        } else {
            throw ex;
        }
    }
}

在我尝试删除一个角色之前，一切都很完美。此时，光标跳转到div的开头。

知道为什么会这样吗？

非常感谢。

Answer 1

我已经解决了Tim Down的帮助问题（感谢蒂姆！）。

他最近将新的TextRange模块添加到了Rangy，它运行得很好。该模块具有基于页面上可见文本内的字符索引的选择保存/恢复，因此不受innerHTML更改的影响。你可以在这里找到演示：

http://rangy.googlecode.com/svn/trunk/demos/textrange.html

文档（初步）：http://code.google.com/p/rangy/wiki/TextRangeModule

基本上代码应该是：

    document.getElementById("area").onkeyup = function() {
    var sel = rangy.getSelection();
    var savedSel = sel.saveCharacterRanges(this);    

    var userInput = this.textContent || this.innerText;

    var userInputLength = userInput.length;  
    var newHTML = [];

    for (var i=0; i<userInputLength; i++) {
        newHTML[i] = "<span style='color: red'>" + userInput.charAt(i)  + "</span>";  
    }

    this.innerHTML =  newHTML.join("");

    sel.restoreCharacterRanges(this, savedSel);
};

希望这有帮助。

Answer 2

它让我觉得它可以起作用。解决方案可能就像在恢复选择之前调用contenteditable focus()的{{1}}方法一样简单。

Rangy在可疑的div中退出了对退格的插入位置

2 个答案: