How to Create HTML Editor in Java

Introduction

This article explains how to create an HTML editor in Java using swing components. This application is GUI based in which we can write HTML code.

How to use HTML tags in Swing Components

In general, many Swing components display a text string as part of their GUI. By default, a component's text is displayed in a single font and color, all on one line. So we can embed multiple HTML tags within strings.

If we need to write multiple lines without using Java, in other words, if we prefer HTML tags to, for example, set font graphics then it is easy to do and maintain. The following code shows how to add multiple properties to a button in a single line of code.

btton = new JButton("<html><b><u>T</u>w<i>o</i></b></html>");

They print the character "T" in bold and underline format, "w" in bold format and "o" in bold and italic format.

How to create an HTML Editor in Java

For the proper understanding of how to use HTML tags in Swing components of Java we create this app. In this app, we need to use several steps to design it.

Step 1

Import some Swing and AWT packages as in the following:

import java.awt.event.*;
import javax.swing.*;
import java.awt.*;

Step 2

Now create a class that extends JPanel and implements ActionListener. JPanel displays HTML Components and ActionListener generates events when a button is clicked. Create objects of JLabel and JTextArea; JTextArea is used to write HTML tags and JLabel is used to set the dimensions.

public class SwingHTMLEditor extends JPanel implements ActionListener
{
JTextArea txtArea;
JLabel labl;

Step 3

Now create a constructor to initialize the components of Swing and HTML.

public SwingHTMLEditor() {
String htmlText = "<html>\n" +
"Create table with using different font styles and colors:\n" +
"<h1>C-#corner.com</h1>\n" +
"<table border=3 margin=3>\n" +
"<tr>\n" +
"<td><font color=red>1</font></td>\n" +
"<td><font color=blue>2</font></td>\n" +
"<td><font color=green>3</font></td>\n" +
"</tr>\n" +
"<tr>\n" +
"<td><font size=-2>4</font></td>\n" +
"<td><font size=+2>5</font></td>\n" +
"<td><i>6</i></td>\n" +
"</tr>\n" +
"<tr>\n" +
"<td><b>7</b></td>\n" +
"<td>8</td>\n" +
"<td>9</td>\n" +
"</tr>\n" +
"</table>";
txtArea = new JTextArea(20, 22);
setLayout(new BoxLayout(this, BoxLayout.LINE_AXIS));
txtArea.setText(htmlText);
JScrollPane scrllPn = new JScrollPane(txtArea);
JButton lablChngOtpt = new JButton("Click to change");
lablChngOtpt.setMnemonic(KeyEvent.VK_C);
lablChngOtpt.setAlignmentX(Component.CENTER_ALIGNMENT);
lablChngOtpt.addActionListener(this);
labl = new JLabel(htmlText) {
public Dimension getMaximumSize() {
return new Dimension(250, 250);
}
public Dimension getPreferredSize() {
return new Dimension(250, 250);
}
public Dimension getMinimumSize() {
return new Dimension(250, 250);
}
};
labl.setHorizontalAlignment(SwingConstants.CENTER);
labl.setVerticalAlignment(SwingConstants.CENTER);
JPanel panlLeft = new JPanel();
panlLeft.setLayout(new BoxLayout(panlLeft, BoxLayout.PAGE_AXIS));
panlLeft.setBorder(BorderFactory.createCompoundBorder(
BorderFactory.createTitledBorder(
"Write your own HTML and click the button to see the changes"),
BorderFactory.createEmptyBorder(15, 15, 15, 15)));
panlLeft.add(scrllPn);
panlLeft.add(Box.createRigidArea(new Dimension(0, 11)));
panlLeft.add(lablChngOtpt);
JPanel panlRght = new JPanel();
panlRght.setLayout(new BoxLayout(panlRght, BoxLayout.PAGE_AXIS));
panlRght.setBorder(BorderFactory.createCompoundBorder(
BorderFactory.createTitledBorder("Swing label with HTML"),
BorderFactory.createEmptyBorder(15, 15, 15, 15)));
panlRght.add(labl);
setBorder(BorderFactory.createEmptyBorder(15, 15, 15, 15));
add(panlLeft);
add(Box.createRigidArea(new Dimension(11, 0)));
add(panlRght);
}

Step 4

Now create an actionPerformed event that works on our button "Click to change". The purpose of this listener is for when the user clicks on the button the output changes depending on the HTML tags; Changes are shown in the label area.

//Perform changes when user click on the button specified.
public void actionPerformed(ActionEvent e) {
labl.setText(txtArea.getText());
}

Step 5

Create a method showGUI() to generate a frame and add an initial component to it.

private static void showGUI() {
//Create and set up the window.
JFrame frm = new JFrame("SwingHTMLEditor");
frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//Add content to the window.
frm.add(new SwingHTMLEditor());
//Display the window.
frm.pack();
frm.setVisible(true);
}

Step 6

Now define the main method to execute our application.

public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
UIManager.put("swing.boldMetal", Boolean.FALSE);
showGUI();
}
});
}

Complete Code

SwingHTMLEditor.java

import java.awt.event.*;
import javax.swing.*;
import java.awt.*;
public class SwingHTMLEditor extends JPanel
implements ActionListener {
JTextArea txtArea;
JLabel labl;
public SwingHTMLEditor() {
String htmlText = "<html>\n" +
"Create table with using different font styles and colors:\n" +
"<h1>C-#corner.com</h1>\n" +
"<table border=3 margin=3>\n" +
"<tr>\n" +
"<td><font color=red>1</font></td>\n" +
"<td><font color=blue>2</font></td>\n" +
"<td><font color=green>3</font></td>\n" +
"</tr>\n" +
"<tr>\n" +
"<td><font size=-2>4</font></td>\n" +
"<td><font size=+2>5</font></td>\n" +
"<td><i>6</i></td>\n" +
"</tr>\n" +
"<tr>\n" +
"<td><b>7</b></td>\n" +
"<td>8</td>\n" +
"<td>9</td>\n" +
"</tr>\n" +
"</table>";
txtArea = new JTextArea(20, 22);
setLayout(new BoxLayout(this, BoxLayout.LINE_AXIS));
txtArea.setText(htmlText);
JScrollPane scrllPn = new JScrollPane(txtArea);
JButton lablChngOtpt = new JButton("Click to change");
lablChngOtpt.setMnemonic(KeyEvent.VK_C);
lablChngOtpt.setAlignmentX(Component.CENTER_ALIGNMENT);
lablChngOtpt.addActionListener(this);
labl = new JLabel(htmlText) {
public Dimension getMaximumSize() {
return new Dimension(250, 250);
}
public Dimension getPreferredSize() {
return new Dimension(250, 250);
}
public Dimension getMinimumSize() {
return new Dimension(250, 250);
}
};
labl.setHorizontalAlignment(SwingConstants.CENTER);
labl.setVerticalAlignment(SwingConstants.CENTER);
JPanel panlLeft = new JPanel();
panlLeft.setLayout(new BoxLayout(panlLeft, BoxLayout.PAGE_AXIS));
panlLeft.setBorder(BorderFactory.createCompoundBorder(
BorderFactory.createTitledBorder(
"Write your own HTML and click the button to see the changes"),
BorderFactory.createEmptyBorder(15, 15, 15, 15)));
panlLeft.add(scrllPn);
panlLeft.add(Box.createRigidArea(new Dimension(0, 11)));
panlLeft.add(lablChngOtpt);
JPanel panlRght = new JPanel();
panlRght.setLayout(new BoxLayout(panlRght, BoxLayout.PAGE_AXIS));
panlRght.setBorder(BorderFactory.createCompoundBorder(
BorderFactory.createTitledBorder("Swing label with HTML"),
BorderFactory.createEmptyBorder(15, 15, 15, 15)));
panlRght.add(labl);
setBorder(BorderFactory.createEmptyBorder(15, 15, 15, 15));
add(panlLeft);
add(Box.createRigidArea(new Dimension(11, 0)));
add(panlRght);
}
//Perform changes when user click on the button specified.
public void actionPerformed(ActionEvent e) {
labl.setText(txtArea.getText());
}
private static void showGUI() {
//Create and set up the window.
JFrame frm = new JFrame("SwingHTMLEditor");
frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//Add content to the window.
frm.add(new SwingHTMLEditor());
//Display the window.
frm.pack();
frm.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
UIManager.put("swing.boldMetal", Boolean.FALSE);
showGUI();
}
});
}
}

Output

Now compile the program on the console.

Now press enter to see the output.

Now change the HTML coding.

<html>
<form>
First Name: <input type="text" name="fname">
Last Name: <input type="text" name="lname">
Create Password: <input type="password" name="pass">
Confirm Password: <input type="password" name="pass">
<input type="submit" value="submit">
<input type="reset" value="reset">

Now click on the "Click to change" button. The output changes depending on the HTML as shown below.

Note

It is just a sample editor. It doesn't support all components of HTML like HTML5 components, image uploaded, etcetera.

Thanks for reading