文本在epub阅读器ios中突出显示并添加注释功能 [英] Text Highlighting and add notes function in epub reader ios
问题描述
我正在为ios和android开发epub阅读器。我想实现文本高亮,并为我的epub阅读器添加注释功能。我想知道如何为固定布局epub使用这些功能。我可以通过 javascript:window.getSelection()
获取所选对象。我想保存并检索这些对象以备将来使用。这里我用来突出显示和保存文本的代码:
I am developing epub reader for ios and android. I want to implement text highlights and add note function to my epub reader. And I want to know how to these functionality for fixed layout epub. I can get selected object by javascript:window.getSelection()
. I want to save and retrieve these objects for future use. Here the code I used for highlighting and saving text:
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);
}}
我使用此代码检索突出显示的文字:
I used this code for retrieve highlighted text:
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
。我在这方面做错了什么?
I can't add retrieved text to selection.addRange
. What am I doing wrong in this?
请给我一些想法或建议来解决这个问题。
Please give me some ideas or suggestions to overcome this problem.
提前感谢您的回复或回复。
Thanks in advance for any reply or answer.
推荐答案
我已经为androd的本地epub播放器实现了所有这些iOS-它是组织的产品R& D
I have implemented all these for native epub player of androd and iOS- its a product R&D for an organisation
而不是使用getSelection,请按照以下步骤操作。它很乏味但功能完全不足你的控件
Instead of using getSelection follow the below steps.Its tedious but functionality would be fully under your control
- >在webview didload的回调中给url到UIWebView(iOS)或WebView(android)
- >将所有文本单词包装成具有唯一ID的跨度
- >将触摸事件传播到webview- javascript将使用函数onTouchMove(e)处理这些触摸
- >使用 document.elementFromPoint
- >突出显示那些跨度(单词) )
- >您将获得每个范围的位置 $('#wordID - '+ sWordID).pos ition()
,您可以将这些值从javascript传递到本机代码
- >将便签视图添加到webview的超级视图
-> Give url to UIWebView (iOS) or WebView (android)
-> in call back of webview didload - wrap all text words into spans with unique ids
-> propagate touch events to webview- javascript will handle those touches using function onTouchMove(e)
-> get touched span using document.elementFromPoint
-> highlight those spans (words)
-> You will get position of each span $('#wordID-'+sWordID).position()
,you can pass those values from javascript to native code
-> Add sticky notes view to the super view of webview
注意:最好在运行时将jQuery注入webview,将单词包装成跨度
Note: better inject jQuery in run time into webview for wrapping words into spans
这篇关于文本在epub阅读器ios中突出显示并添加注释功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!