How to create Text Editor using Javascript and HTML ? - GeeksforGeeks

16 Apr, 2021
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:
Create buttons to perform operations on text in div.
Create textarea in div using textarea tag.
Select elements using document.getElementById method.
Then change the CSS using JavaScript. 
index.html
<!DOCTYPE html><html lang="en" dir="ltr">  <head>    <meta charset="utf-8">    <title>Text Editor</title>    <!--Bootstrap Cdn -->    <link rel="stylesheet"           href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"           integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"           crossorigin="anonymous">    <!-- fontawesome cdn For Icons -->    <link rel="stylesheet"          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css"           integrity="sha512-PgQMlq+nqFLV4ylk1gwUOgm6CtIIXkKwaIHp/PAIWHzig/lKZSEGKEysh0TCVbHJXCLN7WetD8TFecIky75ZfQ=="           crossorigin="anonymous" />    <link rel="stylesheet"          href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"           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.
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
HTML-Questions
HTML5
JavaScript-Questions
CSS
HTML
JavaScript
Project
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property