ASP实现在线编辑文本(转)

来源:岁月联盟 编辑:zhuzhu 时间:2003-07-11
<!-- 请保留
    作者:        Centver
    更新日期:    2001-6-24
    版本:        1.0
    Email:        intion@yeah.net
请保留 -->
<html>

<head>
    <META NAME="GENERATOR" Content="Microsoft FrontPage 4.0">
    <title>Looker HTML Editor v1.0</title>
    <style type="text/css">
        .menu_td
        {
            BORDER-RIGHT: #D3E5FB 2px solid;
            BORDER-TOP: #D3E5FB 2px solid;
            BORDER-LEFT: #D3E5FB 2px solid;
            BORDER-BOTTOM: #D3E5FB 2px solid;
            HEIGHT: 20px;
            FONT-WIDTH: bold;
            FONT-SIZE: 70%;
            COLOR: #003366;
            FONT-FAMILY: verdana,sans-serif
        }
        
        .menu_select
        {
            COLOR: #003366;
            FONT-FAMILY: verdana,sans-serif
        }
        
        .workplace
        {
            height:100%;
            width:100%;
            background-color:white;
            font-face:Arial;
            padding:3;
            border:inset #99ccff;
            scrollbar-base-color:#99ccff;
            overflow=auto;
        }
        
        A
        {
            FONT-FAMILY: verdana,sans-serif;
            TEXT-DECORATION: none
        }
        A:active
        {
            COLOR: #003366;
            TEXT-DECORATION: none
        }
        A:link
        {
            COLOR: #003366;
            TEXT-DECORATION: none
        }
        A:visited
        {
            COLOR: #003366;
            TEXT-DECORATION: none
        }
    </style>
    <script language="javascript">
        var sds;
        sds=1;
    
        var nono;
        nono=0;
    
        function ds()
        {
            if (sds == 1)
            {
                oDiv.innerText = oDiv.innerHTML;
                ods.src = "design.gif";
                sds=0;
            }
            else
            {
                sds=1;
                ods.src = "source.gif";
                oDiv.innerHTML = oDiv.innerText;
            }
        }
    
        function mouseovertd (o)
        {
            o.style.backgroundColor= "#7ABBFF";
            o.style.borderStyle="solid";
            o.style.borderColor="#316AC5";
            o.style.color="#ffffff";
        }

        function mouseouttd (o)
        {
            o.style.backgroundColor="#D3E5FB";
            o.style.color="#003366";
            o.style.borderColor="#D3E5FB";
        }
    
        function gzhs()
        {
            if (nono == 0)
            {
                oDiv.focus();
            }
        }
    
        function addScript()
        {
            oDiv.innerHTML += "<SCR" + "IPT LANGUAGE=/"javascript/">/n<!--/n/// 请不要插入恶性代码,谢谢。 ////n//-- START --///n/n//-- END --///n//-->/n</SCR" + "IPT>";
        }

        function addTable(){
            var iHeight, iWidth;
            var sTable = prompt("输入行数,列数/n如:3,4", "2,2");
            if (sTable == null)
            {
                return 0;
            }
            
            var i = sTable.indexOf(",");
            if (i < 1)
            {
                alert("输入错误");
                return 0;
            }
            
            iHeight = parseInt(sTable.substr(0,i++));
            if (isNaN(iHeight))
            {
                alert("表格行数不是整数!");
                return 0;
            }
            if (iHeight < 1)
            {
                alert("表格行数不是正整数!");
                return 0;
            }
            if (iHeight > 20)
            {
                alert("表格行数过大!");
                return 0;
            }
            
            iWidth = parseInt(sTable.substr(i));
            if (isNaN(iWidth))
            {
                alert("表格列数不是整数!");
                return 0;
            }
            if (iWidth < 1)
            {
                alert("表格列数不是正整数!");
                return 0;
            }
            if (iWidth > 20)
            {
                alert("表格列数过大!");
                return 0;
            }
            
            var sHTML = "<table border=1>";
            for(i=0;i<iHeight;i++)
            {
                sHTML += "<tr>"
                for(j=0;j<iWidth;j++)
                {
                    sHTML += "<td>  </td>";
                }
                sHTML += "</tr>";
            }
            sHTML += "</table>";
            
            oDiv.innerHTML+=sHTML;
        }

        function get_color(what)
        {
            var strcolor = showModalDialog("color.asp","","dialogWidth:18;dialogHeight:16;dialogTop:50;dialogLeft:500;status:no;");
            if (strcolor != "")
            {
                oDiv.document.execCommand(what,false,strcolor);
            }
        }

        function set_font_color()
        {
            oDiv.document.execCommand('FormatBlock',font_format.value);
        }
    </script>
</head>

