epub阅读器ios中的文本突出显示和添加注释功能答案

【问题标题】：Text Highlighting and add notes function in epub reader iosepub阅读器ios中的文本突出显示和添加注释功能
【发布时间】：2013-03-12 03:36:29
【问题描述】：

我正在为 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。我在这做错了什么？

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

提前感谢您的任何回复或回答。

【问题讨论】：

hi 可以有关于上述问题的任何解决方案，因为我也面临同样的问题，请帮助我
我使用this code 完成了文本高亮显示，然后'NSString* html=[webview stringByEvaluatingJavaScriptFromString:@"document.documentElement.outerHTML"]; NSString *currentURL = webview.request.URL.absoluteString;[html writeToFile:currentURL atomically:YES encoding:NSUTF8StringEncoding error:&error];'我不知道我的做法是否正确。但它的作品。
嗨@Ashini 我参考了我没有得到任何代码的链接，如果可能的话，你能发送代码吗，请帮助我。我花了很多时间，但我没有任何答案
谢谢，邮箱：dineshprasanna1987@gmail.com
Ashini 你是在 android 上做的吗？

标签： javascript ios epub

【解决方案1】：

我已经为 androd 和 iOS 的本地 epub 播放器实现了所有这些 - 它是一个组织的产品研发

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

-> 将 URL 提供给 UIWebView (iOS) 或 WebView (android)

-> 在 webview didload 的回调中 - 将所有文本单词包装到具有唯一 ID 的 span

-> 将触摸事件传播到 webview - javascript 将使用 function onTouchMove(e) 处理这些触摸

-> 使用document.elementFromPoint 获取触摸跨度

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

-> 将便签视图添加到 webview 的超级视图

注意：最好在运行时将 jQuery 注入 webview 以将单词包装到 span 中

【讨论】：