Skip to content
Related Articles

Related Articles

Improve Article

How to create Text Editor using Javascript and HTML ?

  • Difficulty Level : Easy
  • Last Updated : 16 Apr, 2021
Geek Week

Project Introduction: In this article, we will learn how to make a simple text editor JavaScript application where we can manipulate the user input in different styles, edit the input, capitalize, etc many string operations. Let’s see the implementation.

Approach:

index.html




<!DOCTYPE html>
<html lang="en" dir="ltr">
  
<head>
    <meta charset="utf-8">
    <title>Text Editor</title>
    <!--Bootstrap Cdn -->
    <link rel="stylesheet" 
          href=
          integrity=
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
          crossorigin="anonymous">
    <!-- fontawesome cdn For Icons -->
    <link rel="stylesheet"
          href=
          integrity=
"sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ==" 
          crossorigin="anonymous" />
    <link rel="stylesheet"
          href=
          integrity=
"sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
          crossorigin="anonymous" />
  
    <!--Internal CSS start-->
    <style>
        h1 {
            padding-top: 40px;
            padding-bottom: 40px;
            text-align: center;
            color: #957dad;
            font-family: 'Montserrat', sans-serif;
        }
          
        section {
            padding: 5%;
            padding-top: 0;
            height: 100vh;
        }
          
        .side {
            margin-left: 0;
        }
          
        button {
            margin: 10px;
            border-color: #957dad !important;
            color: #888888 !important;
            margin-bottom: 25px;
        }
          
        button:hover {
            background-color: #fec8d8 !important;
        }
          
        textarea {
            padding: 3%;
            border-color: #957dad;
            border-width: thick;
        }
          
        .flex-box {
            display: flex;
            justify-content: center;
        }
    </style>
    <!--Internal CSS End-->
</head>
<!--Body start-->
  
<body>
    <section class="">
        <h1 class="shadow-sm">TEXT EDITOR</h1>
        <div class="flex-box">
            <div class="row">
                <div class="col">
                    <!-- Adding different buttons for
                         different functionality-->
                    <!--onclick attribute is added to give 
                        button a work to do when it is clicked-->
                    <button type="button" 
                            onclick="f1()" 
                            class=" shadow-sm btn btn-outline-secondary" 
                            data-toggle="tooltip"
                            data-placement="top" 
                            title="Bold Text">
            Bold</button>
                    <button type="button" 
                            onclick="f2()" 
                            class="shadow-sm btn btn-outline-success" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Italic Text">
            Italic</button>
                    <button type="button" 
                            onclick="f3()" 
                            class=" shadow-sm btn btn-outline-primary" 
                            data-toggle="tooltip" 
                            data-placement="top"
                            title="Left Align">
            <i class="fas fa-align-left"></i></button>
                    <button type="button" 
                            onclick="f4()" 
                            class="btn shadow-sm btn-outline-secondary" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Center Align">
            <i class="fas fa-align-center"></i></button>
                    <button type="button" 
                            onclick="f5()" 
                            class="btn shadow-sm btn-outline-primary" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Right Align">
            <i class="fas fa-align-right"></i></button>
                    <button type="button" 
                            onclick="f6()" 
                            class="btn shadow-sm btn-outline-secondary" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Uppercase Text">
            Upper Case</button>
                    <button type="button" 
                            onclick="f7()" 
                            class="btn shadow-sm btn-outline-primary" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Lowercase Text">
            Lower Case</button>
                    <button type="button" 
                            onclick="f8()" 
                            class="btn shadow-sm btn-outline-primary" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Capitalize Text">
            Capitalize</button>
                    <button type="button" 
                            onclick="f9()" 
                            class="btn shadow-sm btn-outline-primary side" 
                            data-toggle="tooltip" 
                            data-placement="top" 
                            title="Tooltip on top">
            Clear Text</button>
                </div>
            </div>
        </div>
        <br>
        <div class="row">
            <div class="col-md-3 col-sm-3">
            </div>
            <div class="col-md-6 col-sm-9">
                <div class="flex-box">
                    <textarea id="textarea1" 
                              class="input shadow" 
                              name="name" 
                              rows="15" 
                              cols="100" 
                              placeholder="Your text here ">
                    </textarea>
                </div>
            </div>
            <div class="col-md-3">
            </div>
        </div>
    </section>
    <br>
    <br>
    <h6 style="text-align:center;">Priyansh Jha 2021.</h6>
  
    <!--External JavaScript file-->
    <script src="home.js"></script>
</body>
  
</html>

HTML Code Explanation: Here we added different buttons in the document, which will get the power to perform some tasks we give to it with the help of JavaScript. We have added buttons for changing the font-weight of the input string, font style, text alignment of the string, and are going to transform the string using the Document Object Model. We have added some basic CSS to beautify the document, you may use different CSS properties to make it look better. And in the below part of the HTML code, we have added one text field where the user can write down the input string. So, we are ready with all the design and structure of our project now all we need to do is to give powers to it using JavaScript. For, now we have a text box and multiple buttons for applying different styles in the string input.

home.js






function f1() {
    //function to make the text bold using DOM method
    document.getElementById("textarea1").style.fontWeight = "bold";
}
  
function f2() {
    //function to make the text italic using DOM method
    document.getElementById("textarea1").style.fontStyle = "italic";
}
  
function f3() {
    //function to make the text alignment left using DOM method
    document.getElementById("textarea1").style.textAlign = "left";
}
  
function f4() {
    //function to make the text alignment center using DOM method
    document.getElementById("textarea1").style.textAlign = "center";
}
  
function f5() {
    //function to make the text alignment right using DOM method
    document.getElementById("textarea1").style.textAlign = "right";
}
  
function f6() {
    //function to make the text in Uppercase using DOM method
    document.getElementById("textarea1").style.textTransform = "uppercase";
}
  
function f7() {
    //function to make the text in Lowercase using DOM method
    document.getElementById("textarea1").style.textTransform = "lowercase";
}
  
function f8() {
    //function to make the text capitalize using DOM method
    document.getElementById("textarea1").style.textTransform = "capitalize";
}
  
function f9() {
    //function to make the text back to normal by removing all the methods applied 
    //using DOM method
    document.getElementById("textarea1").style.fontWeight = "normal";
    document.getElementById("textarea1").style.textAlign = "left";
    document.getElementById("textarea1").style.fontStyle = "normal";
    document.getElementById("textarea1").style.textTransform = "capitalize";
    document.getElementById("textarea1").value = " ";
}

JavaScript Code explanation:
Here we are selecting elements using DOM. Then we are using document.getElementById method to select a particular element and then after selecting the specific element using its ID name we are manipulating its CSS through JavaScript. Lastly, we have created a function that makes everything back to normal, where discard all the properties applied using the buttons we provided.

Output:
 

Output Screen Image

There are many more functions you can add to this project like changing the font size, counting the number of letters, words inside the text area, changing font style, and many more. Do give that a try.
You can access the source code from Github and see a running example of this project by clicking here.

 

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :