Building JavaScript WYSIWYG Text Editor From Scratch



The primary thing every developer think is engaging end users for long and satisfying their need. How do you know if your users are okay with the way your app is presented? By getting feedback from them, then you start implementing the things they need.



The success of a developer relay on engaging users, making them coming back again and again. So one thing I found out that keep me long in web apps is WYSIWYG text editor. Many website carry this amazing feature for users to have endless free text editing.

Many also reading this tutorial: How to Get Value From URL Using PHP 
Many also reading this tutorial: How To Make Facebook Kind of Like Button Using PHP

So guys I want to show you how to build WYSIWYG text editor from scratch using JavaScript programming language. I’m going to build it with plain JavaScript, no Jquery and no Ajax.

I’ll make this entire stuff working fine with just two simple web pages/files.

1.     editor.js
and
2.     Index.html

Below is the index.html file that contain the text editor.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript WYSIWYG text editor</title>
<script src="editor.js"></script>
</head>
<body onLoad="iFrameOn();">
<div>
<form class="c-f" action="post.php" method="POST" name="myform" id="myform"  >
<input type="text" name="title" class="input-field-ele" placeholder="post title"/><br /><br />
<input type="button" onClick="bold()" value="B" style='font-weight:bold;' />
<input type="button" onClick="italic()" value="I" style='font-weight:bold;' />
<input type="button" onClick="strikeThrough()" value="S" style='font-weight:bold;' />
<input type="button" onClick="justifyLeft()" value="L" style='font-weight:bold;' />
<input type="button" onClick="justifyRight()" value="R" style='font-weight:bold;' />
<input type="button" onClick="justifyCenter()" value="C" style='font-weight:bold;' />
<input type="button" onClick="justifyFull()" value="F" style='font-weight:bold;' />
<input type="button" onClick="subscript()" value="s" style='font-weight:bold;' />
<input type="button" onClick="superscript()" value="S" style='font-weight:bold;' />
<input type="button" onClick="underline()" value="U" style='font-weight:bold;' />
<input type="button" onClick="insertHorizontalRule()" value="HR" style='font-weight:bold;' />
<input type="button" onClick="ForeColor()" value="text color" style='font-weight:bold;' />
<input type="button" onClick="FontSize()" value="text size" style='font-weight:bold;' />
<input type="button" onClick="link()" value="link" style='font-weight:bold;' />
<input type="button" onClick="unlink()" value="unlink" style='font-weight:bold;' />
<input type="button" onClick="insertImage()" value="image" style='font-weight:bold;' />
 <textarea style="display:none;" name="textAreaField" id="textAreaField" style="width:95%" rows="14" placeholder="post content"></textarea>
 <iframe name="richTextField" id="richTextField" style="border:grey 1px solid; width:90%; height:300px; background-color: white;"></iframe>
<input type="button" name="button" value="post" class="submit-button"/>
</form>
</div>
</body>
</html>

Above I made form with the content editing buttons. Now next I’ll create external JS file and store the functions inside it. I’ve also link the external JS file with index.html file.
Please keep the index.html and editor.js files in same directory.

Below is my editor.js file which I put all the functions.

<script type="text/javascript">
function iFrameOn()
{
richTextField.document.designMode = "on";
}
function bold()
{
richTextField.document.execCommand('bold', false, null);
}
function italic()
{
richTextField.document.execCommand('italic', false, null);
}
function strikeThrough()
{
richTextField.document.execCommand('strikeThrough', false, null);
}
function justifyLeft()
{
richTextField.document.execCommand('justifyLeft', false, null);
}
function justifyRight()
{
richTextField.document.execCommand('justifyRight', false, null);
}
function justifyCenter()
{
richTextField.document.execCommand('justifyCenter', false, null);
}
function justifyFull()
{
richTextField.document.execCommand('justifyFull', false, null);
}
function subscript()
{
richTextField.document.execCommand('subscript', false, null);
}
function superscript()
{
richTextField.document.execCommand('superscript', false, null);
}
function underline()
{
richTextField.document.execCommand('underline', false, null);
}
 function insertHorizontalRule()
 {
 richTextField.document.execCommand('insertHorizontalRule', false, null);
 }
 function ForeColor()
{
var color = prompt('Enter a color code or name', '');
richTextField.document.execCommand('ForeColor', false, color);
}
function FontSize()
{
var size = prompt('Enter a size 1-7', '');
richTextField.document.execCommand('FontSize', false, size);
}
function link()
{
var linkURL = prompt('Enter link URL', '');
richTextField.document.execCommand('CreateLink', false, linkURL);
}
function unlink()
{
richTextField.document.execCommand('unlink', false, null);
}
function insertImage()
{
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null)
{
richTextField.document.execCommand('insertImage', false, imgSrc);
}
}
</script>

So this it is, I’ve made everything very simple. Later I’ll commence on how to convert the content/text from iframe to the hidden textarea and submit it to the post.php file and pass it to database>table.

Please keep sharing more are on the way.

Thanks a lot!

Post a Comment

2 Comments