Подсветка текста и функция добавления заметок в epub reader ios
Я занимаюсь разработкой epub reader для ios и android. Я хочу реализовать подсветку текста и добавить функцию заметки в мой epub reader. И я хочу узнать, как работает этот функционал для фиксированного макета epub. Я могу получить выбранный объект поjavascript:window.getSelection()
, Я хочу сохранить и получить эти объекты для будущего использования. Вот код, который я использовал для выделения и сохранения текста:
var selection;
var storedSelections[];
function highlightText() {
if (window.getSelection) {
selection = window.getSelection();
}
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
var selectedText = range.toString();
var span = document.createElement("span");
span.id = "span_" + range.startOffset + "_" + range.endOffset ;
alert(span.id);
span.onclick = function() {
myOnclikFunction(selectedText);};
span.setAttribute("class","uiWebviewHighlight");
span.style.backgroundColor = "skyblue";
range.surroundContents(span);
selection.removeAllRanges();
selection.addRange(range);
for (var i = 0; i < selection.rangeCount; i++) {
storedSelections.push (selection.getRangeAt (i));
}
selection.removeAllRanges();
localStorage.setItem('storedSelections',storedSelections);
}}
Я использовал этот код для получения выделенного текста:
function ShowStoredSelections () {
storedSelections.length=0;
var retrieved= localStorage.getItem('storedSelections');
storedSelections.push (retrieved);
var selection = window.getSelection ();
for (var i = 0; i < storedSelections.length; i++) {
selection.removeAllRanges ();
selection.addRange (storedSelections[i]);
if (selection.rangeCount > 0) {
var range = selection.getRangeAt(0);
var selectedText = range.toString();
var span = document.createElement("span");
span.id = "span_" + range.startOffset + "_" + range.endOffset ;
span.onclick = function() {
myOnclikFunction(selectedText);
};
span.setAttribute("class","uiWebviewHighlight");
span.style.backgroundColor = "red";
range.surroundContents(span);
selection.removeAllRanges();
selection.addRange(range);
}
}}
Я могу'добавить полученный текст вselection.addRange
, Что я делаю не так в этом?
Пожалуйста, дайте мне несколько идей или предложений для преодоления этой проблемы.
Заранее спасибо за любой ответ или ответ.