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