Java

How to Create HTML Editor in Java

Introduction

This article explains how to create a 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 withut using Java, in otehr 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 a HTML Editor in Java.

For 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 a 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.

fig-1.jpg

Now press enter to see the output.

fig-2.jpg

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.

Fig-3.jpg

Note

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

Thanks for reading

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs