Os: Creating own WYSIWYG with JavaScript and Processing it with HTML form submission

10 0 465 reads

Creating WYSIWYG (what you see is what you get) is always an interesting thing to learn for me, and hope for some of you too. Today i'll teach you about how to create it with files to download and use as demo.

WYSIWYG is a smart formatting for normal text to HTML marked up text, not everyone knows how to write in HTML but mostly people use WYSIWYG in their daily writing without knowing that they are writing HTML Codes.

JavaScript file in the package is

//enabling iframes for html doc inside the body tag as <body  onLoad="iFrameOn();">

function iFrameOn(){

     richText.document.designMode = 'On';


//now starting the html markup functions

function iBold(){



//and more like that, now main part

function submit_form(){

     var theForm = document.getElementById("wysiwyg");

     theForm.elements["textArea"].value = window.frames['richText'].document.body.innerHTML;



in the above code of form submission all the thing is happened, now you have your JavaScript markup and time to learn about the Programming language, i'm using PHP.

In HTML text the tag <form id="wysiwyg"> having id="wysiwyg" that points the document.getElementById("wysiwyg"); same as the further "textArea" is the  tag <textarea id="textArea"> where we're going to put the ifamed 'richText'.

I mean, don't mess in things that much use PHP or anything be cool and contact me if you got any kind of problem.

Download Files from Box.com

Git from Github


Ghazi Khan /u/mgks

verified publisher79 feeds
No Threads
more feeds from /u/mgks