Question

我正在为ios和android开发epub阅读器。我想实现文本高亮，并为我的epub阅读器添加注释功能。我想知道如何为固定布局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。我在这做错了什么？

请给我一些想法或建议来克服这个问题。

提前感谢您的回复或回复。

Answer 1

我已经为androd和iOS的本地epub播放器实现了所有这些 - 它是一个组织的产品R＆amp; D.

而不是使用getSelection，请按照以下步骤操作。它乏味但功能完全在您的控制之下

- ＆GT;将URL提供给UIWebView（iOS）或WebView（android）

- ＆GT;在webview的回调中执行 - 将所有文本单词包装成具有唯一ID的跨度

- ＆GT;将触摸事件传播到webview-javascript将使用function onTouchMove(e) 来处理这些触摸 - ＆GT;使用document.elementFromPoint获得触及范围。

- ＆GT;突出那些跨度（单词） - ＆GT;您将获得每个范围 $('#wordID-'+sWordID).position()的位置，您可以将这些值从javascript传递到本机代码

- ＆GT;将便签视图添加到webview的超级视图

注意：最好在运行时将jQuery注入到webview中，以便将单词包装成跨度

文本在epub阅读器ios中突出显示并添加注释功能

1 个答案: