How to make our own custom fully responsive WYSIWYG (What you see Is What You Get) Rich Text Editor with image uploading through pure JavaScript?

Description:- Now a days developer use the  WYSIWYG (What you see Is What You Get) Rich Text Editor on their websites instead of old and boring textarea. Below is the code through which you can create you own custom rich text editor.
Plus at the end of the code there is also a video in which I tested my WYSIWYG rich text editor, play that video if you want to see how it works.

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="bootstrap.min.css" type="text/css" rel="stylesheet"/>
http://bootstrap.min.js
http://jquery-1.11.1.min.js
<title>Own Rich text editor</title>
<style>
input[type='button'] { cursor:pointer;}
</style>

</head>
<body onLoad="wtbframe();">
<center>
    
        
       
                             
<!--END of buttons--> <textarea name="myarea" id="myarea" cols="100" rows="15" style="display:none" class="form-control"></textarea>     </form> </div>
</div><!--END of row--> </div><!--END of container--> </center> </body> </html> <!--****************BELOW IS THE JAVASCRIPT CODES FOR ALL THE AFORESAID FUNCTIONS******************* --> function wtbframe() {     richtext.document.designMode= 'On'; // Through this our iframe will act like textarea } function wtbbold() {     richtext.document.execCommand('bold',false,null); } function wtbunderline() {     richtext.document.execCommand('underline',false,null); } function wtbitalic() {     richtext.document.execCommand('italic',false,null); } function wtbfontsize() {     var fontSize = prompt('Enter a size', '');     richtext.document.execCommand('FontSize',false,fontSize); } function wtbfontcolor() {     var fontColor = prompt('Enter the name of color or hexadecimal color code:', '');     richtext.document.execCommand('ForeColor',false,fontColor); } function wtbbgcolor() {     var bgcolor = prompt('Enter the name of color or hexadecimal color code for changing background color:', '');     document.getElementById('richtext').style.backgroundColor=bgcolor; } function wtbhorizontalLine() {     richtext.document.execCommand('inserthorizontalrule',false,null); } function wtbunorderlist() {     richtext.document.execCommand('InsertUnorderedList',false,"newUL"); } function wtborderlist() {     richtext.document.execCommand('InsertOrderedList',false,"newOL"); } function wtblinking() {     var links = prompt('Enter the URL for link:', 'http://');     richtext.document.execCommand("CreateLink",false,links); } function wtbunlinking() {     richtext.document.execCommand("Unlink",false,null); } function wtbimg() {     var img = prompt('Enter image Location');     if(img != null)     {         richtext.document.execCommand('insertimage',false,img);     } }

Note:- Since it is totally bootstrap so don’t forget to link the three main bootstrap files.

Watch video to see how it works

Advertisements

4 thoughts on “How to make our own custom fully responsive WYSIWYG (What you see Is What You Get) Rich Text Editor with image uploading through pure JavaScript?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s