Click here to Skip to main content
12,300,841 members (61,758 online)
Click here to Skip to main content
Add your own
alternative version


114 bookmarked

Fully JavaScript Enabled Editor

, 7 Sep 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Fully JavaScript enabled editor which also contains some server coding


  1. Editor


  2. Inserting Links


  3. Inserting Images


  4. Inserting Table


  5. Inserting Special Characters



Well, I have tried a fully JavaScript enabled editor. Here I have updated it with more features.


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.document.execCommand(colorTo,true, colorArray[x][y]); = "none";

Setting Font

function setFont(fontName)
    editFrame.document.execCommand("FontName", false, fontName); = "none";

Setting Font Size

function setFontSize(fontSize)
    editFrame.document.execCommand("FontSize", false, fontSize); = "none";

Setting General Action

function doAction(action)
    if(action == "ClearAll")
        action = "Delete";

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");
        var theRange = editFrame.document.selection.createRange();

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;
    cWnd =,"", "width="+ w +",height="+ 
	h +",location=no, status=no, top="+ top +", left="+ left);

Setting HTML Action

function doHtmlAction(atype)
    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


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


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


About the Author

No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
Md. Touhidul Alam Shuvo20-Jun-11 17:47
memberMd. Touhidul Alam Shuvo20-Jun-11 17:47 
GeneralMy vote of 4 Pin
Gaurav Chaurasiya20-Sep-10 8:10
memberGaurav Chaurasiya20-Sep-10 8:10 
GeneralMy vote of 4 Pin
Eric Xue (brokensnow)7-Sep-10 18:22
memberEric Xue (brokensnow)7-Sep-10 18:22 
Generalnot working IN MOZILLA Pin
Member 365136526-Feb-10 1:17
memberMember 365136526-Feb-10 1:17 
QuestionCan you provide more property for each control?? Pin
JLKEngine00827-Nov-08 22:24
memberJLKEngine00827-Nov-08 22:24 
QuestionWhy you removed Undo and Redo ??? Pin
JLKEngine00827-Nov-08 20:41
memberJLKEngine00827-Nov-08 20:41 
GeneralMy vote of 2 Pin
AxelM27-Nov-08 20:24
memberAxelM27-Nov-08 20:24 
QuestionHow can you provide context menus for each controls? Pin
JLKEngine00827-Nov-08 20:21
memberJLKEngine00827-Nov-08 20:21 
GeneralJavaScript editor Pin
Member 420697421-Oct-08 0:33
memberMember 420697421-Oct-08 0:33 
GeneralThere is some bug in your new version!! Pin
JLKEngine00816-Oct-08 6:31
memberJLKEngine00816-Oct-08 6:31 
1,In this version, undo an redo cannot use!!
2,Can you modify popomenu ? That is provide a popomenu for reach control,which can set more property for each control!! please
reference ,I hope you can made it better!!
3, can you provide datasource to each control , such as textbox,listbox,dropdown etc, please reference

4,can you provide client webservice, that is can relation to DB .

I hope you can modify it ! I Lookforward to your new version!

QuestionHI,can you provide a popmenu for each html Control?? Pin
JLKEngine00817-Sep-08 23:58
memberJLKEngine00817-Sep-08 23:58 
General[Message Removed] Pin
Mojtaba Vali8-Jun-08 17:56
memberMojtaba Vali8-Jun-08 17:56 
Questionhow to give a popmenu to textbox? [modified] Pin
JLKEngine0088-Jun-08 15:57
memberJLKEngine0088-Jun-08 15:57 
GeneralColor choosing doesn't work Pin
Jose M. Menendez Poó6-Jun-08 3:48
memberJose M. Menendez Poó6-Jun-08 3:48 
QuestionQuestion ??? Pin
Abhijit Jana15-Jan-08 2:06
memberAbhijit Jana15-Jan-08 2:06 
GeneralInternet Explorer only I assume Pin
jmcglothlin13-Jan-08 5:36
memberjmcglothlin13-Jan-08 5:36 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160525.2 | Last Updated 7 Sep 2010
Article Copyright 2008 by Saleth Prakash
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid