在HTML中选择后继续改变范围对象 [英] Persisting the changes of range objects after selection in HTML

问题描述

有没有一种方法可以保存更改，例如更改跨越多个标签的HTML文本的背景，以便在再次加载时，所做的更改应反映在HTML页面中。

编辑：详细说明。

加载HTML页面时，使用范围对象和executeCommand选择并突出显示文本：

  document.execCommand（BackColor，false，'yellow'）; 
  

更改（突出显示文字为黄色）一直保留到页面重新加载。但是当页面重新加载时，这些更改不存在。我想要的是以某种方式保存在本地数据库sqlite中的这些更改，以便在页面重新加载/刷新时显示HTML页面中的更改。

任何想法如何操作它。我是否需要保存其下一次加载页面时可用于创建范围的范围起始偏移量和结束偏移量。请给出您的见解。对于每个选择，您都可以将所选范围序列化为字符偏移量，并在重新加载时使用反序列化操作像这样：

演示： http://jsfiddle.net/WeWy7/ 3 /

代码：

  var saveSelection， restoreSelection; 
 
 if（window.getSelection&& document.createRange）{
 saveSelection = function（containerEl）{
 var range = window.getSelection（）。getRangeAt（0） ; 
 var preSelectionRange = range.cloneRange（）; 
 preSelectionRange.selectNodeContents（containerEl）; 
 preSelectionRange.setEnd（range.startContainer，range.startOffset）; 
 var start = preSelectionRange.toString（）。length; 
 
 return {
 start：start，
 end：start + range.toString（）。length 
}; 
}; 
 
 restoreSelection = function（containerEl，savedSel）{
 var charIndex = 0，range = document.createRange（）; 
 range.setStart（containerEl，0）; 
 range.collapse（true）; 
 var nodeStack = [containerEl]，node，foundStart = false，stop = false; $（！stop&&（node = nodeStack.pop（）））{
 if（node.nodeType == 3）{
 var nextCharIndex = charIndex + node.length; 
 if（！foundStart& amp; saveSel.start> = charIndex&& amp; saveSel.start< = nextCharIndex）{
 range.setStart（node，savedSel.start  -  charIndex）; 
 foundStart = true; （foundStart& SaveSel.end> = charIndex&& amp; SaveSel.end< = nextCharIndex）{
 range.setEnd（node，savedSel.end  - 的charIndex）; 
 stop = true; 
} 
 charIndex = nextCharIndex; 
} else {
 var i = node.childNodes.length; 
 while（i--）{
 nodeStack.push（node.childNodes [i]）; 
} 
} 
} 
 
 var sel = window.getSelection（）; 
 sel.removeAllRanges（）; 
 sel.addRange（range）; 
 
} else if（document.selection）{
 saveSelection = function（containerEl）{
 var selectedTextRange = document.selection.createRange（）; 
 var preSelectionTextRange = document.body.createTextRange（）; 
 preSelectionTextRange.moveToElementText（containerEl）; 
 preSelectionTextRange.setEndPoint（EndToStart，selectedTextRange）; 
 var start = preSelectionTextRange.text.length; 
 
 return {
 start：start，
 end：start + selectedTextRange.text.length 
} 
}; 
 
 restoreSelection = function（containerEl，savedSel）{
 var textRange = document.body.createTextRange（）; 
 textRange.moveToElementText（containerEl）; 
 textRange.collapse（true）; 
 textRange.moveEnd（character，savedSel.end）; 
 textRange.moveStart（character，savedSel.start）; 
 textRange.select（）; 
}; 
} 
  

Is there a way to save the changes like changing the background of HTML text that span over multiple tags so that when it is loaded again the changes made should be reflected in the HTML page.

EDIT: Detailed explanation.

When the HTML page is loaded, the text is selected and highlighted using the range object and the executeCommand:

             document.execCommand("BackColor", false, 'yellow');

The changes (highlighting the text as yellow) remain until the page is reloaded. But when the page is reloaded these changes are not there. What i want is to save somehow these changes like in local DB sqlite so that when page is reloaded/refreshed the changes in HTML page should appear.

Any idea how to do it. Do i need to save its range start offset and end offset which can be used to create range next time the page is loaded. Please give your insights.

解决方案

For each selection, you could serialize the selected range to character offsets and deserialize it again on reload using something like this:

Demo: http://jsfiddle.net/WeWy7/3/

Code:

var saveSelection, restoreSelection;

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.selectNodeContents(containerEl);
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length
        };
    };

    restoreSelection = function(containerEl, savedSel) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);
        range.collapse(true);
        var nodeStack = [containerEl], node, foundStart = false, stop = false;

        while (!stop && (node = nodeStack.pop())) {
            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);
                    stop = true;
                }
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {
                    nodeStack.push(node.childNodes[i]);
                }
            }
        }

        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
} else if (document.selection) {
    saveSelection = function(containerEl) {
        var selectedTextRange = document.selection.createRange();
        var preSelectionTextRange = document.body.createTextRange();
        preSelectionTextRange.moveToElementText(containerEl);
        preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
        var start = preSelectionTextRange.text.length;

        return {
            start: start,
            end: start + selectedTextRange.text.length
        }
    };

    restoreSelection = function(containerEl, savedSel) {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(containerEl);
        textRange.collapse(true);
        textRange.moveEnd("character", savedSel.end);
        textRange.moveStart("character", savedSel.start);
        textRange.select();
    };
}

这篇关于在HTML中选择后继续改变范围对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！