In this section we will add the new functions to the already created javascript file to handle the events for all the new features. They are all defined in one javascript file linked to this editor.

Listing 2

 
function Formats(style,editorId)
{
// Save the Iframe id
var finalDivId = editorId + '_content';
                  
// Set the focus back to the text
document.frames[finalDivId].focus();
                  
// Apply the new style
document.frames[finalDivId].document.execCommand(style);
                  
// Set the focus back to the text
document.frames[finalDivId].focus();
}

The above function is used by almost all the new event handlers. It takes two parameters; the first is the style to be applied, for example Copy, Paste, etc; the second is the editor id. We used the same function used before (execCommand) to apply the transformation.

Listing 3

function SetBorders(id)
{
// set the borders to the emoticons icons onmouseover
var imgBorder = document.getElementById(id);
imgBorder.style.borderStyle = "solid";
imgBorder.style.borderWidth = "thin";
imgBorder.style.borderColor = "#688B9A";
}

The above function is being called when the insert emoticons div layer is shown. When the mouse is over an emotion, what we do is call this function which will set the borders for the table cell. In this way, it will be obvious for the user to see that he is over a specific emoticon. Notice the x image we added, it allows the user to close the div layer if he does not want to add any emoticons.

Figure 2

Listing 4

function ClearBorders(id)
{
// Clear the borders of the emoticons icons onmouseout event
var imgBorder = document.getElementById(id);
imgBorder.style.borderStyle = "solid";
imgBorder.style.borderWidth = "thin";
imgBorder.style.borderColor = "white";
}

The above function will be called when the mouse is out of a specific emotion to clear its borders.

Listing 5

function SetImage(editorId,path,e)
{
// Get the click location
var height = e.clientY + parseInt('5');
// Get the height inside the clicked image
var offsetHeight = parseInt(e.offsetY);
height = height - offsetHeight;
                  
// Get the click location(width)
var width = e.clientX
// Get the width inside the clicked image
var offsetWidth = parseInt(e.offsetX);
width = width - offsetWidth;
                  
// Save the iframe id
var finalDivId = editorId + '_content';
path = unescape(path);
                        
// Insert an image from the users Computers. 
window.open('UploadImages.aspx?path=' + path +
 '&f=' + finalDivId,null,'width=500px,height=50px,titlebar=no,menubar=no,statusbar=no,toolbar=no,top='
 + height + 'left=' + width );             
                        
}

For the insert images new feature, we created a new webform called UploadImages.aspx. This form will be open when the user clicks on insert images icon to allow the user to select an image from his/her computer and upload it into the server in order to be able to insert it into the text editor. It contains two other fields to let the user specify the width and height of the image he/she wants to insert after it was uploaded. Below is a picture of the text editor when this new window is being opened.

Figure 3

The user has the ability to browse his/her computer to select an image and in its code behind and we are handling the upload part into the web server. I gave a great option for the administrator to set the directory on the web server where the image is going to be uploaded. I will explain it in detail in the code behind part. The maximum number of digits of the height and width properties is 3. The minimum value for the height property is 100 px and the maximum value of the width property is 150 px; as you can see they are their default values.

Listing 6

function insertsImage(imageurl,editorId,height,width)
{
opener.document.frames[editorId].focus();
            
if(imageurl != "" | editorId!= "")
{
imageurl = unescape(imageurl);
var imageurl = imageurl + '"'  + "width=" + width + "px" + " " + "height="+ height + "px";
  // Save the iframe id
opener.document.frames[editorId].document.execCommand('InsertImage',false,imageurl);
}
opener.document.frames[editorId].focus();
}

This function will be called when the user clicks on insert image. In its click event we are uploading the file and then inserting the image through javascript into the text editor with the specified width and height.

Figure 5