标题: 50507多功能编辑器使用随笔

作者: admin

日期: 2006-07-21 05:47 PM

内容: 很久前就想把50507多功能编辑器整合到自己页面中，却屡屡出现问题，今天无意再看了一遍"动网HTML在线编辑器的调用方法和使用方法详解"，回头一想就想通了，下边是50507多功能编辑器index.asp源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 50507_com多功能编辑器（仿动网），[翼动音乐网--翼动工作室，http://www.50507.com] </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript" src="Editor/Editor.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
<style>
.Hand_Off {
    BACKGROUND-COLOR: #FFFFFFF;
    Text-align: center;
}
.Hand_On {
    border : 1px solid #3169C6;
    background-color : #C6D3EF;
    Text-align: center;
    cursor: pointer;
    HEIGHT: 20px;
    WIDTH: 20px;
}
</style>
</HEAD>
<BODY>
<TABLE width="500" align="center">
<FORM METHOD=POST name="form1" ACTION="Show.asp?act=Add" onClick="return CheckForm(this);">
<TEXTAREA NAME="content" ROWS="1" COLS="1" style="display:none;"></TEXTAREA>
<TR>
    <TD>
    <TABLE>
    <TR>
        <TD>
            <select name="font_name" id="font_name" onChange="FontName(this.options[this.selectedIndex].value)">
            <option class="heading" selected>字体
            <option value="宋体">宋体
            <option value="黑体">黑体
            <option value="楷体_GB2312">楷体
            <option value="仿宋_GB2312">仿宋
            <option value="隶书">隶书
            <option value="幼圆">幼圆
            <option value="新宋体">新宋体
            <option value="细明体">细明体
            <option value="Arial">Arial
            <option value="Arial Black">Arial Black
            <option value="Arial Narrow">Arial Narrow
            <option value="Bradley Hand ITC">Bradley Hand ITC
            <option value="Brush Script    MT">Brush Script MT
            <option value="Century Gothic">Century Gothic
            <option value="Comic Sans MS">Comic Sans MS
            <option value="Courier">Courier
            <option value="Courier New">Courier New
            <option value="MS Sans Serif">MS Sans Serif
            <option value="Script">Script
            <option value="System">System
            <option value="Times New Roman">Times New Roman
            <option value="Viner Hand ITC">Viner Hand ITC
            <option value="Verdana">Verdana
            <option value="Wide Latin">Wide Latin
            <option value="Wingdings">Wingdings</option>
            </select>
        </TD>
        <TD>
            <select name="font_size" id="font_size" onChange="FontSize(this.options[this.selectedIndex].value)">
              <option value="1">字号</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
            </select>
        </TD>
        <TD OnClick="FontColor()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/fgcolor.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="字体颜色"></TD>
        <TD OnClick="BackColor()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/fbcolor.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="背景颜色"></TD>
        <TD OnClick="bold()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/bold.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="加粗"></TD>
        <TD OnClick="italic()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/italic.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="倾斜"></TD>
        <TD OnClick="underline()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/underline.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="下划线"></TD>
        <TD OnClick="ralign('left')" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/aleft.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="居左"></TD>
        <TD OnClick="ralign('center')" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/center.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="居中"></TD>
        <TD OnClick="ralign('right')" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/aright.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="居右"></TD>
        <TD OnClick="url()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/wlink.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="超级链接"></TD>
        <TD OnClick="unurl()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/unlink.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="取消链接"></TD>
        <TD OnClick="image()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/img.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="插入图片"></TD>
        <TD OnClick="flash()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/swf.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="插入Flash"></TD>
        <TD OnClick="wmv()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/wmv.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="插入Windows Media"></TD>
        <TD OnClick="rm()" this.className='Hand_Off'; onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/rm.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="插入Real Media"></TD>
        <TD OnClick="unformat()" this.className='Hand_Off';ondrag='return false;'" onmouseover=this.className='Hand_On'; onmouseout=this.className='Hand_Off';><IMG SRC="Editor/images/cleancode.gif" WIDTH="16" HEIGHT="16" BORDER="0" ALT="取消格式"></TD>
    </TR>
    </TABLE>
    </TD>
</TR>
<TR>
    <TD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
    </TD>
</TR>
<TR>
    <TD><INPUT TYPE="submit" value="提交"></TD>
</TR>
</FORM>
</TABLE>
</BODY>
</HTML>
主要就在于红色部分代码，其原理是在提交表单时先将我们编辑的内容转到textarea中再提交，别误会，我们在页面中实际输入区域可不是textarea哦(PS:眼见未必为实，这下知道了吧)，知道这个原理，那textarea放在哪都无所谓了，关键是得把它给隐藏好，因而给他加了style="display:none;"。