Click here to Skip to main content
15,170,331 members
Articles / Programming Languages / Javascript
Technical Blog
Posted 1 Apr 2011

Tagged as

Stats

41.2K views
2 bookmarked

How To Generate Rich Text Box using JavaScript

Rate me:
Please Sign up or sign in to vote.
5.00/5 (2 votes)
1 Apr 2011CPOL2 min read
If you are developing any site and in you site some section need user input in rich text format then you can't use text area because it's limitation is there. In market there are lots of control available freely and paid as well.

Screenshots for Editor

Rich Text entered into RTB

HTML in RTB

Introduction

If you are developing any site and in you site some section need user input in rich text format then you can't use text area because it's limitation is there. In market there are lots of control available freely and paid as well. But have you think ever how to develop our own text editor, so we can customize as per our choice, need. There is no DLL limitation.

Today I will show you how to develop your RichText Box using JavaScript and HTML with CSS.

Method

I will not develop complete RichText box here, but some basic of the RichText Box and left remaining things for your exercise.

Add one HTML page to your project. Then in head section add below style for DropDown list. Add this line too in head section.

HTML
<style type="text/css" media="screen,print"> 
.select
{
	background-color:#CCCCCC;
	border-width:1px;
	font-family:Calibri,Verdana, Tahoma;
	margin:0;
	font-size:10px;
}
</style>

This is the file which encode and decode HTML tag to toggle between Design mode and HTML mode.

Add below code also inside head tag

ASP.NET
<script type="text/javascript">
function Set()
{
    getIFrameDocument("textEditor").designMode = "On";
    getIFrameDocument("textEditor").focus();
}

function getIFrameDocument(editor)
{
    // If Fire fox Mozilla
    if (document.getElementById(editor).contentDocument)
    {
        return document.getElementById(editor).contentDocument;
    }
    // If Internet Explorer
    else
    {
        // IE
        return document.frames[editor].document;
    }
}
</script>

Set function to set the design mode on and focus as well. This function will get call once page loaded successfully. getIFrameDocument function will be used to check it's an IE or Firefox.

This is the another JavaScript code snippets which will be used to edit the document text as per our command. Add it to the head tag

ASP.NET
<script type="text/javascript">
             var isDesignMode = true;
function fontEdit(command, y)
{
    switch (command)
    {
    case 'bold':
        if (document.getElementById('bold').src.toString().indexOf("over") != -1)
        {
            document.getElementById('bold').src = "images/bold.gif";
        }
        else
        {
            document.getElementById('bold').src = "images/bold.over.gif";
        }
        break;
    case 'italic':
        if (document.getElementById('italic').src.toString().indexOf('over') != -1)
            document.getElementById('italic').src = 'images/italic.gif';
        else
            document.getElementById('italic').src = 'images/italic.over.gif';
        break;
    case 'underline':
        if (document.getElementById('underline').src.toString().indexOf('over') != -1)
            document.getElementById('underline').src = 'images/underline.gif';
        else
            document.getElementById('underline').src = 'images/underline.over.gif';
        break;
    case 'justifyleft':
        if (document.getElementById('justifyleft').src.toString().indexOf('over') != -1)
            document.getElementById('justifyleft').src = 'images/justifyleft.gif';
        else
            document.getElementById('justifyleft').src = 'images/justifyleft.over.gif';
        break;
    case 'justifycenter':
        if (document.getElementById('justifycenter').src.toString().indexOf('over') != -1)
            document.getElementById('justifycenter').src = 'images/justifycenter.gif';
        else
            document.getElementById('justifycenter').src = 'images/justifycenter.over.gif';
        break;
    case 'justifyright':
        if (document.getElementById('justifyright').src.toString().indexOf('over') != -1)
            document.getElementById('justifyright').src = 'images/justifyright.gif';
        else
            document.getElementById('justifyright').src = 'images/justifyright.over.gif';
        break;
    case 'insertorderedlist':
        if (document.getElementById('insertorderedlist').src.toString().indexOf('over') != -1)
            document.getElementById('insertorderedlist').src = 'images/numberedlist.gif';
        else
            document.getElementById('insertorderedlist').src = 'images/numberedlist.over.gif';
        break;
    case 'insertunorderedlist':
        if (document.getElementById('insertunorderedlist').src.toString().indexOf('over') != -1)
            document.getElementById('insertunorderedlist').src = 'images/bulletedlist.gif';
        else
            document.getElementById('insertunorderedlist').src = 'images/bulletedlist.over.gif';
        break;
    case 'outdent':
        if (document.getElementById('outdent').src.toString().indexOf('over') != -1)
            document.getElementById('outdent').src = 'images/outdent.gif';
        else
            document.getElementById('outdent').src = 'images/outdent.over.gif';
        break;
    case 'indent':
        if (document.getElementById('indent').src.toString().indexOf('over') != -1)
            document.getElementById('indent').src = 'images/indent.gif';
        else
            document.getElementById('indent').src = 'images/indent.over.gif';
        break;
    case 'default':
        break;
    }
    getIFrameDocument("textEditor").execCommand(command, "", y);
    textEditor.focus();
}

