保存所选文本范围以供稍后使用不起作用 [英] Save Selected Text Range for Use Later Not working
问题描述
我正在使用 contenteditable
并突出显示一些文字。我想再备份该文本范围,稍后再给该范围(文本)赋予不同的颜色。如果我签入我的 zss_editor.restorerange
方法,我会收到一个有效的选择
对象,所以它必须是不正确的我以前如何保存该范围。
I am using contenteditable
and highlighting some text. I want to then backup that text range, and at a later time give that range(text) a different color. If I check in my zss_editor.restorerange
method I do get back a valid selection
object, so it must be something incorrect in how I am previously saving that range.
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/
Working example on JS Fiddle: http://jsfiddle.net/zedsaid/gC3jq/11/
为什么,当我备份范围并希望在以后恢复时,它不起作用?我是否需要以不同的方式备份范围?
推荐答案
您可以通过存储startContainer来备份范围&安培; startOffset以及endContainer& endOffset。要恢复,只需创建一个新的范围对象并设置该范围对象的开始和结束,然后将其添加到选择中
You can backup the range by storing the startContainer & startOffset as well as the endContainer & endOffset. To restore, you just create a new range object and set the start and end of that range object then add it to the selection
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');
});
这篇关于保存所选文本范围以供稍后使用不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!