您所在的位置： 程序员家园 -> 家园博客 ->
 
在哪里摔倒
就在哪里自己爬起来

用户登录

查　　找

最新评论

最新留言

常用网站

网易邮箱 GMAIL  

百度搜索 ＭＳＤＮ

霏凡软件 ＢＴ精品

影视帝国 射 手 网

电驴下载 全 库 网

友情连接

茄菲的窝 冰冰博客

枫叶飘零 玫　　瑰

ＡＣＥＮ 云 豹 子

统　　计


※ html编辑器，第四步，把服务器端控件和客户端标签结合起来
狼子 发表于 2006-11-1 17:40:00 阅读全文 | 回复(0) | 引用通告 | 编辑

第一步在这里：user1/9/archives/2006/2614.html

第二步在这里：user1/9/archives/2006/2934.html

第三步在这里：user1/9/archives/2006/2941.html

第三步后停了好久，卡啊卡啊，睡了好多好多天

我卡着，因为在asp里，hidden域是放在html编辑器外面的，我一直想着要把这个TextBox放在自定义用户控件的外面

因为一个html编辑器使用的时候，肯定是要放在一个数据控件的模版列里的，所以要调用TextBox的时候，一定要用到FindControl，TextBox是服务器端控件，要用FindControl取，显示的编辑框是designMode="On"的iframe，在服务器端取不到这样的客户端的东西的，在客户端，没有办法用FindControl

还有，在asp里，一个html编辑器在保存的时候，在保存的button里，要调用一个js，把编辑器的内容赋值给一个hidden域的，这个js是在一个页面的头部的，所以我想着为什么我写好了一个html编辑器的自定义用户控件，我还要在调用的aspx页面里写很多很多js的代码，我觉得不对头

所以我一直卡着

现在我想通了，我把TextBox放在自定义用户控件里，我就不用管html编辑器放在哪里了，这个叫封装，一定是叫封装

把TextBox放在自定义用户控件里，就可以用<% =this.EditorContent.ClientID %>在客户端的JavaScript里调用TextBox了，GetEditorContent和SetEditorContent两个JavaScript的函数也放在自定义用户控件里，就可以一起调用TextBox和iframe了，一个是服务器端的控件，一个是客户端的标签，可以一起调用了

给你们看，我搞到了

