Fully JavaScript Enabled Editor

• Download source (C#) - 758.72 KB
• Download source (VB.NET) - 760 KB
• Download source (PHP) - 154.87 KB

Images

1. Editor

   

2. Inserting Images

   

3. Inserting Flashes

   

4. Inserting Media Files

   

5. Inserting Templates

   

6. Inserting Special Characters

   

7. Saving Templates

   

8. Inserting Links

   

9. Inserting Table

   

10. Context Menu

    

Introduction

Well, this is my sixth article. Here, I have tried a fully JavaScript enabled editor. Here I have updated it with more features.

Code

In the article, I am giving sample code. The full code is available in the zip file.

This is the updated version. I have included features like inserting images, flashes, templates, media files, special characters and saving templates. I have also included features of inserting HTML controls like button, text box, checkbox, radiobutton, submit button, reset button, select type listbox and dropdownlist, etc. You can also insert date and time in any format.

Setting Color

function setColor(colorTo,x,y)
{
    editFrame.focus();
    editFrame.document.execCommand(colorTo,true, colorArray[x][y]);
    popDivId.style.display = "none";
}

Setting Font

function setFont(fontName)
{
    editFrame.focus();
    editFrame.document.execCommand("FontName", false, fontName);
    popDivId.style.display = "none";
}

Setting Font Size

function setFontSize(fontSize)
{
    editFrame.focus();
    editFrame.document.execCommand("FontSize", false, fontSize);
    popDivId.style.display = "none";
}

Setting General Action

function doAction(action)
{
    editFrame.focus();
    if(action == "ClearAll")
    {
        editFrame.document.execCommand("SelectAll",true);
        action = "Delete";
    }
    editFrame.document.execCommand(action,true);
}

Showing Dialog Boxes

function showDialog(link,w, h)//380, 125
{
    if(link == "li")
        link = "InsertLinks.htm";
    else if(link == "sc")
        link = "SpecialChars.htm";
    var returnedTxt= showModalDialog(link,"", "dialogWidth:"+ 
		w +"px; dialogHeight:"+ h +"px; status:no; center:yes");
    editFrame.focus();
    if(returnedTxt)
    {
        var theRange = editFrame.document.selection.createRange();
        theRange.pasteHTML(returnedTxt);
    }
}

Showing Popup Windows

var cWnd;
function showInsertPopup(opt, w, h) // w=350, h=340
{
    var srcfile = "imgWindow.aspx";
    if(opt == "im")
        srcfile = "imgWindow.aspx";
    else if(opt == "fl")
        srcfile = "flashWindow.aspx";
    else if(opt == "me")
        srcfile = "mediaWindow.aspx";
    else if(opt == "tm")
        srcfile = "templateWindow.aspx";
    else if(opt == "st")
        srcfile = "saveWindow.aspx";
    else if(opt == "tb")
        srcfile = "InsertTable.htm";
    var left = (window.screen.width - parseInt(w))/2;
    var top = (window.screen.height - parseInt(h))/2;
    if(cWnd)
        cWnd.close();
    cWnd = window.open(srcfile,"", "width="+ w +",height="+ 
	h +",location=no, status=no, top="+ top +", left="+ left);
}

Setting HTML Action

function doHtmlAction(atype)
{
    editFrame.focus();
    var selectedRegion = editFrame.document.selection.createRange();
    if(atype == "lower")
        selectedRegion.text = selectedRegion.text.toLowerCase();
    else if(atype == "upper")
        selectedRegion.text = selectedRegion.text.toUpperCase();
}

History

Version 1.0

• There are only few actions. It was developed only in C#.

Version 2.0

• Included more features like inserting images, flashes, media files, templates, special characters and saving templates in the server and also locally.
• Included features of inserting HTML controls like button, text box, checkbox, radiobutton, submit button, reset button, select type listbox and dropdownlist, and you can also insert date and time in any format, etc.
• Also developed in VB.NET and PHP.

Version 3.0

• Context Menu has been introduced.
• The editor content can be used on the server side.
• Also developed in VB.NET and PHP.

Points of Interest

• Since Undo and Redo is outdated, I have removed them.
• I have included some new buttons like Heading, inserting IFrame, FieldSet, Marquee
• There were some bugs in Font Size, Font Family, Forecolor, Backcolor. These bugs have been fixed.
• As of now I am experimenting with Browser Compatability and context menus for each controls. Soon to be updated.

Conclusion

Thank you. I expect feedback from you, and you expect more from me.