Fully JavaScript Enabled Editor

• Download source (C#) - 598.52 KB
• Download source (VB.NET) - 602.71 KB
• Download source (PHP) - 597.25 KB

Images

1. Editor

   

2. Inserting Links

   

3. Inserting Images

   

4. Inserting Table

   

5. Inserting Special Characters

   

Introduction

Well, 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.

I have planned to release this editor as a product with more advanced features. So as of now for demo purposes, I have shown inserting links, images, table and special characters. All other features like inserting flash, media files, templates, saving templates and inserting all major HTML controls and context menu for the editor and for the controls and browser compatibility and handling postback events will be available in the licensed version.

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 = "InsertLink.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 == "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();
}

Points of Interest

• Since Undo and Redo are again included
• Also developed in VB.NET and PHP
• Bugs in Font Size, Font Family, Forecolor, Backcolor are fixed

Conclusion

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