function ChangeMode()
{
    if (isDesignMode == true)
    {
        isDesignMode = false;
        document.getElementById('mode').src = 'images/mode.html.gif';
        document.getElementById('mode').title = 'HTML View';
        Encoder.EncodeType = "entity";
        var encoded = Encoder.htmlEncode(getIFrameDocument("textEditor").body.innerHTML);
        getIFrameDocument("textEditor").body.innerHTML = encoded;
    }
    else
    {
        isDesignMode = true;
        document.getElementById('mode').src = 'images/mode.design.gif';
        document.getElementById('mode').title = 'Design View';
        var decoded = Encoder.htmlDecode(getIFrameDocument("textEditor").body.innerHTML);
        getIFrameDocument("textEditor").body.innerHTML = decoded;
    }
}
</script>

Now JavaScript is over and we will add HTML code to the page. Before that we will code Set function on page load event like this

HTML
<body onload="Set()"> 

And code is as below.

HTML
<div style="background-color: #CCCCCC; width: 500px;">
				<a onclick="javascript:fontEdit('bold')">
				<img id="bold" src="images/bold.gif" alt="Bold" title="Bold" style="height: 20px; width: 21px; border: none;" />
				</a><a onclick="javascript:fontEdit('italic')">
				<img id="italic" src="images/italic.gif" alt="" title="Italic" style="height: 20px; width: 21px; border: none;" />
				</a><a onclick="javascript:fontEdit('underline')">
				<img id="underline" src="images/underline.gif" alt="" title="Underline" style="height: 20px; width: 21px; border: none;" />
				</a>
				<img id="sep1" src="images/sep.gif" alt="" style="height: 16px; width: 1px; border: none;" />
				<a onclick="javascript:fontEdit('justifyleft')">
				<img id="justifyleft" src="images/justifyleft.gif" alt="" title="Justify Left" style="height: 20px; width: 21px; border: none;" />
				</a><a onclick="javascript:fontEdit('justifycenter')">
				<img id="justifycenter" src="images/justifycenter.gif" alt="" title="Justify Center" style="height: 20px; width: 21px; border: none;" />
				</a><a onclick="javascript:fontEdit('justifyright')">
				<img id="justifyright" src="images/justifyright.gif" alt="" title="Justify Right" style="height: 20px; width: 21px; border: none;" />
				</a>
				<img id="sep2" src="images/sep.gif" alt="" style="height: 16px; width: 1px; border: none;" />
				<a onclick="javascript:fontEdit('insertorderedlist')">
				<img id="insertorderedlist" src="images/numberedlist.gif" alt="" title="Order List" style="height: 20px; width: 21px; border: none;" />
				</a><a onclick="javascript:fontEdit('insertunorderedlist')">
				<img id="insertunorderedlist" src="images/bulletedlist.gif" alt="" title="Bullets List" style="height: 20px; width: 21px; border: none;" />
				</a><a onclick="javascript:fontEdit('outdent')">
				<img id="outdent" src="images/outdent.gif" alt="" title="Outdent" style="height: 20px; width: 21px; border: none;" />
				</a><a onclick="javascript:fontEdit('indent')">
				<img id="indent" src="images/indent.gif" alt="" title="Indent" style="height: 20px; width: 21px; border: none;" />
				</a><a onclick="ChangeMode()">
				<img id="mode" src="images/mode.design.gif" alt="" title="Design View" style="height: 20px; width: 21px; border: none;" />
				</a></div>
