Web / HTML

How to create a WYSIWYG Text Editor - Part 1

by Libz Mbanje
22 Nov 2015 at 10:46hrs | 15052 Views

Here we are going to build our own WYSIWYG Text Editor using execCommand() method. In order to manipulate content in an HTML  HTML document the parent tag has to be in designMode. Most execCommand() commands after affect selected content in the editable region (Bold, italics, underlining, etc.), while others insert new elements (adding a link) or affect an entire line (indenting).

The parent tag (in our case a div tag with the id body_txt) that is going to hold editable content should have an attribute "contenteditable" set to "true".

<div id="body_txt" contenteditable="true"></div>

Any content that goes in body_txt can be manipulated using execCommand() commands.

Formatting button

Create a div with id = "editor_buttons"

<div id="editor_buttons">
<i class="fa fa-bold" style="color:#fff;" onclick="doBold()"></i>
<i class="fa fa-code" style="color:#fff" onclick="insertCode()"></i>
<i class="fa fa-italic" style="color:#fff" onclick="doItalic() "></i>
<i class="fa fa-align-left" style="color:#fff" onclick="doJustifyLeft()"></i>
<i class="fa fa-align-justify" style="color:#fff" onclick="doJustifyFull()"></i>
<i class="fa fa-align-center" style="color:#fff" onclick="doCenter()"></i>
<i class="fa fa-align-right" style="color:#fff" onclick="doJustifyRight()"></i>
<i onclick="doImage()" style="color:#fff" class="fa fa-file-image-o"></i>
<i class="fa fa-list-ul" style="color:#fff" onclick="doUl()"></i>
<i class="fa fa-list-ol" style="color:#fff" onclick="doOl()"></i>
<i class="fa fa-link" style="color:#fff" onclick="doLink()"></i>
<i class="fa fa-unlink" style="color:#fff" onclick="doUnLink()"></i>
<i class="fa fa-underline" style="color:#fff" onclick="doUnderline()"></i>
<i class="fa fa-undo" style="color:#fff" onclick="doUndo()"></i>


The above buttons use  Font Aswesome on each button there is an onclick attribute which takes a JavaScript method. e.g. doBold(). The method triggered by clicking the button also triggers execCommand() for formatting selected text.

JavaScript for Buttons

Example of JavaScript function for a bold button
function doBold() {
document.execCommand('StyleWithCSS', false, null);
document.execCommand('bold', false, null);

Complete JavaScript functions for buttons
//Bold function
doBold() {
document.execCommand('StyleWithCSS', false, null);
document.execCommand('bold', false, null);
//Justify left function
function doJustifyLeft() {
document.execCommand('justifyLeft', false, null);
//Justify center function
function doCenter() {
document.execCommand('justifyCenter', false, null);
//Justify function
function doJustifyFull() {
document.execCommand('justifyFull', false, null);
//Justify right function
function doJustifyRight() {
document.execCommand('justifyRight', false, null);
//Unordered list function
function doUl() {
document.execCommand('insertunOrderedList', false, null);
//Ordered list function
function doOl() {
document.execCommand('insertOrderedList', false, null);
//Italic function
function doItalic() {
document.execCommand('StyleWithCSS', false, null);
document.execCommand('italic', false, null);
//Create hyper link function
function doLink() {
var urlLink = prompt('Enter url link', '');
if (urlLink != null) {
document.execCommand('createLink', false, urlLink);
//Unlink function
function doUnLink() {
document.execCommand('unlink', false, null);
//Insert an image function
function doImage() {
var imgSrc = prompt('Enter image location', '');
if (imgSrc != null) document.execCommand('insertimage', false, imgSrc);
//Insert a horizontal line function
function doRule() {
document.execCommand('inserthorizontalrule', false, null);
//Underline function
function doUnderline() {
document.execCommand('underline', false, null);
//Remove formating function
function doDeformat() {
document.execCommand('removeformat', false, null);
//Undo function
function doUndo() {
document.execCommand('undo', false, null);
//Insert HTML code function
function insertCode() {
var urlLink = prompt('Enter your code', '');
if (urlLink != null) {
document.execCommand('insertHTML', false, urlLink);

This is getting to long so I have decided to split it into two parts, check out the 2nd and final part: "How to create a WYSIWYG Text Editor - Part 2"

See: WYSIWYG Demo Source Code.

Source - accessing{Code}

Chat Login

Register | Forgot password