<body bottommargin=0 leftmargin=0 topmargin=0 rightmargin=0 scroll=no onload="javascript:gzhs()">
<table width=100% height="100%" cellspacing=0 cellpadding=0 border=0 bgcolor=#D3E5FB>
    <tr>
        <td height="20">
            <table cellspacing=0 cellpadding=0 border=0 bgcolor=#D3E5FB>
                <tr>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Cut')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="剪切" border="0" src="cut.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Copy')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="复制" border="0" src="copy.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Paste')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="粘贴" border="0" src="paste.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Undo')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="撤销" border="0" src="undo.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Redo')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="恢复" border="0" src="redo.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:addScript()" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="加入脚本" border="0" src="script.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:addTable()" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="表格" border="0" src="table.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('InsertImage',true)" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="插入图像" border="0" src="image.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('CreateLink',true)" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="增加连接" border="0" src="link.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('InsertHorizontalRule')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="水平线" border="0" src="hr.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('JustifyLeft')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="左对齐" border="0" src="left.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('JustifyCenter')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="居中" border="0" src="center.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('JustifyRight')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="右对齐" border="0" src="right.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('InsertOrderedList')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="编号列表" border="0" src="ol.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('InsertUnorderedList')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="项目符号列表" border="0" src="ul.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Outdent')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="减少缩进" border="0" src="outdent.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Indent')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="增加缩进" border="0" src="indent.gif" width="20" height="20">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td height="20">
            <table cellspacing=0 cellpadding=0 border=0 bgcolor=#D3E5FB>
                <tr>
                    <td class="menu_td" onmouseover="javascript:mouseovertd(this);nono=1" onmouseout="javascript:mouseouttd(this)">
                        <select name="font_format" class="menu_select" onchange="javascript:oDiv.document.execCommand('FormatBlock',false,font_format.value)" onblur="javascript:nono=0;gzhs()">
                            <option value="<P>">普通</option>
                            <option value="<PRE>">带格式的</option>
                            <option value="<address>">地址</option>
                            <option value="<h1>">标题1</option>
                            <option value="<h2>">标题2</option>
                            <option value="<h3>">标题3</option>
                            <option value="<h4>">标题4</option>
                            <option value="<h5>">标题5</option>
                            <option value="<h6>">标题6</option>
                            <option value="<ol>">编号列表</option>
                            <option value="<ul>">项目符号列表</option>
                            <option value="<dir>">目录列表</option>
                            <option value="<menu>">菜单列表</option>
                        </select>
                    </td>
                    <td class="menu_td" onmouseover="javascript:mouseovertd(this);nono=1" onmouseout="javascript:mouseouttd(this)">
                        <select name="font_face" class="menu_select" onchange="javascript:oDiv.document.execCommand('Fontname',false,font_face.value)" onblur="javascript:nono=0;gzhs()">
                            <option value="宋体">宋体</option>
                            <option value="黑体">黑体</option>
                            <option value="楷体_GB2312">楷体</option>
                            <option value="仿宋_GB2312">仿宋</option>
                            <option value="隶书">隶书</option>
                            <option value="幼圆">幼圆</option>
                            <option value="新宋体">新宋体</option>
                            <option value="细明体">细明体</option>
                            <option value="Arial">Arial</option>
                            <option value="Arial Black">Arial Black</option>
                            <option value="Arial Narrow">Arial Narrow</option>
                            <option value="Bradley Hand    ITC">Bradley Hand ITC</option>
                            <option value="Brush Script MT">Brush Script MT</option>
                            <option value="Century Gothic">Century Gothic</option>
                            <option value="Comic Sans MS">Comic Sans MS</option>
                            <option value="Courier">Courier</option>
                            <option value="Courier New">Courier New</option>
                            <option value="MS Sans Serif">MS Sans Serif</option>
                            <option value="sans-serif">sans-serif</option>
                            <option value="Script">Script</option>
                            <option value="System">System</option>
                            <option value="Tahoma">Tahoma</option>
                            <option value="Times New Roman">Times New Roman</option>
                            <option value="Viner Hand ITC">Viner Hand ITC</option>
                            <option value="Verdana">Verdana</option>
                            <option value="Wide    Latin">Wide Latin</option>
                            <option value="Wingdings">Wingdings</option>
                        </select>
                    </td>
                    <td class="menu_td" onmouseover="javascript:mouseovertd(this);nono=1" onmouseout="javascript:mouseouttd(this)">
                        <select name="font_size" class="menu_select" onchange="javascript:oDiv.document.execCommand('FontSize',false,font_size.value)" onblur="javascript:nono=0;gzhs()">
                            <option selected>普通</option>
                            <option value="1">1 (8 磅)</option>
                            <option value="2">2 (10 磅)</option>
                            <option value="3">3 (12 磅)</option>
                            <option value="4">4 (14 磅)</option>
                            <option value="5">5 (18 磅)</option>
                            <option value="6">6 (24 磅)</option>
                            <option value="7">7 (36 磅)</option>
                        </select>
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Bold')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="粗体" border="0" src="bold.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Italic')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="斜体" border="0" src="italic.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:oDiv.document.execCommand('Underline')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="下画线" border="0" src="underline.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:get_color('BackColor')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="突出颜色显示" border="0" src="bgcolor.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:get_color('ForeColor')" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="字体颜色" border="0" src="fontcolor.gif" width="20" height="20">
                    </td>
                    <td class="menu_td" onclick="javascript:ds()" onmouseover="javascript:mouseovertd(this)" onmouseout="javascript:mouseouttd(this)">
                        <img alt="设计/原码" name="ods" border="0" src="source.gif" width="40" height="20">
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <DIV id=oDiv name=oDiv CONTENTEDITABLE onblur="javascript:gzhs()" ALIGN=left class="workplace"><p></p></DIV>
        </td>
    </tr>
</table>
</body>

</html>