In this section we will write functions for handling the
events raised by the user. First, we will define global variables. Each of
these variables has its own functionality, but most are created to store a
value indicating if an icon was previously clicked or no by default its value
is equal to No. Only one variable has another purpose, this variable is called
(sourceText) and will be equal to the text entered by the user.
Listing 2
var sourceText= '';
var imgStatusBold = 'No';
var imgStatusItalic = 'No';
var imgStatusUnderLine = 'No';
var imgStatusLeft = 'No';
var imgStatusCenter = 'No';
var imgStatusRight = 'No';
var imgStatusRemoveF= 'No';
var imgStatusWCount = 'No';
var imgStatusInsertL = 'No';
Based on the value of the above variables, when the user
clicks on an icon, if the specific variable's value is equal to “Yes” it indicates
that this icon is not as the equal to the one loaded when the user control has
been loaded and then directly we change the icon to its first status and set
its variable to “No.” If the value was “No” then we will change the icon and
its proper variable to “Yes.”
Three common functions are called onmouseover,
onmouseup, and onclick. Onmouseover, a function (ChangeImg()), is used to change
the icon when the user places his mouse at a certain icon. This function takes
2 parameters (icon id and the new icon name). Note that the toolbar icons are
contained in a folder called "Images" under the root element of the
web application.
Listing 3
function ChangeImg(id, imgsrc)
{
var imgSrc = "Images/" + imgsrc;
document.getElementById(id).src = imgSrc;
}Onmouseup function is used to
return the icon to its previous state when the mouse leaves a specific icon; it
takes 3 parameters (icon id, new icon name, and a variable).
Listing 4
function ReturnImg(id, imgsrc, ownVar)
{
if(ownVar == 'No')
{
var imgSrc = "Images/" + imgsrc;
document.getElementById(id).src = imgSrc;
}
}The third parameter is used to indicate either this icon was
selected or not. Its default value is No.
Onclick function is called to perform a specific action. A
single javascript method is used for all the actions, plus for each action a
specific criteria.
Listing 5
document.frames['HamHtmlEditor1_content'].document.execCommand('JustifyLeft',false,null);The above method is used to align the text entered by the
user to the left. ExecCommand is used to execute a
command on a document. It consists of predefined functions which are used to
manipulate the page layout directly into the browser. Do not use it until the
page has finished loading.
Listing 6
function MakeBold(boldover, bold)
{
var img = document.getElementById('Bold')
var imgBold = "Images/" + boldover
var imgNotBold = "Images/" + bold
img.src = imgBold;
if(imgStatusBold == 'Yes')
{
imgStatusBold='No';
img.src = "Images/" + bold;
}
else
{
imgStatusBold= 'Yes'
}
document.frames['HamHtmlEditor1_content'].document.execCommand('bold',false,null);
document.frames['HamHtmlEditor1_content'].focus();
}The function above is used to format the text entered by the
user as bold. When he clicks on this icon, we should change it to another one.
Set the global variable for this action to “Yes” which means that it has been
selected. We will use this variable each time the user clicks on it to see if
it has been previously selected or no, and then we will make the transformation
to the text into bold. It takes 2 parameters, the first is to store the
bold-over image location (url) and the second is to store the bold image
location (url). The same concept is used to make the text Italic and
underlined.
To apply alignments into the text, we use the same as the
MakeBold() function, but instead, the 3 alignment functionalities work in a
parallel way which means that if a specific alignment is selected all others
will be unselected and will retain their original status.
For a complete reference about the execCommand command list
visit http://www.course.com/downloads/newperspectives/crweb3/documents/dhtml_t02.html.
Now we will create a function that counts how many words the
user has entered. A variable is defined with default value equal to 0. Another
variable is defined that holds the text entered. We will split the spaces in
this variable, add the splitting results to an array and check each element
length in the array. If it is equal to zero then it is a space, else add 1 to
the specific variable. After this stage we will set the value of the textbox to
the count variable.
Listing 7
var wordCount = document.frames['HamHtmlEditor1_content'].document.body.innerText;
var count = 0;
countWithSpace = wordCount.replace('\n', '');
countWithoutSpaces = countWithSpace.split(' ');
for(i=0;i<countWithoutSpaces.length;i++)
{
if(countWithoutSpaces[i].length>0)
{
count +=1;
}
window.parent.document.getElementById('HamHtmlEditor1_TxtCount').value = count;
}When the "Remove Formatting" image is clicked, we
call a javascript function which sends "RemoveFormat" to the
execCommand to remove all the formats applied to the text. It is very useful if
a user wants to remove all the formats that he already applied into the text.
Listing 8
function RemoveFormating()
{
document.frames['HamHtmlEditor1_content'].document.execCommand('RemoveFormat');
document.frames['HamHtmlEditor1_content'].focus();
}"Undo" & "Redo" are done the same as the above javascript
function, but they send "undo" or "redo" to the execCommand
to undo or redo the user action. It takes 1 parameter which is the execCommand
function name.
Listing 9
function Formats (style)
{
document.frames['HamHtmlEditor1_content'].document.execCommand(style);
document.frames['HamHtmlEditor1_content'].focus();
}When the user clicks on "Insert emoticons" icon,
we will show the third div layer placed directly after this icon which contains
all the emoticons images. When doing this we have to use Javascript.
Listing 10
function ShowDiv(images)
{
var div = document.getElementById(images);
if(div.style.display == 'block')
div.style.display = 'none';
else
div.style.display = 'block';
}Figure2: Shows the editor when the "insert emoticons"
is clicked.
When the user clicks on any emoticon inside the third div
layer, another javascript function is called to insert that image and to place
the cursor back to the editor. This method takes 3 parameters. The first
parameter is passed to execCommand that inserts the image into the document
(insertimage), the second is the image location (url), and the third is the id
of the div layer. Note that the emoticons are placed inside a folder called
"Emoticons" under the root element of the web application.
Listing 11
function insertImages(style,url,images)
{
document.getElementById(images).style.display = 'none'
document.frames['HamHtmlEditor1_content'].focus();
HamHtmlEditor1_content.document.execCommand(style,'',url)
document.frames['HamHtmlEditor1_content'].focus();
}When the "View as HTML"
image is clicked, the second div layer is shown and the first layer is hidden.
The "readonly" property of this div layer is set to "true"
which means that the user at runtime cannot edit it, then we will get the HTML
code and insert it into that div layer.
Listing 12
function TransformtoHtml()
{
document.getElementById('HamHtmlEditor1_Div2').style.display = 'block';
document.getElementById('HamHtmlEditor1_Div2').innerText =
document.frames['HamHtmlEditor1_content'].document.body.innerHTML;
}When the "Design view"
image is clicked, the third div layer (containing the HTML code) is just
hidden.
Listing 13
function TransformToText()
{
document.getElementById('HamHtmlEditor1_Div2').style.display = 'none';
}The dropdown lists are used to let the user selects the
predefined data entered to manipulate the text.
The first one is used to change the font size; sizes may
vary from 1 (10 pt) to 7 (22 pt). We will handle the onclick event by calling a
javascript function. This function gets the user selected from the dropdown
list and sends it as a third parameter to the execCommand command. The first
parameter is the FontSize, in which you are telling this command to execute the
FontSize function with its specific size. Note that the font sizes in the
dropdown list are predefined in the user control HTML code created earlier.
Listing 14
function ChangeFont()
{
var fontSize = document.getElementById('FontDropDownonchange');
document.frames['HamHtmlEditor1_content'].document.execCommand(
'FontSize',0,fontSize.options[fontSize.selectedIndex].text);
document.frames['HamHtmlEditor1_content'].focus();
}The code below is used to change the font name; the first
parameter of the execCommand command takes fontname as first parameter, the
second is false or 0, and the third is the user’s selection.
Listing 15
function ChangeFontName()
{
var fontName = document.getElementById("FontFamilyName");
document.frames['HamHtmlEditor1_content'].document.execCommand(
'FontName',false, document.frames['HamHtmlEditor1_content'].focus();
}The third is used to change the font color; the colors are
predefined so if you want to add more colors you can modify the HTML code of
this dropdown list.
Listing 16
function ChangeFontColor()
{
var fontColor = document.getElementById("Color");
document.frames['HamHtmlEditor1_content'].document.execCommand(
'ForeColor',false,fontColor.options[fontColor.selectedIndex].text);
document.frames['HamHtmlEditor1_content'].focus();
}The final function will assign the text entered by the user
to a hidden input HTML element and store its specific HTML code to another
hidden HTML element. It is called when the editor loses the focus (onblur)
event of the iframe containing the HTML page. In this way, we can use the two
properties created as you will see in the next section to get the hidden inputs
values from the code behind.
Listing 17
function CloneText()
{
document.getElementById('HamHtmlEditor1_ContentTxt').innerText
= document.frames['HamHtmlEditor1_content'].document.body.innerText;
document.getElementById('HamHtmlEditor1_ContentHtml').value=
document.frames['HamHtmlEditor1_content'].document.body.outerHTML;
}After completing this stage, you will have the javascript
file ready; all you need to do now is to link it to the page where you want to
use the user control by adding the below code in the <head> tag.
<script src="HTMLEditor.js"
language="javascript" type="text/javascript></script>
If you want to debug the code included in the javascript,
add the word "debugger;" at the beginning of the code. In this way
the compiler will start the debugging mode. Or you can go to your internet
explorer options, navigate to Advanced, unselect the disable script debugging
(internet explorer), unselect disable script debugging (other) and now add your
breakpoints.
