How To Generate Rich Text Box using Javascript

CodeProject

Screenshot for Editor

Rich Text entered into RTB

HTML in RTB

Download project

Introduction

If you are developing any site and in you site some section need user input in Richtext format then you can't use textarea 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 not Dll limitation.

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

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

<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>

Add this line too in head section

<script type="text/javascript" src="Js/encoder.js"></script>

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

<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 Fire Fox.

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

<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

<body onload="Set()">

And code is as below.

<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, Fire Fox 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.

Count Down Timer Using JavaScript.

Download Sample Timer

Sometimes we have seen on some site that they are showing countdown timer for some particular event. Main purpose of countdown timer is to calculate reaming time for that event in reverse direction.

It will mostly display in Days-Hours-Minutes and Seconds

We can change this format and also look and feel for countdown timer.

I have created one small countdown timer using JavaScript language just go through and let me know if you need more clarification on it.

 Screen shot of Timer

After 40 seconds it will show like below figure.

Here is the code and it's explanation

           

<html>

<head></head>

<style type="text/css">

.head{font-weight:bold;font-size:25px;color:#00f;}

.text{font-weight:normal;font-size:20px;color:#222222;}

</style>

<body>

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">

<!--

// Assign future date here in format of

dateFuture = new Date(2011,4,4,12,0,0);//Year-Month-Day-Hour-Minute-Seconds. Month starts from zero, 0 for jan and 11 for dec

function GetCount(){

        dateNow = new Date();//grab current date

                        amount = dateFuture.getTime() - dateNow.getTime();//calc milliseconds between dates

                        delete dateNow;

        // time is already past

        if(amount < 0){

                document.getElementById('countbox').innerHTML="Now!";

        }

        // date is still good

        else{

                days=0;hours=0;mins=0;secs=0;out="";

                amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

                days=Math.floor(amount/86400);//days

                amount=amount%86400;

                hours=Math.floor(amount/3600);//hours

                amount=amount%3600;

                mins=Math.floor(amount/60);//minutes

                amount=amount%60;

                secs=Math.floor(amount);//seconds

                if (days != 0)

                {

                    out += "<span class='head'>"+days + "</span> <span class='text'>day" + ((days != 1) ? "s" : "") + ",</span> ";

                }

                if (days != 0 || hours != 0)

                {

                    out += "<span  class='head'>"+hours + "</span> <span class='text'>hour" + ((hours != 1) ? "s" : "") + ", </span>";

                }

                if (days != 0 || hours != 0 || mins != 0)

                {

                    out += "<span  class='head'>"+mins + "</span> <span class='text'>minute" + ((mins != 1) ? "s" : "") + ", </span>";

                }

                out += "<span  class='head'>"+secs +"</span> <span class='text'>seconds</span>";

                document.getElementById('countbox').innerHTML=out;

                //This function will call every one second, it's second param is milisecond

                                                setTimeout("GetCount()", 1000);

        }

}

window.onload=function(){GetCount();}//call when everything has loaded

//-->

</script>

<div id="countbox"></div>

</body>

</html>

This is the output of above code

Add Cross Tab Report in Crystal Reports Tutorials Part-5

This post is permanently moved at below URL

http://publisharticle.in/KB/CBCE292653D34/Add-Cross-Tab-Report-in-Crystal-Reports-Tutorials-Part-5

Add Report inside Reports Tutorial Part - 4

This post is permanently moved at below URL

http://publisharticle.in/KB/B8470C2583D64/Add-Report-inside-Reports-Tutorial-Part---4

Add Chart in Crystal Reports. Tutorial part - 3

This post is permanently moved at below URL

http://publisharticle.in/KB/65617D7538934/Add-Chart-in-Crystal-Reports-Tutorial-part---3

Groups in Crystal Report. Tutorial part - 2

This post is permanently moved at below URL

http://publisharticle.in/KB/C8EA8904E3514/Groups-in-Crystal-Report-Tutorial-part---2

Simple report using Crystal Reporting Tool. Tutorial part - 1

This post is permanently moved at below URL

http://publisharticle.in/kb/F50BB8763CCC4/Simple-report-using-Crystal-Reporting-Tool-Tutorial-part---1

Generate a report using Crystal Reports in Visual Studio 2010 tutorials.

This post is permanently moved at below URL

http://publisharticle.in/kb/1F7271EF64794/Generate-a-report-using-Crystal-Reports-in-Visual-Studio-2010-tutorials

How to remove dots signs viewed instead of spaces(White Space)?

Hi today I was developing my project and by mistake I pressed some combination of the key and VS replaces all the spaces with dots, like below figure

I have tried a lot to remove it but it took long time for me.
So I thought let me write a post about how to show/hide white space character from .cs file.











We can do it by 2 ways.

1. From Menu
Go To Edit → Advance → View White Space
Here is the screen shot

I have edited this images because it was very large.

And

Using Short Cuts.

There are two short cuts for this issue

1. Ctrl + R + W
2. Ctrl + E + S