0

我有 contentEditable 元素（可能是 div ...），我想在 keydown 事件上替换哈希标签或 url，如 twitter（或 facebook）。

我通常可以用下面的这个来归档它..

    //onKeydown Event
    ....

    _this.saveRange();   // save current range

    var string = _this.getHtml();    //_this is contentEditable element (div)

    var reg = /(:?#{1}|\s#{1})([A-Za-z0-9.;_\-ㄱ-ㅎ|ㅏ-ㅣ|가-힣]+)/gm;

    if(reg.test(string)) {
        var text = string.replace(reg, function(u) {
            return '<a class="highlight" rel="external" id="test">' + u + '</a>';
        });

        _this.setHtml(text);    // insert html what replaced using innerHtml 

        _this.restoreRange();

    }

这可以很好地替换文本.. 在 keydown 事件上。

但是当我设置替换的 html 时，文档范围（光标）移动到第一个位置。

这是问题。

我在 innerHtml 之前保存了范围，并在 innerHtml 之后恢复了范围。但它不起作用。

下面我使用了函数 saveRange 和 restoreRange。

    var savedRange;   //public variable

    function saveRange() {
        if(window.getSelection) {
            savedRange = window.getSelection().getRangeAt(0);
        } else if(document.selection) {  //IE
            savedRange = document.selection.createRange();
        }
    }    



     function restoreRange() {
            if (savedRange != null) {
                    if (window.getSelection)//non IE and there is already a selection
                    {
                        var s = window.getSelection();
                        if (s.rangeCount > 0) 
                            s.removeAllRanges();
                        s.addRange(savedRange);
                    }
                    else if (document.createRange)//non IE and no selection
                    {
                        window.getSelection().addRange(savedRange);
                    }
                    else if (document.selection)//IE
                    {
                        savedRange.select();
                    }
                }
         }

任何人都可以提出解决方案吗？？？或者给我一个链接......

4

1 回答 1

0

只要文本内容保持不变，您就可以通过字符索引保存和恢复选择范围。我在这里提供了简单的功能来做到这一点：

https://stackoverflow.com/a/17694760/96100

于 2013-08-21T09:00:20.040 回答