Java >> Java tutorial >  >> Java

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

Java tag