Click here to Skip to main content
15,893,564 members
Articles / Web Development / HTML

Fully JavaScript Enabled Editor

Rate me:
Please Sign up or sign in to vote.
4.60/5 (33 votes)
7 Sep 2010CPOL1 min read 65.8K   2.1K   116  
Fully JavaScript enabled editor which also contains some server coding
  • editorvbnet.zip
    • EditorVBNet
      • Default.aspx
      • Default.aspx.vb
      • editorimages
        • BackColor.gif
        • Bold.gif
        • ButtonDesign.gif
        • ButtonHtml.gif
        • ButtonPreview.gif
        • close.gif
        • ConvertToLower.gif
        • ConvertToUpper.gif
        • Copy.gif
        • Cut.gif
        • Delete.gif
        • Delete2.gif
        • Font.gif
        • FontSize.gif
        • ForeColor.gif
        • FormatCodeBlock.gif
        • ImageMapDialog.gif
        • Indent.gif
        • InsertDate.gif
        • InsertHorizontalRule.gif
        • InsertOrderedList.gif
        • InsertSymbol.gif
        • InsertTable.gif
        • InsertTime.gif
        • InsertUnorderedList.gif
        • Italic.gif
        • JustifyCenter.gif
        • JustifyFull.gif
        • JustifyLeft.gif
        • JustifyRight.gif
        • LinkManager.gif
        • Outdent.gif
        • Paste.gif
        • Print.gif
        • Redo.gif
        • RemoveFormat.gif
        • SelectAll.gif
        • StrikeThrough.gif
        • Subscript.gif
        • Superscript.gif
        • Thumbs.db
        • toolbarstart.gif
        • Underline.gif
        • Undo.gif
        • zoomInIcon.gif
        • zoomOutIcon.gif
      • EditorScript.js
      • EditorStyle.css
      • imgWindow.aspx
      • imgWindow.aspx.vb
      • InsertLink.htm
      • InsertTable.htm
      • NEditor.ascx
      • NEditor.ascx.vb
      • SpecialChars.htm
      • uploadsDir
        • imagefiles
          • ball.gif
          • dog.jpg
          • dolphin.jpg
          • eye.jpg
          • image004.jpg
          • image009.jpg
          • mob1.jpg
          • Thumbs.db
          • WATERsky.jpg
  • editorphp.zip
    • EditorPHP
      • default.php
      • editorimages
        • BackColor.gif
        • Bold.gif
        • ButtonDesign.gif
        • ButtonHtml.gif
        • ButtonPreview.gif
        • close.gif
        • ConvertToLower.gif
        • ConvertToUpper.gif
        • Copy.gif
        • Cut.gif
        • Delete.gif
        • Delete2.gif
        • Font.gif
        • FontSize.gif
        • ForeColor.gif
        • FormatCodeBlock.gif
        • ImageMapDialog.gif
        • Indent.gif
        • InsertDate.gif
        • InsertHorizontalRule.gif
        • InsertOrderedList.gif
        • InsertSymbol.gif
        • InsertTable.gif
        • InsertTime.gif
        • InsertUnorderedList.gif
        • Italic.gif
        • JustifyCenter.gif
        • JustifyFull.gif
        • JustifyLeft.gif
        • JustifyRight.gif
        • LinkManager.gif
        • Outdent.gif
        • Paste.gif
        • Print.gif
        • Redo.gif
        • RemoveFormat.gif
        • SelectAll.gif
        • StrikeThrough.gif
        • Subscript.gif
        • Superscript.gif
        • Thumbs.db
        • toolbarstart.gif
        • Underline.gif
        • Undo.gif
        • zoomInIcon.gif
        • zoomOutIcon.gif
      • EditorScript.js
      • EditorStyle.css
      • imgWindow.php
      • InsertLink.htm
      • InsertTable.htm
      • NEditor.php
      • SpecialChars.htm
      • uploadsDir
        • imagefiles
          • ball.gif
          • dog.jpg
          • dolphin.jpg
          • eye.jpg
          • image004.jpg
          • image009.jpg
          • mob1.jpg
          • Thumbs.db
          • WATERsky.jpg
  • editorcs.zip
    • EditorCS
      • Default.aspx
      • Default.aspx.cs
      • editorimages
        • BackColor.gif
        • Bold.gif
        • ButtonDesign.gif
        • ButtonHtml.gif
        • ButtonPreview.gif
        • close.gif
        • ConvertToLower.gif
        • ConvertToUpper.gif
        • Copy.gif
        • Cut.gif
        • Delete.gif
        • Delete2.gif
        • Font.gif
        • FontSize.gif
        • ForeColor.gif
        • FormatCodeBlock.gif
        • ImageMapDialog.gif
        • Indent.gif
        • InsertDate.gif
        • InsertHorizontalRule.gif
        • InsertOrderedList.gif
        • InsertSymbol.gif
        • InsertTable.gif
        • InsertTime.gif
        • InsertUnorderedList.gif
        • Italic.gif
        • JustifyCenter.gif
        • JustifyFull.gif
        • JustifyLeft.gif
        • JustifyRight.gif
        • LinkManager.gif
        • Outdent.gif
        • Paste.gif
        • Print.gif
        • Redo.gif
        • RemoveFormat.gif
        • SelectAll.gif
        • StrikeThrough.gif
        • Subscript.gif
        • Superscript.gif
        • Thumbs.db
        • toolbarstart.gif
        • Underline.gif
        • Undo.gif
        • zoomInIcon.gif
        • zoomOutIcon.gif
      • EditorScript.js
      • EditorStyle.css
      • imgWindow.aspx
      • imgWindow.aspx.cs
      • InsertLink.htm
      • InsertTable.htm
      • NEditor.ascx
      • NEditor.ascx.cs
      • SpecialChars.htm
      • uploadsDir
        • imagefiles
          • ball.gif
          • dog.jpg
          • dolphin.jpg
          • eye.jpg
          • image004.jpg
          • image009.jpg
          • mob1.jpg
          • Thumbs.db
          • WATERsky.jpg
  • editor_php.zip
    • editor_php
      • default.php
      • editorimages
        • BackColor.gif
        • Bold.gif
        • ButtonDesign.gif
        • ButtonHtml.gif
        • ButtonPreview.gif
        • close.gif
        • ConvertToLower.gif
        • ConvertToUpper.gif
        • Copy.gif
        • Cut.gif
        • Delete.gif
        • Delete2.gif
        • Font.gif
        • FontSize.gif
        • ForeColor.gif
        • ImageMapDialog.gif
        • Indent.gif
        • InsertDate.gif
        • InsertFlash.gif
        • InsertFormButton.gif
        • InsertFormCheckbox.gif
        • InsertFormFileUpload.gif
        • InsertFormForm.gif
        • InsertFormHidden.gif
        • InsertFormPassword.gif
        • InsertFormRadio.gif
        • InsertFormReset.gif
        • InsertFormSelect.gif
        • InsertFormSelect2.gif
        • InsertFormSubmit.gif
        • InsertFormText.gif
        • InsertFormTextarea.gif
        • InsertHorizontalRule.gif
        • InsertMedia.gif
        • InsertOrderedList.gif
        • InsertSymbol.gif
        • InsertTable.gif
        • InsertTemplate.gif
        • InsertTime.gif
        • InsertUnorderedList.gif
        • Italic.gif
        • JustifyCenter.gif
        • JustifyFull.gif
        • JustifyLeft.gif
        • JustifyRight.gif
        • LinkManager.gif
        • Outdent.gif
        • Paste.gif
        • Print.gif
        • Redo.gif
        • RemoveFormat.gif
        • Save.gif
        • SaveLocal.gif
        • SelectAll.gif
        • StrikeThrough.gif
        • Subscript.gif
        • Superscript.gif
        • Thumbs.db
        • toolbarstart.gif
        • Underline.gif
        • Undo.gif
        • zoomInIcon.gif
        • zoomOutIcon.gif
      • EditorScripts.js
      • EditorStyle.css
      • flashWindow.php
      • imgWindow.php
      • InsertLinks.htm
      • InsertTable.htm
      • mediaWindow.php
      • NEditor.php
      • saveWindow.php
      • SpecialChars.htm
      • templateWindow.php
      • uploadsDir
        • flashfiles
        • imagefiles
          • Thumbs.db
        • mediafiles
          • Thumbs.db
        • templatefiles
  • editor_vb.net.zip
  • Editor.zip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Insert Table</title>
    <link href="EditorStyle.css" rel="stylesheet" type="text/css" />

    <script language="javascript">
        function setTable()
        {
            var rows = document.getElementById("txtRows").value;
            var cols = document.getElementById("txtColumns").value;
            var htmlTableStr = "<table";
            if(rows != "" && cols != "")
            {
                var topWind = window.opener;
                topWind.editFrame.focus();
                var tCap = document.getElementById("txtCaption").value;
                var tWid = document.getElementById("txtWidth").value;
                var tHei = document.getElementById("txtHeight").value;
                var tCP = document.getElementById("txtCellPadding").value;
                var tCS = document.getElementById("txtCellSpacing").value;
                var tBor = document.getElementById("txtBorder").value;
                var tBC = document.getElementById("selCollapse").value;
                if(tWid)
                    htmlTableStr += " width='"+ tWid + "'";
                if(tHei)
                    htmlTableStr += " height='"+ tHei + "'";
                if(tBor)
                    htmlTableStr += " border='"+ tBor + "'";
                if(tCP)
                    htmlTableStr += " cellpadding='"+ tCP + "'";
                if(tCS)
                    htmlTableStr += " cellspacing='"+ tCS + "'";
                if(tBC)
                    htmlTableStr += " style='border-collapse:" + tBC + "'";
                htmlTableStr += ">";
                if(tCap)
                    htmlTableStr += "<caption>"+tCap+"</caption>";
                for(i=0;i<parseInt(rows);i++)
                {
                    htmlTableStr += "<tr>";
                    for(j=0;j<parseInt(cols);j++)
                    {
                        htmlTableStr += "<td>&nbsp;</td>";
                    }
                    htmlTableStr += "</tr>";
                }
                htmlTableStr += "</table>"; 
                var selectedRegion = topWind.editFrame.document.selection.createRange();
                selectedRegion.pasteHTML(htmlTableStr);
                window.close();
            }
            else
            {
                alert("Please enter number of Rows and Columns");
            }
        }
        
    </script>

