Click here to Skip to main content
6,305,776 members and growing! (15,585 online)
Email Password   helpLost your password?
Web Development » Client side scripting » General     Intermediate License: The Code Project Open License (CPOL)

Fully JavaScript Enabled Editor

By Saleth Prakash

Fully JavaScript enabled editor which also contains some server coding
C#, VB, Javascript, HTML, Dev
Posted:9 Jan 2008
Updated:27 Nov 2008
Views:14,688
Bookmarked:81 times
Announcements
Loading...
 
Search    
Advanced Search
printPrint   Broken Article?Report       add Share
  Discuss Discuss   Recommend Article Email
20 votes for this article.
Popularity: 5.42 Rating: 4.16 out of 5

1
3 votes, 15.0%
2

3
5 votes, 25.0%
4
12 votes, 60.0%
5

Images

  1. Editor

    editor.JPG

  2. Inserting Images

    image.JPG

  3. Inserting Flashes

    flash.JPG

  4. Inserting Media Files

    media.JPG

  5. Inserting Templates

    temp.JPG

  6. Inserting Special Characters

    specchars.JPG

  7. Saving Templates

    svtemp.JPG

  8. Inserting Links

    links.JPG

  9. Inserting Table

    table.JPG

  10. Context Menu

    contextmenu.jpg

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Saleth Prakash


Member
I have completed my post graduation in Computer Applications. I started my career in developing mobile games in J2ME. Then i shifted to core java and involved in developing search engine optimizations tools. Then i got interest in .NET technologies and now i am involved in web applications development. Now working as a senior software developer in a software concern in Chennai. My work of interests are ASP.NET, C#.NET, VB.NET.
Occupation: Software Developer (Senior)
Location: India India

Other popular Client side scripting articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
 Msgs 1 to 12 of 12 (Total in Forum: 12) (Refresh)FirstPrevNext
GeneralCan you provide more property for each control?? PinmemberJLKEngine00823:24 27 Nov '08  
GeneralWhy you removed Undo and Redo ??? PinmemberJLKEngine00821:41 27 Nov '08  
GeneralMy vote of 2 PinmemberAxelM21:24 27 Nov '08  
GeneralHow can you provide context menus for each controls? PinmemberJLKEngine00821:21 27 Nov '08  
GeneralJavaScript editor PinmemberMember 42069741:33 21 Oct '08  
GeneralThere is some bug in your new version!! PinmemberJLKEngine0087:31 16 Oct '08  
GeneralHI,can you provide a popmenu for each html Control?? PinmemberJLKEngine0080:58 18 Sep '08  
General[Message Removed] PinmemberMojtaba Vali18:56 8 Jun '08  
Generalhow to give a popmenu to textbox? [modified] PinmemberJLKEngine00816:57 8 Jun '08  
GeneralColor choosing doesn't work PinmemberJose M. Menendez Poó4:48 6 Jun '08  
GeneralQuestion ??? PinmemberAbhijit Jana3:06 15 Jan '08  
GeneralInternet Explorer only I assume Pinmemberjmcglothlin6:36 13 Jan '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 27 Nov 2008
Editor: Sean Ewington
Copyright 2008 by Saleth Prakash
Everything else Copyright © CodeProject, 1999-2009
Web12 | Advertise on the Code Project