LittleWoodEditor.aspx的源码：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="LittleWoodEditor.ascx.cs" Inherits="LittleWoodEditor" %>
<center>
   <div unselectable="on" align="center" style="height:360; width:560px; background-color:buttonface; border-right: graytext 0px solid; border-top: graytext 0px solid; border-left: graytext 0px solid; border-bottom: graytext 0px solid;">
   <div id="ButtonList" style="position:relative; top:6px; visibility:visible; height:58px;">
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="560">
        <tr>
            <td height="6" colspan="22"></td>
        </tr>
        <tr align="center">
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/save.gif" alt="另存" onclick="deal('SaveAs');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/copy.gif" alt="复制" onclick="deal('Copy');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/cut.gif" alt="剪切" onclick="deal('Cut');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/paste.gif" alt="粘贴" onclick="deal('Paste');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/undo.gif" alt="撤消" onclick="deal('Undo');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/redo.gif" alt="重做" onclick="deal('Redo');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/delete.gif" alt="删除" onclick="deal('Delete');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/removeFormat.gif" alt="重置" onclick="deal('refresh');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/wlink.gif" alt="插入超连接" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/img.gif" alt="插入图片" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/file.gif" alt="插入文件" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/wmv.gif" alt="插入wav音乐" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/rm.gif" alt="插入rm音乐" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/swf.gif" alt="插入flash" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/hr.gif" alt="插入水平线" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/table.gif" alt="插入表格" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/aleft.gif" alt="文本居左" onclick="deal('justifyleft');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/center.gif" alt="文本居中" onclick="deal('justifycenter');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/aright.gif" alt="文本居右" onclick="deal('justifyright');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/bullist.gif" alt="段落编号" onclick="deal('insertorderedlist');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/numlist.gif" alt="项目符号" onclick="deal('insertunorderedlist');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="14" style="height: 26px">&nbsp;</td>
        </tr>
        <tr align="center">
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/bold.gif" alt="粗体" onclick="deal('Bold');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/italic.gif" alt="斜体" onclick="deal('Italic');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/underline.gif" alt="下划线" onclick="deal('Underline');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/superscript.gif" alt="文字上标" onclick="deal('superscript');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/subscript.gif" alt="文字下标" onclick="deal('subscript');" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px"><img src="/LittleWordEditorPic/fgcolor.gif" alt="颜色" onclick="" style="position:relative; top:0px; left:0px;" onmouseover="mouse(this,'over');" onmouseout="mouse(this,'out');" /></td>
            <td width="26" style="height: 26px" colspan="6">
                <SELECT NAME="FontFaceList" onchange="FontNameSize('FontName',this.value);">
    <OPTION VALUE="">字体</OPTION>
    <OPTION VALUE="Arial">Arial</OPTION>
    <OPTION VALUE="Courier New">Courier New</OPTION>
    <OPTION VALUE="Garamond">Garamond</OPTION>
    <OPTION VALUE="Georgia">Georgia</OPTION>
    <OPTION VALUE="Tahoma">Tahoma</OPTION>
    <OPTION VALUE="Times New Roman">Times New Roman</OPTION>
    <OPTION VALUE="Verdana">Verdana</OPTION>
    <OPTION VALUE="宋体">宋体</OPTION>
    <OPTION VALUE="幼圆">幼圆</OPTION>
    <OPTION VALUE="楷体_GB2312">楷体_GB2312</OPTION>
    <OPTION VALUE="仿宋_GB2312">仿宋_GB2312</OPTION>
    <OPTION VALUE="黑体">黑体</OPTION>
    <OPTION VALUE="隶书">隶书</OPTION>
    </SELECT>
            </td>
            <td width="26" style="height: 26px" colspan="2">
                <SELECT NAME="FontSizeList" onchange="FontNameSize('FontSize',this.value);">
    <OPTION VALUE="">字号</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>
    </SELECT>
            </td>
            <td width="280" colspan="8">
                <asp:FileUpload ID="FileUpload1" runat="server" Width="160px" />
                <asp:Button ID="Button1" runat="server" Height="20px" Text="上传" Width="40px" /></td>
        </tr>
    </table>
    </div>
    <div id="ShowEditor" style="position:relative; top:6px;">
    <iframe name="wood_content" id="wood_content" width="550"></iframe>
    </div>
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="560">
        <tr><td colspan="3" height="12"></td></tr>
        <tr align="center" style="background: buttonshadow">
            <td width="100" onclick="changemode(1);" style="background: buttonface; cursor:default;" id="tdDesign"><img src="/LittleWordEditorPic/design.gif" align="absmiddle" />&nbsp;<span style="font-size:12px; font-family:宋体;">设计视图</span></td>
            <td width="100" onclick="changemode(2);" style="background: buttonshadow; cursor:default;" id="tdHtml"><img src="/LittleWordEditorPic/html.gif" align="absmiddle" />&nbsp;<span style="font-size:12px; font-family:宋体;">源码视图</span></td>
            <td width="360" style="height:28px;"></td>
        </tr>
    </table>
   </div>
  </center>
 
  <asp:TextBox ID="EditorContent" runat="server" TextMode="MultiLine"></asp:TextBox>
 
  <script language = "javaScript" type="text/javascript">
 //设置全局变量IframeID，设置他可编辑
 var IframeID=document.getElementById("wood_content").contentWindow;
 IframeID.document.designMode="On"
 //设置html编辑器当前是在设置模式下
 var mode=1;
 
 function deal(s)
 {
  //各种操作
  switch(s)
  {
   case "Bold":
        IframeID.document.execCommand("Bold"); IframeID.focus();
        break;
   case "Italic":
        IframeID.document.execCommand("Italic"); IframeID.focus();
        break;
   case "Underline":
        IframeID.document.execCommand("Underline"); IframeID.focus();
        break;
   case "FontName":
        IframeID.document.execCommand('FontName',false,'黑体'); IframeID.focus();
        break;
   case "superscript":
        IframeID.document.execCommand("superscript"); IframeID.focus();
        break;
   case "subscript":
        IframeID.document.execCommand("subscript"); IframeID.focus();
        break;
   case "FontSize":
        IframeID.document.execCommand('FontSize',false,9); IframeID.focus();
        break;
   case "justifyleft":
        IframeID.document.execCommand("justifyleft"); IframeID.focus();
        break;
   case "justifycenter":
        IframeID.document.execCommand("justifycenter"); IframeID.focus();
        break;
   case "justifyright":
        IframeID.document.execCommand("justifyright"); IframeID.focus();
        break;
   case "insertorderedlist":
        IframeID.document.execCommand("insertorderedlist"); IframeID.focus();
        break;
   case "insertunorderedlist":
        IframeID.document.execCommand("insertunorderedlist"); IframeID.focus();
        break;
   case "ForeColor":
        IframeID.document.execCommand('ForeColor',false,'#ff0000'); IframeID.focus();
        break;
   case "Undo":
        IframeID.document.execCommand('Undo'); IframeID.focus();
        break;
   case "Redo":
        IframeID.document.execCommand('Redo'); IframeID.focus();
        break;
   case "Delete":
        IframeID.document.execCommand('Delete'); IframeID.focus();
        break;
   case "Cut":
        IframeID.document.execCommand('Cut'); IframeID.focus();
        break;
   case "Copy":
        IframeID.document.execCommand('Copy'); IframeID.focus();
        break;
   case "Paste":
        IframeID.document.execCommand('Paste'); IframeID.focus();
        break;
   case "refresh":
        IframeID.document.execCommand('refresh',false,0); IframeID.focus();
        break;
   case "stop":
        IframeID.document.execCommand('stop');
        break;
   case "SaveAs":
        IframeID.document.execCommand('SaveAs');
        break;
  }
 }
 
 function FontNameSize(s,v)
 {
     //改变字体和字号
     switch(s)
  {
   case "FontName":
       IframeID.document.execCommand('FontName',false,v);
       break;
   case "FontSize":
       IframeID.document.execCommand('FontSize',false,v);
       break;
  }
 }
 
 function changemode(i)
 {
  //改变模式，i==1：设计模式；i==2：html模式
  if(i==1)
  {
      ButtonList.style.visibility="visible";
      ButtonList.style.height="0px";
      tdDesign.style.background="/buttonface";
      tdHtml.style.background="/buttonshadow";
   if(mode!=1)
   {
    IframeID.document.body.innerHTML=IframeID.document.body.innerText;
    mode=1;
   }
  }
  else
  {
      ButtonList.style.visibility="hidden";
      ButtonList.style.height="56px";
      tdHtml.style.background="/buttonface";
      tdDesign.style.background="/buttonshadow";
   if(mode!=2)
   {
    IframeID.document.body.innerText=IframeID.document.body.innerHTML;
    mode=2;
   }
  }
 }
 
 function mouse(obj,m)
 {
     //鼠标扫过图片的时候
     if(m=="over")
     {
         obj.style.top="1px";
         obj.style.left="1px";
     }
     else
     {
         obj.style.top="0px";
         obj.style.left="0px";
     }
 }
 
 function GetEditorContent()
 {
  //把内容从iframe取出，设置到TextBox服务器控件
  if(mode==1)
  {
      form1.<% =this.EditorContent.ClientID %>.value="/IframeID.document.body.innerHTML;
  }
  else
  {
   form1.<%" =this.EditorContent.ClientID %>.value="/IframeID.document.body.innerText;
  }
 }
 
 function" SetEditorContent()
 {
  //把内容从TextBox服务器控件取出，设置到iframe
  if(mode==1)
  {
      IframeID.document.body.innerHTML=form1.<% =this.EditorContent.ClientID %>.value;
  }
  else
  {
   IframeID.document.body.innerText=form1.<% =this.EditorContent.ClientID %>.value;
  }
 }
</script>

 

测试调用用的default.aspx的源码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register src="/LittleWoodEditor.ascx" TagName="LittleWoodEditor" TagPrefix="uc1" %>

<!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>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:LittleWoodEditor ID="LittleWoodEditor1" runat="server" />
        <input type="button" value="getcontent" onclick="GetEditorContent();" />
        <input type="button" value="setcontent" onclick="SetEditorContent();" />
    </div>
    </form>
</body>
</html>


图片包：UploadFiles/2006-11/111253819.rar

现在最后剩下的就是asp.net的处理了

１、我要给自定义控件加text属性，是Public的属性，这个属性是绑定到TextBox的Text的，这个属性是自定义控件绑定到数据库的时候的属性

２、还有和颜色一共九个js没有写，这九个js分五类：

第一类：插入link

第二类：插入图片和文件

第三类：插入音乐、影片、flash

第四类：插入表格

第五类：弹出调色板，返回选择的颜色，执行execCommand

３、上传文件

发表评论：

    昵称：
    密码：
    主页：
    标题：
Powered by Oblog.