How to Create Text Editor using HTML CSS and JavaScript?

Last Updated : 08 Nov, 2024

The style property in JavaScript is used to create a text editor with HTML and CSS. This editor features buttons for text formatting, including options for bold, italic, left, center, and right alignment, as well as uppercase, lowercase, and capitalized transformations.

Each button triggers a function that updates the textarea content based on the selected style, providing an interactive way to format text directly within the editor.

Creating a Text Editor using HTML, CSS, and JavaScript

Create a structure using <textarea> for text input and buttons for formatting actions (like bold, italic, etc.).
Style the text editor and buttons to make it visually appealing with colors, borders, and spacing.
Add buttons that, when clicked, trigger specific JavaScript functions to apply formatting like bold, italics, text alignment, or case transformation.
Each function manipulates the text inside the <textarea> by changing its style (e.g. fontWeight for bold, textAlign for alignment).
The user can clear or change the text's appearance instantly by interacting with these buttons.

Example: Building a basic text editor with HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Text Editor</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css">
</head>

<body>
    <section>
        <h1>TEXT EDITOR</h1>
        <div class="button-container">
            <button onclick="editoroption1()" title="Bold Text">
                Bold
            </button>
            <button onclick="editoroption2()" title="Italic Text">
                Italic
            </button>
            <button onclick="editoroption3()" title="Left Align">
                <i class="fas fa-align-left"></i>
            </button>
            <button onclick="editoroption4()" title="Center Align">
                <i class="fas fa-align-center"></i>
            </button>
            <button onclick="editoroption5()" title="Right Align">
                <i class="fas fa-align-right"></i>
            </button>
            <button onclick="editoroption6()" title="Uppercase Text">
                Upper Case
            </button>
            <button onclick="editoroption7()" title="Lowercase Text">
                Lower Case
            </button>
            <button onclick="editoroption8()" title="Capitalize Text">
                Capitalize
            </button>
            <button onclick="editoroption9()" title="Clear Text">
                Clear Text
            </button>
        </div>
        <textarea id="textarea1" rows="15" placeholder="Your text here...">
        </textarea>
    </section>
    <script src="script.js"></script>
</body>

</html>

CSS

/* styles.css */
body {
    font-family: 'Arial', sans-serif;
    background-color: #f3f4f6;
    color: #333;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
    color: #4A4A4A;
}

.section {
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.button-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

button {
    margin: 5px;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #45a049;
}

textarea {
    width: 100%;
    border: 1px solid #4CAF50;
    border-radius: 5px;
    padding: 10px;
    resize: none;
    font-size: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}