выделите и отметьте в UIwebview - PullRequest
Новая
       18

выделите и отметьте в UIwebview

1 голос
/ 09 февраля 2011

Я разрабатываю приложение для электронных книг для ipad / iphone, которое загружает файл epub. Я хотел бы знать, как выделить текст цветом фона и делать заметки, похожие на iBook или Kindle в UIWebView, а не в UIView. Я могу перетащить выделение текста долгим нажатием. Но я вижу только вариант «Копировать». Я хотел бы добавить выделение и добавить примечание к этому меню. Как выделить текст цветом фона? ... Мой документ загружен в UIWebView.

Спасибо.

1 Ответ

1 голос
/ 21 января 2013

Что вам нужно сделать, это добавить примечание и выделить параметры в вашем общем меню.В вашем viewcontroller 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 для определения прямоугольника, который содержит ваш выбор, а затем наложить полупрозрачный вид на текст.

Итак, в вашем методе doNote,загрузите javascript и запустите его, посмотрите приведенный ниже javascript для примера того, что вы можете захотеть сделать. 

NSString *rectString = [webView stringByEvaluatingJavaScriptFromString:rectStringText];

Следующее получит прямоугольник вокруг текста, хотя он по своей природе будет больше, чем ваш текст: если вы выделили на 10-м символе в строке 2 через 50-й строке в строке 5, он вернет прямоугольник, который выделяет символ 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+'}}';
}

Итак, теперь у вас естьпрямоугольную строку, вы можете создать CRect из возвращенной строки и uiview для наложения в вашем веб-просмотре.[Обратите внимание, вам придется выяснить, как справиться с масштабированием и сохранить эти данные для следующей загрузки]

...