Eksempel på JavaFX HTML Editor
Dette er et eksempel på JavaFX HTMLEditor. HTMLEditor
kontrol giver mulighed for rig tekstredigering til JavaFX-applikationen. Den bruger HTML som sin datamodel. Det vil sige den formaterede tekst i HTMLEditor
er gemt i HTML-format.
Følgende tabel viser en oversigt over hele artiklen:
Indholdsfortegnelse
- 1. Oprettelse af en HTML Editor
- 1.1 Koden
- 1.2 GUI'en
- 2. Styling af HTMLEditor med CSS
- 2.1 Kodekset
- 2.2 Stylearket
- 2.3 GUI
- 3. Indstilling af en indledende tekst til HTMLEditor
- 3.1 Kodekset
- 3.2 GUI
- 4. Brug af HTML-editoren
- 4.1 Kodekset
- 4.2 GUI
- 5. Download Java-kildekode
Følgende eksempler bruger Java SE 8 og JavaFX 2.2.
1. Oprettelse af en HTML-editor
1.1 Koden
FxHtmlEditorExample1.java
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.web.HTMLEditor; import javafx.stage.Stage; public class FxHtmlEditorExample1 extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { // Create the HTMLEditor HTMLEditor htmlEditor = new HTMLEditor(); // Set the Height of the HTMLEditor htmlEditor.setPrefHeight(300); // Set the Width of the HTMLEditor htmlEditor.setPrefWidth(600); // Create the Scene Scene scene = new Scene(htmlEditor); // Add the Scene to the Stage stage.setScene(scene); // Set the Title of the Stage stage.setTitle("A simple HTMLEditor Example"); // Display the Stage stage.show(); } }
En HTMLEditor
viser formateringsværktøjslinjer med det. Du kan ikke skjule værktøjslinjerne. De kan styles ved hjælp af en CSS. Ved at bruge værktøjslinjerne kan du:
- Kopiér, klip og indsæt tekst ved hjælp af systemets udklipsholder
- Anvend tekstjustering
- Indrykningstekst
- Anvend punktopstilling og nummererede listestile
- Indstil forgrunds- og baggrundsfarver
- Anvend afsnits- og overskriftstypografier med skrifttypefamilie og skriftstørrelse
- Anvend formateringsstile såsom fed, kursiv, understreget og gennemstreget
- Tilføj vandrette linealer
Styringen understøtter HTML5. Bemærk, at værktøjslinjerne ikke tillader dig at anvende alle slags HTML. Men hvis du indlæser et dokument, der bruger disse typografier, giver det dig mulighed for at redigere dem.
For eksempel kan du ikke oprette en HTML-tabel direkte i kontrolelementet. Men hvis du indlæser HTML-indhold med HTML-tabeller i kontrolelementet, vil du være i stand til at redigere dataene i tabellerne.
HTMLEditor
leverer ikke API til at indlæse HTML-indhold fra en fil for at gemme dens indhold til en fil. Du bliver nødt til at skrive din egen kode for at opnå dette.
En forekomst af HTMLEditor
klasse repræsenterer en HTMLEditor
styring. Klassen er inkluderet i javafx.scene.web
pakke. Brug standardkonstruktøren, som er den eneste tilvejebragte konstruktør, til at oprette HTMLEditor
:
// Create the HTMLEditor HTMLEditor htmlEditor = new HTMLEditor(); // Set the Height of the HTMLEditor htmlEditor.setPrefHeight(300); // Set the Width of the HTMLEditor htmlEditor.setPrefWidth(600);
1.2 GUI
Det følgende billede viser et meget simpelt eksempel på en HTMLEditor
:
Et simpelt eksempel på JavaFX HTML Editor
2. Style HTML Editor med CSS
2.1 Koden
FxHtmlEditorExample2.java
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.web.HTMLEditor; import javafx.stage.Stage; public class FxHtmlEditorExample2 extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { // Create the HTMLEditor HTMLEditor htmlEditor = new HTMLEditor(); // Set the Height of the HTMLEditor htmlEditor.setPrefHeight(300); // Set the Width of the HTMLEditor htmlEditor.setPrefWidth(600); // Create the Scene Scene scene = new Scene(htmlEditor); // Add the Scene to the Stage stage.setScene(scene); // Add the Stylesheet to the Scene scene.getStylesheets().add(getClass().getResource("htmleditor.css").toExternalForm()); // Set the Title of the Stage stage.setTitle("A HTMLEditor Example with a Stylesheet"); // Display the Stage stage.show(); } }
2.2 Stylearket
htmleditor.css
/* Set the background colors for all buttons and toggle buttons */ .html-editor { -fx-font: 12 cambria; -fx-border-color: blue; -fx-border-style: solid; -fx-border-width: 2; } .html-editor .button, .html-editor .toggle-button { -fx-background-color: lightblue; } .html-editor-background { -fx-color-label-visible: true; } .html-editor-foreground { -fx-color-label-visible: true; }
Standardnavnet for CSS-stilklassen for en HTMLEditor
er html-editor
. HTMLEditor
bruger stilarter af en kontrol såsom polstring, kanter og baggrundsfarve.
Du kan style hver knap på værktøjslinjen separat. Følgende er listen over stilklassenavne til værktøjslinjeknapperne. Navnene er selvforklarende, for eksempel html-editor-align-right
og html-editor-hr
er stilklassenavnene for knapperne på værktøjslinjen, der bruges til henholdsvis at højrejustere tekst og tegne en vandret lineal.
- html-editor-cut
- html-editor-copy
- html-editor-paste
- html-editor-align-left
- html-editor-align-center
- html-editor-align-right
- html-editor-align-justify
- html-editor-outdent
- html-editor-indent
- html-editor-bullets
- html-editor-numre
- html-editor-bold
- html-editor-italic
- html-editor-underline
- html-editor-strike
- html-editor-hr
Brug knap- og til/fra-knappens stilklassenavne, hvis du vil anvende typografier på alle værktøjslinjeknapper og til/fra-knapper:
.html-editor .button, .html-editor .toggle-button { -fx-background-color: lightblue; }
HTMLEditor
viser to ColorPickers, så brugerne kan vælge baggrunds- og forgrundsfarver.
Deres stilklassenavne er html-editor-background
og html-editor-foreground
. Følgende kode viser de valgte farveetiketter i ColorPickers:
.html-editor-background { -fx-color-label-visible: true; } .html-editor-foreground { -fx-color-label-visible: true; }
2.3 GUI
Følgende billede viser effekten af at bruge et typografiark i en HTMLEditor
:
Et eksempel på et JavaFX HTML Editor med et StyleSheet
3. Indstilling af en indledende tekst til HTML-editoren
3.1 Koden
FxHtmlEditorExample3.java
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.web.HTMLEditor; import javafx.stage.Stage; public class FxHtmlEditorExample3 extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { // Create the HTMLEditor HTMLEditor htmlEditor = new HTMLEditor(); // Set the Height of the HTMLEditor htmlEditor.setPrefHeight(300); // Set the Width of the HTMLEditor htmlEditor.setPrefWidth(600); // Set the Initial Text String INITIAL_TEXT = "An HTMLEditor displays formatting toolbars with it. " + "Using the toolbars, you can: </br></br>" + "<ul><li>Copy, cut, and paste text using the system clipboard</li>" + "<li>Apply text alignment</li>" + "<li>Indent text</li>" + "<li>Apply bulleted list and numbered list styles</li>" + "<li>Set foreground and background colors</li>" + "<li>Apply paragraph and heading styles with font family and font size</li>" + "<li>Apply formatting styles such as bold, italic, underline, and strikethrough</li>" + "<li>Add horizontal rulers</li></ul>"; htmlEditor.setHtmlText(INITIAL_TEXT); // Create the Scene Scene scene = new Scene(htmlEditor); // Add the Scene to the Stage stage.setScene(scene); // Add the Stylesheet to the Scene scene.getStylesheets().add(getClass().getResource("htmleditor.css").toExternalForm()); // Set the Title of the Stage stage.setTitle("A HTMLEditor Example with an Initial Text"); // Display the Stage stage.show(); } }
HTMLEditor
klasse har en meget simpel API, der kun består af tre metoder:
- getHtmlText()
- setHtmlText(String htmlText)
- print(printerjob)
getHTMLText()
metoden returnerer HTML-indholdet som en streng. setHTMLText()
metode indstiller indholdet af kontrolelementet til den angivne HTML-streng. print()
metode udskriver indholdet af kontrollen.
Følgende kodestykke viser brugen af setHTMLText()
metode:
// Set the Initial Text String INITIAL_TEXT = "An HTMLEditor displays formatting toolbars with it. " + "Using the toolbars, you can: </br></br>" + "<ul><li>Copy, cut, and paste text using the system clipboard</li>" + "<li>Apply text alignment</li>" + "<li>Indent text</li>" + "<li>Apply bulleted list and numbered list styles</li>" + "<li>Set foreground and background colors</li>" + "<li>Apply paragraph and heading styles with font family and font size</li>" + "<li>Apply formatting styles such as bold, italic, underline, and strikethrough</li>" + "<li>Add horizontal rulers</li></ul>"; htmlEditor.setHtmlText(INITIAL_TEXT);
3.2 GUI
Følgende GUI viser en HTMLEditor
med et givet indhold:
Et eksempel på et JavaFX HTML-editor med en indledende tekst
4. Brug af HTML-editoren
4.1 Koden
FxHtmlEditorExample4.java
import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import javafx.scene.web.HTMLEditor; import javafx.stage.Stage; public class FxHtmlEditorExample4 extends Application { public static void main(String[] args) { Application.launch(args); } @Override public void start(Stage stage) { // Create the HTMLEditor final HTMLEditor htmlEditor = new HTMLEditor(); // Set the Height of the HTMLEditor htmlEditor.setPrefHeight(300); // Set the Width of the HTMLEditor htmlEditor.setPrefWidth(600); // Set the Initial Text htmlEditor.setHtmlText(""); // Create the TextArea final TextArea textArea = new TextArea(); // Set the Size of the TextArea textArea.setPrefSize(600, 300); // Set the Style of the TextArea textArea.setStyle("-fx-font-size:10pt; -fx-font-family: \"Courier New\";"); // Create the Buttons Button htmlToText = new Button("Convert HTML to Text"); Button textToHtml = new Button("Convert Text to HTML"); // Define the Actions for the Buttons htmlToText.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent arg0) { htmlEditor.setHtmlText(textArea.getText()); } }); textToHtml.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent arg0) { textArea.setText(htmlEditor.getHtmlText()); } }); // Create the HBox for the Buttons HBox buttons = new HBox(htmlToText, textToHtml); // Set Spacing to the HBox buttons.setSpacing(10); // Create the VBox VBox root = new VBox(); // Set the Padding of the VBox root.setPadding(new Insets(8, 8, 8, 8)); // Set Spacing to 5 px root.setSpacing(5); // Set the Position of the VBox root.setAlignment(Pos.BOTTOM_LEFT); // Set the Style-properties of the VBox root.setStyle("-fx-padding: 10;" + "-fx-border-style: solid inside;" + "-fx-border-width: 2;" + "-fx-border-insets: 5;" + "-fx-border-radius: 5;" + "-fx-border-color: blue;"); // Add the Children to The VBox root.getChildren().addAll(htmlEditor, buttons, textArea); // Create the Scene Scene scene = new Scene(root); // Add the Stylesheet to the Scene scene.getStylesheets().add(getClass().getResource("htmleditor.css").toExternalForm()); // Add the Scene to the Stage stage.setScene(scene); // Set the Width and Heigth of the Stage stage.setWidth(500); stage.setHeight(500); // Set the Title of the Stage stage.setTitle("A HTMLEditor Converter Example"); // Display the Stage stage.show(); } }
Ovenstående program viser, hvordan du bruger getHtmlText()
og setHtmlText(String htmlText)
metode til en HTMLEditor
.
Den viser en HTMLEditor
, et TextArea og to knapper. Du kan bruge knapperne til at konvertere tekst i HTMLEditor
til HTML-kode og omvendt.
Følgende kodestykke viser EventHandler, som konverterer almindelig tekst til HTML-kode:
// Define the Actions for the Buttons htmlToText.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent arg0) { htmlEditor.setHtmlText(textArea.getText()); } });
Følgende kodestykke viser EventHandler
, som konverterer HTML-koden til almindelig tekst:
textToHtml.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent arg0) { textArea.setText(htmlEditor.getHtmlText()); } });
4.2 GUI
Følgende billede viser resultatet af samtalen fra tekst til HTML:
Konvertering af tekst til HTML i en JavaFX HTML Editor
Følgende billede viser resultatet af samtalen fra HTML til tekst:
Konvertering af HTML til tekst i en JavaFX HTML Editor
5. Download Java-kildekode
Dette var et eksempel på javafx.scene.web.HTMLEditor
HTML Editor JavaFX