Сохранить выбранный диапазон текста для использования позже Не работает

Question

Я использую contenteditable и выделяю текст. Затем я хочу создать резервную копию этого текстового диапазона, и в дальнейшем вы получите этот диапазон (текст) другого цвета. Если я проверю свой метод zss_editor.restorerange, я вернусь к действительному объекту selection, поэтому он должен быть чем-то неправильным в том, как я ранее сохранял этот диапазон.

var zss_editor = {}; 

// The current selection 
zss_editor.currentSelection; 

zss_editor.backuprange = function(){ 
    var selection = window.getSelection(); 
    zss_editor.currentSelection = selection.getRangeAt(0); 
    zss_editor.currentSelection.setEnd(zss_editor.currentSelection.startContainer, zss_editor.currentSelection.startOffset); 
} 

zss_editor.restorerange = function(){ 
    var selection = window.getSelection(); 
    selection.removeAllRanges(); 
    selection.addRange(zss_editor.currentSelection); 
    console.log(zss_editor.currentSelection); 
} 

zss_editor.setTextColor = function(color) { 
    zss_editor.restorerange(); 
    document.execCommand("styleWithCSS", null, true); 
    document.execCommand('foreColor', false, color); 
    document.execCommand("styleWithCSS", null, false); 
} 

zss_editor.setBackgroundColor = function(color) { 
    zss_editor.restorerange(); 
    document.execCommand("styleWithCSS", null, true); 
    document.execCommand('hiliteColor', false, color); 
    document.execCommand("styleWithCSS", null, false); 
} 

Рабочего пример на JS Fiddle: http://jsfiddle.net/zedsaid/gC3jq/11/

Почему, когда я резервное копирование диапазона и хотим восстановить его в последний раз, она не работает? Нужно ли мне резервировать диапазон по-другому?

Answer 1

Вы можете создать резервную область, храня startContainer & startOffset, а также endContainer & endOffset. Для восстановления, вы просто создать новый объект диапазона и установить начало и конец этого объекта диапазона затем добавить его к выбору

var zss_editor = {}; 

// The current selection 
zss_editor.currentSelection; 

zss_editor.backuprange = function(){ 
    var selection = window.getSelection(); 
    var range = selection.getRangeAt(0); 
    zss_editor.currentSelection = {"startContainer": range.startContainer, "startOffset":range.startOffset,"endContainer":range.endContainer, "endOffset":range.endOffset}; 

} 

zss_editor.restorerange = function(){ 
    var selection = window.getSelection(); 
    selection.removeAllRanges(); 
    var range = document.createRange(); 
    range.setStart(zss_editor.currentSelection.startContainer, zss_editor.currentSelection.startOffset); 
    range.setEnd(zss_editor.currentSelection.endContainer, zss_editor.currentSelection.endOffset); 
    selection.addRange(range); 
    console.log(range); 
} 

zss_editor.setTextColor = function(color) { 
    zss_editor.restorerange(); 
    document.execCommand("styleWithCSS", null, true); 
    document.execCommand('foreColor', false, color); 
    document.execCommand("styleWithCSS", null, false); 
} 

zss_editor.setBackgroundColor = function(color) { 
    zss_editor.restorerange(); 
    document.execCommand("styleWithCSS", null, true); 
    document.execCommand('hiliteColor', false, color); 
    document.execCommand("styleWithCSS", null, false); 
} 

$('#backup').click(function() { 
    zss_editor.backuprange(); 
}); 

$('#color1').click(function() { 
    zss_editor.setTextColor('#007AFF'); 
}); 

$('#color2').click(function() { 
    zss_editor.setBackgroundColor('#007AFF'); 
});