How to Build a Text Editor with HTML, CSS and JavaScript

Published on June 15, 2024

Hello everyone and welcome back to our channel! Today, we have an exciting tutorial for you where we’ll be learning how to create a simple text editor using HTML, CSS, and JavaScript. Whether you’re a beginner or an experienced developer, this tutorial will help you understand the fundamentals of building interactive web applications.

Let’s dive straight into the code! Here we have our HTML structure. We start with the <!DOCTYPE html> declaration, which specifies the document type and version of HTML we’re using.

In the <head> section, we have meta tags for defining the viewport and the initial scale for mobile devices. This ensures our text editor looks good and is responsive across different screen sizes. We’ve also linked to the Font Awesome library for some stylish icons and our own CSS file for custom styling.

Moving on to the <body> section, we have a container div to hold our text editor. Inside this container, we have two main elements: options and text-input.

The options div contains various buttons and select dropdowns for formatting and styling our text. We have buttons for bold, italic, underline, strikethrough, superscript, subscript, ordered list, unordered list, undo, redo, creating and removing links, text alignment, indentation, and font colour customisation.

Next, we have the text-input div with the attribute contenteditable=”true”. This allows users to directly input and edit text within this div. It’s essentially the area where users can type and manipulate text, just like in any text editor.

Now, let’s take a look at the JavaScript file linked at the bottom of our HTML document. This file contains all the necessary scripts to make our text editor functional. We’ll be covering these scripts in detail in the next part of our tutorial.

CSS

We start by setting some global styles. We use the universal selector * to reset margins, padding, and set the box-sizing property to border-box. This ensures consistent spacing and sizing throughout our project.

Next, we define styles for the body element. We set the font family to “Poppins“, a sans-serif font, and the background colour to a light greyish-blue shade to create a pleasant reading environment.

Moving on to the container class, we style the main wrapper for our text editor. We set its maximum width to 80% of the viewport width, centre it horizontally on the page with some top margin, and give it a subtle padding and border radius for a clean look. Additionally, we apply a box-shadow to create a slight elevation effect.

Inside the container, we have the options class. Here, we use flexbox to arrange the formatting buttons in a row with a small gap between them. We also give these buttons some basic styling like removing the border, adding padding, and setting a border-radius for a rounded appearance.

Now, let’s take a look at the text-input ID. This is the area where users can input and edit text. We style it with a border, padding, and border-radius to make it look like a traditional text input area. We also set the font size and line height for optimal readability.

Lastly, we have the input-wrapper class. This is used for styling the colour picker inputs and select dropdowns. We align the label and input elements horizontally and give them some margin for spacing. The colour picker input is styled to have a circular shape and the select dropdowns have a custom arrow using the ::after pseudo-element.

JAVASCRIPT

Alright, now let’s move on to the JavaScript part where we’ll add functionality to our text editor. This is where the magic happens!

In our JavaScript file, we start by selecting various elements from our HTML document using jQuery. These elements include the formatting buttons, select dropdowns, the text-input area, and more.

Next, we have an array called fontList, which contains a list of font options that users can choose from. These fonts will be populated in the font select dropdown.

Moving on to the initializer function, this is where we initialise our text editor by setting up various options and functionalities. We highlight certain buttons to indicate their default state, populate the font select dropdown with options, and set the default font size.

Now, let’s take a look at the modifyText function. This function is responsible for modifying the text within the text-input area based on the user’s interaction with the formatting buttons and advanced options. It uses the document.execCommand() method to execute commands such as bold, italicise, underline, and more.

Moving on to the event listeners, we have functions that handle user interactions such as clicking on formatting buttons, changing select dropdown values, and creating hyperlinks. These event listeners trigger the modifyText function with appropriate parameters to apply formatting or modify the text accordingly.

Lastly, we have the highlighter and highlighterRemover functions. These functions handle the highlighting of active buttons by adding or removing the “active” class. This gives users visual feedback on the currently selected formatting options.

And there you have it! That’s the JavaScript code for our text editor. With these functionalities in place, users can now format and style their text with ease. In the next video, we’ll integrate more advanced features to take our text editor to the next level. Stay tuned and happy coding!

Our Latest Blog

What Are the Best Interview Training Programs for Developers, Testers, and Managers

January 24, 2025ByFlorence

Our Latest Blog

What Are the Best Interview Training Programs for Developers, Testers, and Managers?

Dream IT, Do IT: Succeed in Automation Testing and Shape Your Future!

Your Shortcut to IT Success: Become an Automation Testing Expert!

Popular Courses

Follow Us