How to create Text Editor using HTML and JavaScript

JavascriptProgramming ScriptsWeb DevelopmentFront End Technology

In this tutorial we will learn to create Text Editor using HTML and JavaScript where we can create different- different effects and styles on the user entered texts.

Some of the functionality it will have like.

  • Making text bold, underline using Bold and Underline option.
  • Adding Lowercase, Uppercase effect using option.
  • Highlight, Bold selected text.
  • Making selected text in ordered format using List option in menu.

Creating inputBox

First let’s create editor box which will be an input area, but simple text area wouldn’t work here so we have to apply a property which is contenteditable as true which will allow the container to add input text and also it will apply some basic default styling given by the browser.

Creating toolbar

We will create toolbar which will have all the formatting and styling options like Bold, Italicize, UPPERCASE, lowercase, and list option etc.

Setting edit options

As we made editor box editable, and we also want to execute various commands like bold, italicize, underline on the editable text fields. So, for executing these commands we will use document.execCommand method which will allow us to execute commands on the texts.

Let’s design user interface

Example

<html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <style> .textBox_upperToolbar { padding: 10px; border:solid 1px #ddd; background:#f4f4f4; border-radius:3px; } .textBox_upperToolbar > span { cursor:pointer; } .inputBox { padding: 20px; min-height:400px; border:solid 1px #ccc; background-color: #C4DBE0; } </style> </head> <body> <div class="textBox_upperToolbar"> <button onclick="format('bold')"> <span class="fa fa-bold fa-fw" aria-hidden="true"> </button> <button> <span class="fa fa-italic fa-fw" aria-hidden="true"></span> </button> <button><span></span>Upper</button> <button><span ></span>Lower</button> <button><span ></span>Capitalize</button> <button> <span class="fa fa-list fa-fw" aria-hidden="true"> </button> </div> <div class="inputBox" contenteditable="true" id="EditorBoxId" spellcheck="false"></div> </body> </html>

We will add functions for each toolbar buttons as we will be tapping on button the function associated with that element will be called and it will apply certain style on the text of textbox area.

JavaScript functions

For executing the commands on the editor, we will use a document.execCommand method.

function format(command, value) {
   document.execCommand(command, false, value);
}

The uppercase() function will make all the text in upper present inside the text editor.

function upperCase(){ document.getElementById("EditorBoxId").style.textTransform = "uppercase"; }

Similarly, the lowercase() function will convert all the text in lower case letter present inside the text editor.

function lowerCase(){ document.getElementById("EditorBoxId").style.textTransform = "lowercase"; }

The Capitalize() function will convert first character of each word to uppercase and all other character into lowercase.

function Capitalize(){ document.getElementById("EditorBoxId").style.textTransform = "capitalize"; }

For bold and italic button, we will call format function using onclick property and in the format function we will pass our bold and italic command into the format function.

For bold

onclick="format('bold')

For italic

onclick="format('italic')

Example

<html> <head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <style> .textBox_upperToolbar { padding: 10px; border:solid 1px #ddd; background:#f4f4f4; border-radius:3px; } .textBox_upperToolbar > span { cursor:pointer; } .inputBox { border:solid 1px #ccc; padding: 20px; min-height:400px; border:solid 1px #ccc; background-color: #C4DBE0; } </style> </head> <body> <div class="textBox_upperToolbar"> <button onclick="format('bold')"> <span class="fa fa-bold fa-fw" aria-hidden="true"></span> </button> <button onclick="format('italic')"> <span class="fa fa-italic fa-fw" aria-hidden="true"></span> </button> <button onclick="upperCase()"><span></span>Upper</button> <button onclick="lowerCase()"><span ></span>Lower</button> <button onclick="Capitalize()"><span ></span>Capitalize</button> <button onclick="format('insertunorderedlist')"> <span class="fa fa-list fa-fw" aria-hidden="true"></button> </div> <div class="inputBox" contenteditable="true" id="EditorBoxId" spellcheck="false"> </div> <script> function format(command, value) { document.execCommand(command, false, value); } function upperCase(){ document.getElementById("EditorBoxId").style.textTransform = "uppercase"; } function lowerCase(){ document.getElementById("EditorBoxId").style.textTransform = "lowercase"; } function Capitalize(){ document.getElementById("EditorBoxId").style.textTransform = "capitalize"; } </script> </body> </html>

After calling the function we are selecting the particular element using DOM and then change its CSS property using JavaScript.

raja
Updated on 11-Oct-2022 08:54:31

Advertisements