当前位置: 首页 > 图文教程 > 网络编程 > ASP > 自己动手,结合javascript和dhtml做一个ubb编辑器

ASP
ASP调用ORACLE存储过程并返回结果集
用ASP实现网页BBS
关于Global.asa文件的深入研究与session变量失效提示的具体方法
简易ASP+注册系统
防护手册:如何防止ASP木马在服务器上运行
用Visual Basic实现多画面播放功能之二
如何增强ASP程序性能(1)
如何增强ASP程序性能(2)
如何增强ASP程序性能(3)
ASP备份数据库
二十八条改善 ASP 性能和外观的技巧
在Form域中Post大于100K的数据
如何使用ASP制作模似动态生长的表单?
Microsoft IIS 真的如此「不安全」吗?(1)
Microsoft IIS 真的如此「不安全」吗?(2)
Microsoft IIS 真的如此「不安全」吗?(3)
Microsoft IIS 真的如此「不安全」吗?(4)
Microsoft IIS 真的如此「不安全」吗?(5)
关于页面和代码分离
ServerVariables 对路径的操作

ASP 中的 自己动手,结合javascript和dhtml做一个ubb编辑器


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 131 ::
收藏到网摘: n/a

  看到chinaASP论坛的abc code editor了吗?是不是觉得很cool? 说真的,刚见到我还以为是用别的什么语言做的控件呢,
后来才发现没有那么神秘的。前几天做一个商品bbs,客户要求支持ubb,同时也要做一个编辑器。现在我把做ubb的思路给大家讲
一下。
    首先遇到的是界面问题,实际上这个很好解决,只是利用td的onmouseover、onmouseout和onmousedown来实现,具体实现方
法件下面的代码。
    其次就是实现文本效果的问题,这个可以利用textRange的execCommand方法来实现。

   下面我给出一个简单的例子,你可以把它存为一个html文件,直接可以运行,这个例子的功能很简单,就是把编辑框中选定的
文字变为粗体或斜体。其他功能你可以参照这个例子自己加上。
对了,先把这两个图片存下来。

file : ubb.html

<HTML>
<HEAD>

<TITLE>ubb演示</TITLE>
</HEAD>
<BODY>
<br><br>
<table width=300 cellspacing=2 cellpadding=2 border=0  bgcolor=lightgrey>
   <tr>
       <td id=tdBold  onclick=doAction("Bold") onmousedown="DoDown(tdBold );" onmouseover = "On_Mouseover
(tdBold) ;" onmouseout="On_Mouseout(tdBold);">
          <img src="/upload/tech/20091103/20091103101218_f4b9ec30ad9f68f89b29639786cb62ef.gif" width=16 height=16  >
       </td>
       <td id=tdItalic onclick=doAction("Italic") onmousedown="DoDown(tdItalic);" onmouseover
= "On_Mouseover(tdItalic) ;" onmouseout="On_Mouseout(tdItalic);">
          <img src="/upload/tech/20091103/20091103101218_013d407166ec4fa56eb1e1f8cbe183b9.gif" width=16 height=16 >
       </td>
       <td width=268>&nbsp;</td>
   </tr>
   <tr>
       <td colspan=3>
         <iframe id=Editor name=Editor border=0 scroll=no width=300 height=200>
         </iframe>
       </td>
   </tr>
</table>           

</BODY>
</HTML>

<script language=javascript>
  
  //initialize the iframe
  Editor.document .designMode = "On" ;
  Editor.document .open ;
  Editor.document .write ("&nbsp;") ;
  Editor.document .close ;
  Editor.focus ();
  
  function On_Mouseover(thisTD)
    {
      thisTD.style .borderLeft = "1px solid buttonhighlight" ;
      thisTD.style .borderRight = "1px solid buttonshadow";
      thisTD.style .borderTop = "1px solid buttonhighlight";
      thisTD.style .borderBottom = "1px solid buttonshadow";
    }

  function On_Mouseout(thisTD)
    {
      thisTD.style .borderLeft = "" ;
      thisTD.style .borderRight = "";
      thisTD.style .borderTop = "";
      thisTD.style .borderBottom = "";
    }
    
  function DoDown(thisTD)
    {
        thisTD.style .borderLef