What you see is What you GET

How many of you have seen different styles of text in a page content? Many of you have written CSS for styling the page content. But there is an entire different way of styling text (Some parts or entire text) using Javascript.

This will be described here as WYSIWYG editor.

so let’s begin the HTML code is… For the layout of buttons

<div id="wysiwyg_cp" style="padding: 8px; width: 700px;"><input class="fa fa-bold" type="button" value="B" /> <input class="fa fa-underline" type="button" value="U" /> <input class="fa fa-italic" type="button" value="I" /> <input class="fa fa-text-height fa-text-width" type="button" value="Text Size" /> <input class="fa fa-color" type="button" value="Text Color" /> <input class="fa fa-list" type="button" value="UL" /> <input class="fa fa-list" type="button" value="OL" /> <input class="fa fa-link" type="button" value="Link" /> <input type="button" value="HR" /> <input type="button" value="UnLink" /> <input type="button" value="Image" /></div>

For typing text we can use either a DIV or an IFRAME so that the effects can easily be seen during styling. Here I use a DIV.  The code for typing text into a div is simple by using a simple attribute in HTML. Just make a div editable by the attribute contenteditable

<div id="post_status" class="form-control" style="overflow: auto;" contenteditable="true"></div>

By making the DIV editable you can use this as a normal textarea where the effects of styling can easily be felt. Next comes the Javascript that is the heart of the editor functioning. This makes us to style our content in the way we want it to appear. First we will see the javascript code and later examine how each function works

function iBold(){
function iUnderline(){
function iItalic(){
function iFontSize(){
var size = prompt('Enter a size 1 - 7', '');
function iForeColor(){
var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
function iHorizontalRule(){
function iUnorderedList(){
document.execCommand("InsertOrderedList", false,"newOL");
function iOrderedList(){
document.execCommand("InsertUnorderedList", false,"newUL");
function iLink(){
var linkURL = prompt("Enter the URL for this link:", "http://");
document.execCommand("CreateLink", false, linkURL);
function iUnLink(){
document.execCommand("Unlink", false, null);
function iImage(){
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null){
document.execCommand('insertimage', false, imgSrc);

The first function iBold() makes the content to be BOLD using the function execCommand(‘bold’,false,null); execCommand() is the function that executes the properties of text in the background as some SHELL COMMAND. iItalic() makes the content to be ITALIC and similarly all the names suggests the meaning and thus using a single and simple function,  execCommand(), we can make the editor work well.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s