</head>
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0" class='txtStyle'
    bgcolor='#fffcd1'>
    <form id="form1" runat="server">
    <table align="Center" width="90%" cellpadding="2" cellspacing="2">
        <tr>
            <td align="center">
                INSERT TABLE
            </td>
        </tr>
        <tr>
            <td align="center">
                <table width="95%" cellpadding="2" cellspacing="2">
                    <tr>
                        <td align="left" class="txtStyle">
                            Rows:
                        </td>
                        <td align="left" class="txtStyle">
                            <input type="text" class="txtStyle" id="txtRows" style="width: 25px" value="2" />
                        </td>
                        <td align="left" class="txtStyle">
                            Columns:
                        </td>
                        <td align="left" class="txtStyle">
                            <input type="text" class="txtStyle" id="txtColumns" style="width: 25px" value="2" />
                        </td>
                    </tr>
                    <tr>
                        <td align="left" colspan="4">
                            Caption:
                            <input type="text" class="txtStyle" id="txtCaption" style="width: 220px" />
                        </td>
                    </tr>
                    <tr>
                        <td align="left" class="txtStyle">
                            Width:
                        </td>
                        <td align="left" class="txtStyle">
                            <input type="text" class="txtStyle" id="txtWidth" style="width: 25px" />
                        </td>
                        <td align="left" class="txtStyle">
                            Height:
                        </td>
                        <td align="left" class="txtStyle">
                            <input type="text" class="txtStyle" id="txtHeight" style="width: 25px" />
                        </td>
                    </tr>
                    <tr>
                        <td align="left" class="txtStyle">
                            CellPadding:
                        </td>
                        <td align="left" class="txtStyle">
                            <input type="text" class="txtStyle" id="txtCellPadding" style="width: 25px" />
                        </td>
                        <td align="left" class="txtStyle">
                            CellSpacing:
                        </td>
                        <td align="left" class="txtStyle">
                            <input type="text" class="txtStyle" id="txtCellSpacing" style="width: 25px" />
                        </td>
                    </tr>
                    <tr>
                        <td align="left" class="txtStyle">
                            Border:
                        </td>
                        <td align="left" class="txtStyle">
                            <input type="text" class="txtStyle" id="txtBorder" style="width: 25px" value="1" />
                        </td>
                        <td align="left" class="txtStyle">
                            BorderCollapse:
                        </td>
                        <td align="left" class="txtStyle">
                            <select id="selCollapse" class="txtStyle" style="width: 80px">
                                <option value="0" selected>--Select--</option>
                                <option value="collapse">Collapse</option>
                                <option value="separate">Separate</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="right" style="padding-right:15px">
                <button id="btnOK" class="buttonStyle2" onclick="setTable()">
                    OK</button>&nbsp;
                <button id="btnCancel" class="buttonStyle2" onclick="window.close()">
                    Cancel</button>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

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


Written By
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions