在 UIwebview 中突出显示并做笔记答案

【问题标题】：highlight and make note in UIwebview在 UIwebview 中突出显示并做笔记
【发布时间】：2011-06-24 08:31:12
【问题描述】：

我正在开发一个用于加载 epub 文件的 ipad/iphone 电子书应用程序。我想知道如何用背景颜色突出显示文本，并在 UIWebView 而不是 UIView 中做类似于 iBook 或 Kindle 的笔记。我可以通过长按来拖动选择文本。但我只能看到“复制”选项。我想在该菜单中添加突出显示并添加注释。如何使用背景颜色突出显示文本？...我的文档在 UIWebView 中加载。

谢谢。

【问题讨论】：

如果是的话，你得到答案了吗，那么也请帮助我。我使用搜索的 javascript 来突出显示并允许用户选择多行，以便它对于错误做法的章节变得独一无二。它有效，但有时无效。我有数据库来保存这些亮点并能够使用搜索 javascript 突出显示，但我希望允许用户像 ibook 中一样突出显示，即甚至可以突出显示单个单词。如果您有任何建议，也请帮助我。
我也有兴趣知道这个，我想在webview上添加自定义注释视图。

标签： objective-c xcode ios4 uiwebview epub

【解决方案1】：

您需要做的是将注释和突出显示选项添加到您的共享菜单中。在您的视图控制器 viewdidload 中（或添加视图后的任何时间）。下面将两个具有两种选择器方法的菜单项添加到您的菜单中。

UIMenuItem *customMenuItem1 = [[UIMenuItem alloc] initWithTitle:@"Highlight" action:@selector(doHighlight:)];
UIMenuItem *customMenuItem2 = [[UIMenuItem alloc] initWithTitle:@"Note" action:@selector(doNote:)];
//[myArray addObject:customMenuItem2];
NSMutableArray *myArray = [[NSMutableArray alloc]initWithObjects:customMenuItem1,customMenuItem2, nil ] ;   
[UIMenuController sharedMenuController].menuItems = myArray;

您可能还想使用一些 javascript 来确定包含您的选择的矩形，然后在文本上覆盖一个半透明的 uiview。

因此，在您的 doNote 方法中，加载 javascript 并运行它，请参阅下面的 javascript 示例，了解您可能想要执行的操作。

NSString *rectString = [webView stringByEvaluatingJavaScriptFromString:rectStringText];

以下内容将围绕文本获得一个矩形，尽管它本质上会比您的文本大：如果您在第 2 行的 char 10 到第 5 行的 char 50 突出显示，它将返回一个突出显示 char 0 的矩形第 2 行到第 5 行。

function selectEl(x,y){
document.designMode = "on";
var el = document.elementFromPoint(x, y);
var rect = el.getBoundingClientRect();
var vx = rect.left;
var width = rect.right - vx;

var height = rect.bottom - rect.top;
var vy = rect.top;

var range = document.createRange();
range.selectNodeContents(el);
var sel = document.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.designMode = "off";


rectString = '{{'+vx+','+vy+'},{'+width+','+height+'}}';
}

所以，既然你有一个矩形字符串，你可以从返回的字符串和 uiview 创建一个 CRect 以覆盖在你的 webview 中。 [注意，您必须弄清楚如何处理缩放和保存此数据以供下次加载]

【讨论】：