Click here to Skip to main content
15,886,791 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.5K   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
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imgWindow.aspx.cs" Inherits="imgWindow" %>

<!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 Image</title>
    <link href="EditorStyle.css" rel="stylesheet" type="text/css" />

    <script language="javascript">
        function chkFile()
        {
            var filupload = document.getElementById("<%= imgUpload.ClientID %>").value;
            if(filupload == "")
            {
                alert("Please select a file");
                return false;
            }    
            else
            {
                if(filupload.lastIndexOf(".gif") == -1 && filupload.lastIndexOf(".GIF") == -1 && filupload.lastIndexOf(".jpg") == -1 && filupload.lastIndexOf(".JPG") == -1 && filupload.lastIndexOf(".bmp") == -1 && filupload.lastIndexOf(".BMP") == -1 && filupload.lastIndexOf(".png") == -1 && filupload.lastIndexOf(".PNG") == -1)
                {
                    alert("The File you selected is not a IMAGE");
                    return false;
                }
            }            
        }
   
    
        var imgTag;
        function loadImg(imgName)
        {            
            imgTag = "<img src='uploadsDir/imagefiles/" + imgName + "'";
            document.getElementById("imgDiv").innerHTML = imgTag + " width='150' height='150' />";
        }
        
        function setImage()
        {
            if(imgTag)
            {
                var topWind = window.opener;
                topWind.editFrame.focus();
                var iWid = document.getElementById("imgWidth").value;
                var iHei = document.getElementById("imgHeight").value;
                var iBor = document.getElementById("txtBorder").value;
                var iAlt = document.getElementById("txtAltText").value;
                var iHS = document.getElementById("txtHSpace").value;
                var iVS = document.getElementById("txtVSpace").value;
                var iAlign = document.getElementById("selAlign").value;
                if(iWid)
                    imgTag += " width='"+ iWid + "'";
                if(iHei)
                    imgTag += " height='"+ iHei + "'";
                if(iBor)
                    imgTag += " border='"+ iBor + "'";
                if(iAlt)
                    imgTag += " alt='"+ iAlt + "'";
                if(iHS)
                    imgTag += " hspace='"+ iHS + "'";
                if(iVS)
                    imgTag += " vspace='"+ iVS + "'";
                if(iAlign != "0")
                    imgTag += " align='"+ iAlign + "'";
                var selectedRegion = topWind.editFrame.document.selection.createRange();
                selectedRegion.pasteHTML(imgTag + " />");
                window.close();
            }
            else
            {
                alert("You have not selected any image");
            }
        }
        
    </script>

</head>
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0" class='txtstyle3'
    bgcolor='#fffcd1'>
    <form id="form1" runat="server">
    <table align="Center" cellpadding="2" cellspacing="2">
        <tr>
            <td colspan="2" align="center">
                INSERT IMAGE
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <asp:FileUpload ID="imgUpload" runat="server" Width="250px" CssClass="otherstyle" />&nbsp;<asp:Button
                    ID="btnUpload" runat="server" CssClass="buttonStyle2" Text="Upload" OnClick="btnUpload_Click" />
            </td>
        </tr>
        <tr>
            <td align="center" class="txtstyle3">
                List of Images
            </td>
            <td align="Center" class="txtstyle3">
                Preview
            </td>
        </tr>
        <tr>
            <td align="center">
                <div id="listDiv" class="newDivStyle">
                    <%= listOfImages %>
                </div>
            </td>
            <td align="Center">
                <div id="imgDiv" class="newDivStyle">
                </div>
            </td>
        </tr>
        <tr>
            <td align="left" class="txtstyle3" colspan="2">
                Alternate Text:
                <input type="text" class="txtstyle3" id="txtAltText" style="width: 214px" />
            </td>
        </tr>
        <tr>
            <td colspan="2" class="txtstyle3">
                <table width="100%" cellpadding="2" cellspacing="1">
                    <tr>
                        <td align="left">
                            Width:
                        </td>
                        <td align="left">
                            <input type="text" class="txtstyle3" id="imgWidth" style="width: 25px" value="150" />
                        </td>
                        <td>
                            Height:
                        </td>
                        <td align="left">
                            <input type="text" class="txtstyle3" id="imgHeight" style="width: 25px" value="150" />
                        </td>
                        <td>
                            Border:
                        </td>
                        <td align="left">
                            <input type="text" class="txtstyle3" id="txtBorder" style="width: 25px" value="1" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            HSpace:
                        </td>
                        <td align="left">
                            <input type="text" class="txtstyle3" id="txtHSpace" style="width: 25px" />
                        </td>
                        <td>
                            VSpace:
                        </td>
                        <td align="left">
                            <input type="text" class="txtstyle3" id="txtVSpace" style="width: 25px" />
                        </td>
                        <td>
                            Align:
                        </td>
                        <td align="left">
                            <select id="selAlign" class="txtstyle3" style="width: 90px">
                                <option value="0">--Select--</option>
                                <option value="absbottom">AbsBottom</option>
                                <option value="absmiddle">AbsMiddle</option>
                                <option value="baseline">Baseline</option>
                                <option value="bottom">Bottom</option>
                                <option value="left">Left</option>
                                <option value="middle">Middle</option>
                                <option value="right">Right</option>
                                <option value="texttop">TextTop</option>
                                <option value="top">Top</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <button id="btnOK" class="buttonStyle2" onclick="setImage()">
                    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