Home Web Development JavaScript JavaScript Rich Text Editor Program | Online HTML Editor

JavaScript Rich Text Editor Program | Online HTML Editor

May 5, 2019

9507

How to create Online HTML Editor like WordPress? See this JavaScript Rich Text Editor Program.

If you have used CMS like WordPress, Blogger, Drupal then you know what is Rich Text Editor. When you add a post or page, there is a field for add text, image, etc that is called rich text editor. Basically, with this editor, you can create HTML without writing code. This text editor has pre-build HTML property.

You must have seen that in WordPress or any other CMS, you just add text and click on buttons like font-style, font-size, add a link, etc. You don’t have to put HTML tags, Just add text and click on the button what property you want. This is a very cool concept to write anything on a webpage. If you are not using any CMS, Then you can also add Online HTML Editor with this JavaScript Rich Text Editor Program.

You can also use this in your backend. After that, you don’t have to write the HTML code for creating a webpage. Just you have to add text or media and give property and style. You don’t understand what thing I am talking about till now, then see this preview.

Preview Of Online HTML Editor

Let see how this JavaScript Rich Text Editor Program program looks like:

Now you can see how this program looks visually. If you like this, get the source code of this program.

JavaScript Rich Text Editor Source Code

Before sharing source code let’s talk something about this program. I used font-awesome to put suitable icons in the feature boxes. & I used inline JavaScript using onclick property. This is a very simple program, Even a beginner can understand this program easily.

For creating this program you have to create 3 files. One for HTML, One for CSS, and one for JavaScript. Follow the steps to create this program without any error.

index.html

Create an HTML file called ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com ) -->
<html>

<head>
  <meta charset="UTF-8">
  <title>JavaScript Rich Text Editor | webdevtrick.com</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css">

      <link rel="stylesheet" href="style.css">
</head>

  <body onload="enableEditMode()">
  <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)" />
  </div>
  <iframe name="richTextField" style="width:80%;height: 80%;margin:auto;display: block;">
      
    </iframe>

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

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>JavaScript Rich Text Editor | webdevtrick.com</title>

</head>

<div>

</select>

<br>

<button onclick="Edit('insertHorizontalRule')" title="insert Horizontal Rule">insert Horizontal Rule</button>

<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>Font Color<input type="color" onchange="execVal('foreColor',this.value)" /> Highlight<input type="color" onchange="execVal('hiliteColor',this.value)" />

</div>

</iframe>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

/* code by webdevtrick ( https://webdevtrick.com ) */
body {
	background-color: whitesmoke;
	margin-top: 100px;
}
div,iframe {
  width: 65% !important;
  margin: auto;
  display: block;
  border: 1px solid #ccc;
}
iframe{
  height:600px !important;
	background-color: white;
}
div {
  border: none;
  margin-bottom: 10px;
}
button,input,select {
  margin:5px;
}
button {
	
	color: white;
	background-color: #FF4447;
	
}

/* code by webdevtrick ( https://webdevtrick.com ) */

body {

background-color: whitesmoke;

margin-top: 100px;

}

div,iframe {

width: 65% !important;

margin: auto;

display: block;

border: 1px solid #ccc;

}

iframe{

height:600px !important;

background-color: white;

}

div {

border: none;

margin-bottom: 10px;

}

button,input,select {

margin:5px;

}

button {

color: white;

background-color: #FF4447;

}

function.js

Now create a javascript file named ‘function.js‘ and put these codes.

/* code by webdevtrick ( https://webdevtrick.com ) */
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);
}

/* code by webdevtrick ( https://webdevtrick.com ) */

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);

}

That’s It. Now you have successfully created the JavaScript Rich Text Editor Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

10 COMMENTS

muslu yüksektepe May 5, 2019 At 6:32 pm

Thank you.

Reply
- shaan May 5, 2019 At 7:19 pm
  
  Pleasure, Stay Connected.
  
  Reply
  - Capri May 5, 2019 At 8:43 pm
    
    Can this program replace windows front page?
    Can I copy my front page website ( java no longer works )
    On this program will it correct and update java to work.
    
    Reply
    - shaan May 6, 2019 At 3:56 am
      
      You can use it on webpage
      
      Reply
dlbone58 June 23, 2019 At 5:43 pm

How would you add another button to wrap selected text with SELECTED TEXT HERE ?

Reply
sunakshi singh January 15, 2020 At 2:35 pm

Hi ,Thanks for sharing code.I want to content of iframe like below:
contentdatacould you please share,how can i access content.

Reply
sunakshi singh January 15, 2020 At 2:37 pm

i want content like below :
“.. content ..”

Reply
sunakshi singh January 15, 2020 At 2:39 pm

sunakshi

Reply
Paul April 3, 2020 At 4:38 am

See also Mozillas documentation for this feature: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

Reply
Chandu September 8, 2021 At 7:03 am

Very useful article

Reply