<div style="background-color: #CCCCCC; width: 497px; padding-left: 3px;">
				<select id="fonts" class="select" onchange="fontEdit('fontname',this[this.selectedIndex].value)">
				<option value="Arial">Font</option>
				<option value="Arial">Arial</option>
				<option value="Courier New">Courier New</option>
				<option value="Monotype Corsiva">Monotype</option>
				<option value="Tahoma">Tahoma</option>
				<option value="Times">Times</option>
				</select>
				<select id="size" class="select" onchange="fontEdit('fontsize',this[this.selectedIndex].value)">
				<option value="0">Size</option>
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				</select>
				<select id="color" class="select" onchange="fontEdit('ForeColor',this[this.selectedIndex].value)">
				<option value="color">Color</option>
				<option style="color: black;" value="black">Black</option>
				<option style="color: red;" value="red">Red</option>
				<option style="color: blue;" value="blue">Bblue</option>
				<option style="color: green;" value="green">Green</option>
				<option style="color: #3b3b3b;" value="pink">Pink</option>
				</select> </div>
<iframe id="textEditor" style="width: 500px; height: 170px;" scrolling="no">
</iframe>

That's it, and we are done. Just run the html page and you can see a nice Rich Text Box. This code is tested in IE 8.0, Firefox 3.6.8 and Google Chrome 10.0.648.204. There are some toolbar image quality issues that you can fix at your end. So start improving Rich Text Box Editor and share it with our community over here.

This article was originally posted at http://myvsdotnetstuff.blogspot.com/feeds/posts/default

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Tarun Dudhatra
Software Developer Working in Ahmedabad, Gujarat, India
India India

I am working as a Software Engineer in Ahmedabad, Gujrat, India.

I have 12+ Years of Experience in Microsoft Technology Like Asp.Net 4.0,
C#,MVC,EntityFramework, Javascript, Crystal Reports, JQuery etc.

Find out more on :




Comments and Discussions

 
Questionbold , edit , underline not working correctly in IE 7,8,9 but working correctly in chrome Pin
Member 1036991410-Apr-14 0:30
MemberMember 1036991410-Apr-14 0:30 
QuestionNeed Help Pin
pooja1822-Jan-13 2:30
Memberpooja1822-Jan-13 2:30 
AnswerRe: Need Help Pin
Member 991960517-Mar-13 23:16
MemberMember 991960517-Mar-13 23:16 
GeneralMy vote of 5 Pin
uspatel8-Feb-12 23:19
professionaluspatel8-Feb-12 23:19 
Questionreg: iframe value in codebehind in c# Pin
dannavarapuprasad27-Dec-11 22:21
Memberdannavarapuprasad27-Dec-11 22:21 
AnswerRe: reg: iframe value in codebehind in c# Pin
Member 1036991410-Apr-14 0:24
MemberMember 1036991410-Apr-14 0:24 
Questionwant ot retreive from database [modified] Pin
Member 805020011-Aug-11 22:11
MemberMember 805020011-Aug-11 22:11 
AnswerRe: want ot retreive from database [modified] Pin
Member 1036991410-Apr-14 0:33
MemberMember 1036991410-Apr-14 0:33 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.