複数のタグにまたがる HTML テキストの背景を変更するなど、変更を保存する方法はありますか。これにより、再度読み込まれたときに変更が HTML ページに反映されるようになります。
編集：詳細な説明。
HTML ページが読み込まれると、range オブジェクトと executeCommand を使用して、テキストが選択および強調表示されます。
document.execCommand("BackColor", false, 'yellow');
変更 (テキストを黄色で強調表示) は、ページがリロードされるまで残ります。しかし、ページがリロードされると、これらの変更はありません。私が望むのは、これらの変更をローカル DB 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;
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();
};
}
カーソルが新しい段落の先頭にある場合、文字オフセットの使用は機能しません。以下のアプローチでは、DOM ノードをウォークし、すべてのノードをオフセットにカウントします。また、開始と終了を個別に処理して、選択範囲が正確な位置を記憶していることを確認します。これは私が主要なプロジェクトで使用する更新版です (最後の関数を参照してください)。
/*
Gets the offset of a node within another node. Text nodes are
counted a n where n is the length. Entering (or passing) an
element is one offset. Exiting is 0.
*/
var getNodeOffset = function(start, dest) {
var offset = 0;
var node = start;
var stack = [];
while (true) {
if (node === dest) {
return offset;
}
// Go into children
if (node.firstChild) {
// Going into first one doesn't count
if (node !== start)
offset += 1;
stack.push(node);
node = node.firstChild;
}
// If can go to next sibling
else if (stack.length > 0 && node.nextSibling) {
// If text, count length (plus 1)
if (node.nodeType === 3)
offset += node.nodeValue.length + 1;
else
offset += 1;
node = node.nextSibling;
}
else {
// If text, count length
if (node.nodeType === 3)
offset += node.nodeValue.length + 1;
else
offset += 1;
// No children or siblings, move up stack
while (true) {
if (stack.length <= 1)
return offset;
var next = stack.pop();
// Go to sibling
if (next.nextSibling) {
node = next.nextSibling;
break;
}
}
}
}
};
// Calculate the total offsets of a node
var calculateNodeOffset = function(node) {
var offset = 0;
// If text, count length
if (node.nodeType === 3)
offset += node.nodeValue.length + 1;
else
offset += 1;
if (node.childNodes) {
for (var i=0;i<node.childNodes.length;i++) {
offset += calculateNodeOffset(node.childNodes[i]);
}
}
return offset;
};
// Determine total offset length from returned offset from ranges
var totalOffsets = function(parentNode, offset) {
if (parentNode.nodeType == 3)
return offset;
if (parentNode.nodeType == 1) {
var total = 0;
// Get child nodes
for (var i=0;i<offset;i++) {
total += calculateNodeOffset(parentNode.childNodes[i]);
}
return total;
}
return 0;
};
var getNodeAndOffsetAt = function(start, offset) {
var node = start;
var stack = [];
while (true) {
// If arrived
if (offset <= 0)
return { node: node, offset: 0 };
// If will be within current text node
if (node.nodeType == 3 && (offset <= node.nodeValue.length))
return { node: node, offset: Math.min(offset, node.nodeValue.length) };
// Go into children (first one doesn't count)
if (node.firstChild) {
if (node !== start)
offset -= 1;
stack.push(node);
node = node.firstChild;
}
// If can go to next sibling
else if (stack.length > 0 && node.nextSibling) {
// If text, count length
if (node.nodeType === 3)
offset -= node.nodeValue.length + 1;
else
offset -= 1;
node = node.nextSibling;
}
else {
// No children or siblings, move up stack
while (true) {
if (stack.length <= 1) {
// No more options, use current node
if (node.nodeType == 3)
return { node: node, offset: Math.min(offset, node.nodeValue.length) };
else
return { node: node, offset: 0 };
}
var next = stack.pop();
// Go to sibling
if (next.nextSibling) {
// If text, count length
if (node.nodeType === 3)
offset -= node.nodeValue.length + 1;
else
offset -= 1;
node = next.nextSibling;
break;
}
}
}
}
};
exports.save = function(containerEl) {
// Get range
var selection = window.getSelection();
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
return {
start: getNodeOffset(containerEl, range.startContainer) + totalOffsets(range.startContainer, range.startOffset),
end: getNodeOffset(containerEl, range.endContainer) + totalOffsets(range.endContainer, range.endOffset)
};
}
else
return null;
};
exports.restore = function(containerEl, savedSel) {
if (!savedSel)
return;
var range = document.createRange();
var startNodeOffset, endNodeOffset;
startNodeOffset = getNodeAndOffsetAt(containerEl, savedSel.start);
endNodeOffset = getNodeAndOffsetAt(containerEl, savedSel.end);
range.setStart(startNodeOffset.node, startNodeOffset.offset);
range.setEnd(endNodeOffset.node, endNodeOffset.offset);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
};
これは、最新のブラウザー (少なくとも IE 9+) でのみ機能します。
コンテキストについて詳しく知らないと、正確な答えを出すのは難しいですが、可能ですが、ほとんどの場合、非常に複雑になります。ユースケースに応じて、いくつかの方法があります。
Cookie またはローカル ストレージ
ある種のクライアント側ストレージ (Cookie、ローカル ストレージなど) を使用して、どの要素がどのように変更されたかに関する情報を保存できます。ページがリロードされるたびに、そのストレージを読み取り、変更を適用します。それを実装する方法は、それらの変更がどのように行われたかによって異なり、1 つの SO-answer でカバーするには広すぎるでしょう。
サーバー側ストレージ
各ユーザーが誰であるかがわかっている場合 (何らかの形式の認証がある場合)、ユーザーが何かの外観を変更するたびに (それがどのように行われたとしても)、サーバーに対して ajax 要求を行い、それらの変更をデータベースに保存します。後続のページの読み込みごとに、リクエストの用途を確認し、データベースでルックアップを行って変更が加えられているかどうかを確認し、その場合はそれに応じて適用する必要があります。
クライアント側とサーバー側の両方のストレージ ソリューションに共通するのは、実装するにはかなりの規模になるということです。
ブラウザプラグイン
もう 1 つの方法は、ユーザーが Web ページのレンダリング方法をカスタマイズできるようにする、Firefox 用の Greasemonkeyなどのプラグインを利用することです。これらのカスタマイズは、ページが読み込まれても維持されます。