Click here to Skip to main content
5,788,212 members and growing! (19,323 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: 11,776
Bookmarked: 71 times
Announcements
Loading...



Search    
Advanced Search
Sitemap
18 votes for this Article.
Popularity: 5.16 Rating: 4.11 out of 5
0 votes, 0.0%
1
3 votes, 16.7%
2
0 votes, 0.0%
3
5 votes, 27.8%
4
10 votes, 55.6%
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


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
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 12 of 12 (Total in Forum: 12) (Refresh)FirstPrevNext
GeneralCan you provide more property for each control??memberJLKEngine00823:24 27 Nov '08  
GeneralWhy you removed Undo and Redo ???memberJLKEngine00821:41 27 Nov '08  
GeneralMy vote of 2memberAxelM21:24 27 Nov '08  
GeneralHow can you provide context menus for each controls?memberJLKEngine00821:21 27 Nov '08  
GeneralJavaScript editormemberMember 42069741:33 21 Oct '08  
GeneralThere is some bug in your new version!!memberJLKEngine0087:31 16 Oct '08  
GeneralHI,can you provide a popmenu for each html Control??memberJLKEngine0080:58 18 Sep '08  
General[Message Removed]memberMojtaba Vali18:56 8 Jun '08  
Generalhow to give a popmenu to textbox? [modified]memberJLKEngine00816:57 8 Jun '08  
GeneralColor choosing doesn't workmemberJose M. Menendez Poó4:48 6 Jun '08  
GeneralQuestion ???memberAbhijit Jana3:06 15 Jan '08  
GeneralInternet Explorer only I assumememberjmcglothlin6: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
Web10 | Advertise on the Code Project