JavaFx |搜索并突出显示文字|为已加载的网页添加搜索栏 [英] JavaFx | Search and Highlight text | Add Search Bar for loaded web page
问题描述
我使用了SimpleSwingBrowser示例（ http://docs.oracle。 com / javafx / 2 / swing / SimpleSwingBrowser.java.htm ），并添加了一些我自己的代码用于日志加载。
我想添加一个搜索酒吧的能力（搜索和突出显示文本）。
经过数小时的搜索和自我实验后，我没有找到办法做到这一点。
有人可以给我一个编写这种能力的开始方向。 解决方案
使用现有的JavaScript突出显示库，例如 jQuery突出显示或 hilitor.js 。
基于Java的解决方案建议
使用Java w3c DOM API在加载文档后对WebEngine文档对象执行操作。
在JavaFX WebView核心实现中获取搜索API
我创建了功能请求 RT-23383文本搜索支持的WebView 的。功能请求目前处于打开状态并且无法运行 - 您可以在问题跟踪器中创建一个帐户，并对该功能请求进行投票或评论。
示例
本示例使用jQuery高亮显示。用户在文本字段中键入要突出显示的单词，然后按高亮显示按钮突出显示该页面中单词的所有出现位置，或者删除突出显示按钮以清除所有标记的高光。您可以修改示例以允许更多基于jQuery的搜索滚动到下一个以前突出显示的单词。
我试图让它适用于任何任意网页，但那个逻辑打败了我。如果您控制要搜索的页面的源，并且可以将引用添加到jQuery突出显示插件，并将它的样式类添加到您的页面，则可以选择类似此示例程序。
import javafx.application.Application;
import javafx.event。*;
import javafx.scene.Scene;
import javafx.scene.control。*;
import javafx.scene.layout。*;
import javafx.scene.web。*;
import javafx.stage.Stage;
public class WebViewSearch extends Application {
public static void main（String [] args）{
launch（args）;
}
@Override
public void start（Stage primaryStage）{
final WebView webView = new WebView（）;
final WebEngine engine = webView.getEngine（）;
engine.load（http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html）;
final TextField searchField = new TextField（light）;
searchField.setPromptText（输入您想要突出显示的文本，然后按ENTER高亮显示）;
searchField.setOnAction（new EventHandler< ActionEvent>（）{
@Override
public void handle（ActionEvent actionEvent）{$ b $ if（engine.getDocument（）！= null）{
highlight（
engine，
searchField.getText（）
）;
}
}
}）;
最终按钮highlightButton = new Button（Highlight）;
highlightButton.setDefaultButton（true）;
highlightButton.setOnAction（new EventHandler< ActionEvent>（）{
@Override
public void handle（ActionEvent actionEvent）{
searchField.fireEvent（new ActionEvent（））;
}
}）;
最终按钮removeHighlightButton =新按钮（删除突出显示）;
removeHighlightButton.setOnAction（new EventHandler< ActionEvent>（）{
@Override
public void handle（ActionEvent actionEvent）{
removeHighlight（
engine
） ;
}
}）;
removeHighlightButton.setCancelButton（true）;
HBox controls = new HBox（10）;
controls.getChildren（）。setAll（
highlightButton，
removeHighlightButton
）;
VBox layout = new VBox（10）;
layout.getChildren（）。setAll（searchField，controls，webView）;
searchField.setMinHeight（Control.USE_PREF_SIZE）;
controls.setMinHeight（Control.USE_PREF_SIZE）;
controls.disableProperty（）。bind（webView.getEngine（）。getLoadWorker（）。runningProperty（））;
searchField.disableProperty（）。bind（webView.getEngine（）。getLoadWorker（）。runningProperty（））;
primaryStage.setScene（new Scene（layout））;
primaryStage.show（）;
webView.requestFocus（）;
private void highlight（WebEngine engine，String text）{
engine.executeScript（$（'body'）。removeHighlight（）。highlight（'+ text +'））;
}
private void removeHighlight（WebEngine engine）{
engine.executeScript（$（'body'）。removeHighlight（））;
}
}
I used the SimpleSwingBrowser example (http://docs.oracle.com/javafx/2/swing/SimpleSwingBrowser.java.htm) and added some code of my own for log tailing.
I wanted to add a search bar ability to it (Search and Highlight text).
After googling for hours and self experiments, I didn't find a way to do it. Can someone give me a kick-off direction for writing such ability.
Suggestions for a JavaScript based solution
Use an existing JavaScript highlighting library such as jQuery highlight or hilitor.js.
Suggestions for a Java based solution
Use the Java w3c DOM API to perform operations on the WebEngine document object after the document has been loaded.
To get a Search API in the JavaFX WebView core implementation
I created feature request RT-23383 Text search support for WebView. The feature request is currently open and unactioned - you can create an account in the issue tracker and vote for or comment on the feature request.
Sample
This sample uses jQuery highlight. The user types the word to be highlighted into the text field, then presses the highlight button to highlight all occurrences of the word in the page or to remove highlight button to clear all marked highlights. You could modify the sample to allow further jQuery based searches to scroll to a next and previously highlighted word.
I tried to get it to work with any arbitrary web page, but that logic defeated me. If you control the source of the page you want to search and can add the reference to the jQuery highlight plugin and it's style class to your page, something like this sample program might be an option.
import javafx.application.Application;
import javafx.event.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.web.*;
import javafx.stage.Stage;
public class WebViewSearch extends Application {
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage primaryStage) {
final WebView webView = new WebView();
final WebEngine engine = webView.getEngine();
engine.load("http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html");
final TextField searchField = new TextField("light");
searchField.setPromptText("Enter the text you would like to highlight and press ENTER to highlight");
searchField.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent actionEvent) {
if (engine.getDocument() != null) {
highlight(
engine,
searchField.getText()
);
}
}
});
final Button highlightButton = new Button("Highlight");
highlightButton.setDefaultButton(true);
highlightButton.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent actionEvent) {
searchField.fireEvent(new ActionEvent());
}
});
final Button removeHighlightButton = new Button("Remove Highlight");
removeHighlightButton.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent actionEvent) {
removeHighlight(
engine
);
}
});
removeHighlightButton.setCancelButton(true);
HBox controls = new HBox(10);
controls.getChildren().setAll(
highlightButton,
removeHighlightButton
);
VBox layout = new VBox(10);
layout.getChildren().setAll(searchField, controls, webView);
searchField.setMinHeight(Control.USE_PREF_SIZE);
controls.setMinHeight(Control.USE_PREF_SIZE);
controls.disableProperty().bind(webView.getEngine().getLoadWorker().runningProperty());
searchField.disableProperty().bind(webView.getEngine().getLoadWorker().runningProperty());
primaryStage.setScene(new Scene(layout));
primaryStage.show();
webView.requestFocus();
}
private void highlight(WebEngine engine, String text) {
engine.executeScript("$('body').removeHighlight().highlight('" + text + "')");
}
private void removeHighlight(WebEngine engine) {
engine.executeScript("$('body').removeHighlight()");
}
}
这篇关于JavaFx |搜索并突出显示文字|为已加载的网页添加搜索栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
