javascript - epub阅读器ios中的文本突出显示和添加注释功能
<p><p>我正在为 ios 和 android 开发 epub 阅读器。我想实现文本突出显示并向我的 epub 阅读器添加注释功能。我想知道如何将这些功能用于固定布局 epub。我可以通过 <code>javascript:window.getSelection()</code> 获取选定对象。我想保存和检索这些对象以供将来使用。这里是我用于突出显示和保存文本的代码:</p>
<pre><code>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);
}}
</code></pre>
<p>我使用此代码检索突出显示的文本:</p>
<pre><code>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);
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);
}
}}
</code></pre>
<p>我无法将检索到的文本添加到 <code>selection.addRange</code>。我在这做错了什么？</p>
<p>请给我一些想法或建议来解决这个问题。</p>
<p>提前感谢您的任何回复或回答。</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>
我已经为 androd 和 iOS 的本地 epub 播放器实现了所有这些 - 它是一个组织的产品研发
<br/></p>
<p>不要使用 getSelection，请按照以下步骤操作。它的繁琐但功能将完全在您的控制之下</p>
<p>-> 将 url 提供给 UIWebView (iOS) 或 WebView (android) <br/><br/>
-> 在 webview didload 的回调中 - 将所有文本单词包装成具有唯一 id 的 span <br/><br/>
-> 将触摸事件传播到 webview - javascript 将使用 <code>function onTouchMove(e) </code> <br/><br/> 处理这些触摸
-> 使用 <code>document.elementFromPoint</code> <br/><br/> 接触 span
-> 突出显示这些跨度(单词)
-> 你会得到每个 span <code> $('#wordID-'+sWordID).position()</code> 的位置，你可以将这些值从 javascript 传递到 native 代码 <br/><br/>
-> 将便签 View 添加到 webview 的 superView </p>
<p>注意:最好在运行时将 jQuery 注入(inject) webview 以将单词包装到 span 中</p>
<p></p></p>
<p style="font-size: 20px;">关于javascript - epub阅读器ios中的文本突出显示和添加注释功能，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/15352852/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/15352852/
</a>
</p>
页:
[1]