Rich Text Editor using HTML, CSS and JavaScript (Source Code) - Coding Torque

byPiyush Patil -January 06, 2023

0

Rich Text Editor using HTML, CSS and JavaScript

Hello coders! Are you ready to take your text editing skills to the next level? Look no further than Coding Torque! In this blog, we will guide you through the process of creating your very own rich text editor using HTML, CSS, and JavaScript. This interactive and feature-packed app will allow you to easily format, style, and customize your written content in ways that go far beyond the capabilities of a basic text editor. Not only is this project a great opportunity to expand your coding knowledge and skills, but it's also a lot of fun to use and play with. So let's get started on bringing your writing to new heights!

Join us on Telegram Join Now

Before we start, here are some more JavaScript Games you might like to create:

1. Snake Game using JavaScript

2. 2D Bouncing Ball Game using JavaScript

3. Rock Paper Scissor Game using JavaScript

4. Tic Tac Toe Game using JavaScript

5. QR Code Generator using JavaScript

I would recommend you don't just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <!-- FONT AWESOME CDN  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />

    <title>Rich Text Editor using JavaScript - @code.scientist x @codingtorque</title>
</head>

<body onload="enableEditMode()">
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your <body> tag

<div>
    <button onclick="Edit('bold')" title="bold"><i class="fa fa-bold"></i></button>
    <button onclick="Edit('italic')" title="italic"><i class="fa fa-italic"></i></button>
    <button onclick="Edit('underline')" title="underline"><i class="fa fa-underline"></i></button>
    <button onclick="Edit('strikeThrough')" title="strikeThrough"><i class="fa fa-strikethrough"></i></button>
    <button onclick="Edit('justifyLeft')" title="Align Left"><i class="fa fa-align-left"></i></button>
    <button onclick="Edit('justifyCenter')" title="Align Center"><i class="fa fa-align-center"></i></button>
    <button onclick="Edit('justifyFull')" title="justify"><i class="fa fa-align-justify"></i></button>
    <button onclick="Edit('cut')" title="cut"><i class="fa fa-cut"></i></button>
    <button onclick="Edit('copy')" title="Copy"><i class="fa fa-copy"></i></button>
    <button onclick="Edit('indent')" title="text-indent"><i class="fa fa-indent"></i></button>
    <button onclick="Edit('outdent')" title="text outdent"><i class="fa fa-outdent"></i></button>
    <button onclick="Edit('subscript')" title="subscript"><i class="fa fa-subscript"></i></button>
    <button onclick="Edit('superscript')" title="subscript"><i class="fa fa-superscript"></i></button>
    <button onclick="Edit('undo')" title="undo"><i class="fa fa-undo"></i></button>
    <button onclick="Edit('redo')" title="redo"><i class="fa fa-redo"></i></button>
    <button onclick="Edit('insertUnorderedList')" title="unordered list"><i class="fa fa-list-ul"></i></button>
    <button onclick="Edit('insertOrderedList')" title="ordered list"><i class="fa fa-list-ol"></i></button>
    <button onclick="Edit('insertParagraph')"><i class="fa fa-paragraph"></i></button>
    <select onchange="execVal('formatBlock',this.value)">
        <option value="H1">H1</option>
        <option value="H2">H2</option>
        <option value="H3">H3</option>
        <option value="H4">H4</option>
        <option value="H5">H5</option>
        <option value="H6">H6</option>
    </select>
    <br>
    <button onclick="Edit('insertHorizontalRule')" title="insert Horizontal Rule">insert Horizontal Rule</button>
    <button onclick="Edit('createLink',prompt('Enter a URL,http://'))"><i class="fa fa-link"></i></button>
    <button onclick="Edit('unlink')"><i class="fa fa-unlink"></i></button>
    <select onchange="execVal('fontName',this.value)">
        <option value="Arial">Arial</option>
        <option value="Comic Sans MS">Comic Sans MS</option>
        <option value="Courier">Courier</option>
        <option value="Georgia">Georgia</option>
        <option value="Tahoma">Tahoma</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="Verdana">Verdana</option>
    </select>
    <select onchange="execVal('fontSize',this.value)" title="font size">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>Font Color<input type="color" onchange="execVal('foreColor',this.value)" /> Highlight<input
        type="color" onchange="execVal('hiliteColor',this.value)" />
    <button onclic="Edit('SelectAll')">Select All</button>
</div>
<iframe name="richTextField" style="width:80%;height: 80%;margin:auto;display: block;">

</iframe>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

div,
iframe {
  width: 65% !important;
  margin: auto;
  display: block;
  border: 1px solid #ccc;
}
iframe {
  height: 600px !important;
}
div {
  border: none;
  margin-bottom: 10px;
}
button,
input,
select {
  margin: 5px;
}

JavaScript Code

Create a file script.js and paste the code below.

function enableEditMode() {
    richTextField.document.designMode = "on";
}
function Edit(command) {
    richTextField.document.execCommand(command, false, null);
}
function execVal(command, value) {
    richTextField.document.execCommand(command, false, value);
}

Final Output

Join us on Telegram Join Now

Written by: Coding Torque | Piyush Patil

Code Credits: @A-Elsayed

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖

Follow us on Instagram for more projects like this👨‍💻

- @code.scientist

- @codingtorque