如何向 Android Webview 菜单添加高亮选项?
How to add highlight option to Android Webview menu?
我正在从文本字符串加载 Webview,如下所示:
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(), Base64.NO_PADDING);
webview.loadData(encodedHtml, "text/html", "base64");
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
我想在 Menu 中添加颜色 Highlight 选项,当用户长按一个词时。我在 Whosebug 上搜索了许多其他类似的问题但没有成功。非常感谢您对 一些示例代码 的帮助。提前致谢!
更新:
我正在使用这个脚本来突出显示:
public static String HighlightScript = "<script language=\"javascript\">" +
"function highlightSelection(){" +
"var userSelection = window.getSelection();" +
"for(var i = 0; i < userSelection.rangeCount; i++)"
+ " highlightRange(userSelection.getRangeAt(i));" +
"}" +
"function highlightRange(range){"+
"span = document.createElement(\"span\");"+
"span.appendChild(range.extractContents());"+
"span.setAttribute(\"style\",\"display:inline;background:#ffc570;\");"+
"range.insertNode(span);}"+
"</script> ";
基于此Calculate Position of selected text javascript/JQuery?调用WebView的evulatejavascript获取开始结束值
objWebView.evaluateJavascript("(function(){var start = 0, end = 0;\n" +
" var sel, range, priorRange;\n" +
" if (typeof window.getSelection != \"undefined\") {\n" +
" range = window.getSelection().getRangeAt(0);\n" +
" priorRange = range.cloneRange();\n" +
" priorRange.selectNodeContents(document.body);\n" +
" priorRange.setEnd(range.startContainer, range.startOffset);\n" +
" start = priorRange.toString().length;\n" +
" end = start + range.toString().length;\n" +
" } else if (typeof document.selection != \"undefined\" &&\n" +
" (sel = document.selection).type != \"Control\") {\n" +
" range = sel.createRange();\n" +
" priorRange = document.body.createTextRange();\n" +
" priorRange.moveToElementText(document.body);\n" +
" priorRange.setEndPoint(\"EndToStart\", range);\n" +
" start = priorRange.text.length;\n" +
" end = start + range.text.length;\n" +
" }\n" +
" console.log(\"Selection starts at: \" + start);\n" +
" console.log(\"Selection ends at: \" + end);\n" +
" return {\n" +
" start: start,\n" +
" end: end\n" +
" };})()",
new ValueCallback<String>()
{
@Override
public void onReceiveValue(String value)
{
Log.v(TAG, "Webview selected text: " + value);
}
});
在数据库中保存范围值后。调用相同的方法来突出显示(仅在 WebView 完成页面加载后有效
objWebView.loadDataWithBaseURL(null, yourstringobject, "text/html; charset=UTF-8", "UTF-8",
null);
objWebView.post(new Runnable() {
@Override
public void run() {
//here you can have logic to fetch the data from database and loop to update
objWebView.evaluateJavascript("javascript:selectAndHighlightRange('Amod', 250, 274)", null);
}
});
我正在从文本字符串加载 Webview,如下所示:
String encodedHtml = Base64.encodeToString(unencodedHtml.getBytes(), Base64.NO_PADDING);
webview.loadData(encodedHtml, "text/html", "base64");
WebSettings webSettings = webview.getSettings();
webSettings.setJavaScriptEnabled(true);
我想在 Menu 中添加颜色 Highlight 选项,当用户长按一个词时。我在 Whosebug 上搜索了许多其他类似的问题但没有成功。非常感谢您对 一些示例代码 的帮助。提前致谢!
更新: 我正在使用这个脚本来突出显示:
public static String HighlightScript = "<script language=\"javascript\">" +
"function highlightSelection(){" +
"var userSelection = window.getSelection();" +
"for(var i = 0; i < userSelection.rangeCount; i++)"
+ " highlightRange(userSelection.getRangeAt(i));" +
"}" +
"function highlightRange(range){"+
"span = document.createElement(\"span\");"+
"span.appendChild(range.extractContents());"+
"span.setAttribute(\"style\",\"display:inline;background:#ffc570;\");"+
"range.insertNode(span);}"+
"</script> ";
基于此Calculate Position of selected text javascript/JQuery?调用WebView的evulatejavascript获取开始结束值
objWebView.evaluateJavascript("(function(){var start = 0, end = 0;\n" +
" var sel, range, priorRange;\n" +
" if (typeof window.getSelection != \"undefined\") {\n" +
" range = window.getSelection().getRangeAt(0);\n" +
" priorRange = range.cloneRange();\n" +
" priorRange.selectNodeContents(document.body);\n" +
" priorRange.setEnd(range.startContainer, range.startOffset);\n" +
" start = priorRange.toString().length;\n" +
" end = start + range.toString().length;\n" +
" } else if (typeof document.selection != \"undefined\" &&\n" +
" (sel = document.selection).type != \"Control\") {\n" +
" range = sel.createRange();\n" +
" priorRange = document.body.createTextRange();\n" +
" priorRange.moveToElementText(document.body);\n" +
" priorRange.setEndPoint(\"EndToStart\", range);\n" +
" start = priorRange.text.length;\n" +
" end = start + range.text.length;\n" +
" }\n" +
" console.log(\"Selection starts at: \" + start);\n" +
" console.log(\"Selection ends at: \" + end);\n" +
" return {\n" +
" start: start,\n" +
" end: end\n" +
" };})()",
new ValueCallback<String>()
{
@Override
public void onReceiveValue(String value)
{
Log.v(TAG, "Webview selected text: " + value);
}
});
在数据库中保存范围值后。调用相同的方法来突出显示(仅在 WebView 完成页面加载后有效
objWebView.loadDataWithBaseURL(null, yourstringobject, "text/html; charset=UTF-8", "UTF-8",
null);
objWebView.post(new Runnable() {
@Override
public void run() {
//here you can have logic to fetch the data from database and loop to update
objWebView.evaluateJavascript("javascript:selectAndHighlightRange('Amod', 250, 274)", null);
}
});