给FreeTextBox添加文本框大小调整按钮

Cnblog的添加随笔使用的RichTextBox有个很好的功能，就是FreeTextBox文本框可以通过右下角的+ -按钮来实现大小调节。这样在提交文字比较多的时候排版比较方便。
不知道别人是否已经公布了类似的代码，我的实现方法如下（注：我手上的FTB版本不知道是什么版本，随手拿了一个用的，未标记版本号）：
让我们来看一下如何修改，FreeTextBox控件里面的textarea高度是100%，这就说明它是随表格的高度变化的，那么只需要调整表格的高度就可以实现调整文本框大小的目的。
调整表格的js代码如下：
<script language="JavaScript">
function Jacky_change_Size(num)
{
 var obj=document.getElementById("*****_Container");
 if (parseInt(obj.offsetHeight)+num>=300) {
  //alert(obj.offsetHeight)
  obj.height = (parseInt(obj.offsetHeight) + num);
 } 
}
</script>
打开原文件FreeTextBox.cs，里面的代码有将近三千行，找到我们需要定位的表格比较难，不过不要急，让我们来用一个最笨也最实用的办法。

首先：在引用FTB的页面中将FTB的高度调整为6412(任意值，保证其在页面中的唯一性以便于搜索)，然后在运行后的页面中查看源文件（遗憾的是，FTB存在的页面无法直接另存为，所以不能通过DW来分析HTML代码），在源文件找搜索6412,找到一行类似于<table  bgcolor=#9EBEF5 width=600px  height=6423px  BORDER=0>的代码，这行代码比较普通，好象没有什么用处。但是这行代码下面有一行代码：<!-- Start Toolbar -->看起来比较有用。
复制"<!-- Start Toolbar -->"，到FreeTextBox.cs里面去搜索一下，这行代码上面的一行就是我们需要调整的<table>，这个<table>没有ID，那么我们加一个ID，代码如下：
     FTB.Append(@"<table id=""" + base.ID + @"_Container""  bgcolor=" + ColorTranslator.ToHtml(BackColor) + @" width=" + Width.ToString() + @"  height=" + Height.ToString() + @"  BORDER=0><TR><TD>");
到这里我们已经完成了第一步，可以通过javascript来调整FTB文本框的大小。然后就是——

其次：我们需要在控件里输出+ -图片，这样才是一个有机的整体。继续采用老办法来定位FreeTextBox.cs中的代码，在源文件中找到这一行：
<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 STYLE="border-collapse:collapse;">
看起来“border-collapse:collapse”比较有用，复制“border-collapse:collapse”到FreeTextBox.cs中搜索，定位到大概2000行左右，可以看到如下代码：
 <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 STYLE=""border-collapse:collapse;"">
  <TR ID=""mainrow"">
   <TD CLASS=""" + StartTab + @""">
    &nbsp;
   </TD>
   <TD CLASS=""" + DesignModeStyle + @""" ID=""" + this.ID + @"_DesignModeTab"" onClick=""if (" + base.ID + @"_HtmlMode) { if (" + base.ID + @"_ChangeMode(" + base.ID + @"_editor," + base.ID + @"_TempFrame,'" + base.ID + @"_Toolbar',false," + AutoHideToolbar.ToString().ToLower() + @")) { FTB_SetActiveTab(this,'" + this.ID + @"');" + base.ID + @"_HtmlMode = !" + base.ID + @"_HtmlMode;}}"" onMouseOver=""FTB_TabOver();"" onMouseOut=""FTB_TabOut();"" nowrap=""true"">
    <IMG unselectable=""on"" SRC=""" + ButtonPath + @"mode.design." + this.ButtonFileExtention + @""" ALIGN=""absmiddle"" width=21 height=20>&nbsp;设计
   </TD>
   <TD CLASS=""" + HtmlModeStyle + @""" ID=""" + this.ID + @"_HtmlModeTab"" onClick=""if (!" + base.ID + @"_HtmlMode) { if (" + base.ID + @"_ChangeMode(" + base.ID + @"_editor," + base.ID + @"_TempFrame,'" + base.ID + @"_Toolbar',true," + AutoHideToolbar.ToString().ToLower() + @")) { FTB_SetActiveTab(this,'" + this.ID + @"'); " + base.ID + @"_HtmlMode = !" + base.ID + @"_HtmlMode;}}"" unselectable=""on"" onMouseOver=""FTB_TabOver();"" onMouseOut=""FTB_TabOut();"" nowrap=""true"">
    <IMG unselectable=""on"" SRC=""" + ButtonPath + @"mode.html." + this.ButtonFileExtention + @""" ALIGN=""absmiddle"" width=21 height=20>&nbsp;HTML
   </TD>
   <TD CLASS=""" + this.ID + @"_EndTab"" ALIGN=right>";
     if (ShowStatusArea)
     {
      html += @"
  <DIV ALIGN=right CLASS=""FTB_StatusBar"" ID=""" + base.ID + @"_Status""></DIV>";
     }
     html += @"
   </TD>
  </TR>
 </TABLE>
这里怎么加应该不用说了，顺便把代码帖出来吧，以下红色部分是添加的地方：
  <table width=""100%"" border=0 cellspacing=0 cellpadding=0>
        <tr>
          <td width=""50%"">

 <TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0 STYLE=""border-collapse:collapse;"">
  <TR ID=""mainrow"">
   <TD CLASS=""" + StartTab + @""">
    &nbsp;
   </TD>
   <TD CLASS=""" + DesignModeStyle + @""" ID=""" + this.ID + @"_DesignModeTab"" onClick=""if (" + base.ID + @"_HtmlMode) { if (" + base.ID + @"_ChangeMode(" + base.ID + @"_editor," + base.ID + @"_TempFrame,'" + base.ID + @"_Toolbar',false," + AutoHideToolbar.ToString().ToLower() + @")) { FTB_SetActiveTab(this,'" + this.ID + @"');" + base.ID + @"_HtmlMode = !" + base.ID + @"_HtmlMode;}}"" onMouseOver=""FTB_TabOver();"" onMouseOut=""FTB_TabOut();"" nowrap=""true"">
    <IMG unselectable=""on"" SRC=""" + ButtonPath + @"mode.design." + this.ButtonFileExtention + @""" ALIGN=""absmiddle"" width=21 height=20>&nbsp;设计
   </TD>
   <TD CLASS=""" + HtmlModeStyle + @""" ID=""" + this.ID + @"_HtmlModeTab"" onClick=""if (!" + base.ID + @"_HtmlMode) { if (" + base.ID + @"_ChangeMode(" + base.ID + @"_editor," + base.ID + @"_TempFrame,'" + base.ID + @"_Toolbar',true," + AutoHideToolbar.ToString().ToLower() + @")) { FTB_SetActiveTab(this,'" + this.ID + @"'); " + base.ID + @"_HtmlMode = !" + base.ID + @"_HtmlMode;}}"" unselectable=""on"" onMouseOver=""FTB_TabOver();"" onMouseOut=""FTB_TabOut();"" nowrap=""true"">
    <IMG unselectable=""on"" SRC=""" + ButtonPath + @"mode.html." + this.ButtonFileExtention + @""" ALIGN=""absmiddle"" width=21 height=20>&nbsp;HTML
   </TD>
   <TD CLASS=""" + this.ID + @"_EndTab"" ALIGN=right>";
     if (ShowStatusArea)
     {
      html += @"
  <DIV ALIGN=right CLASS=""FTB_StatusBar"" ID=""" + base.ID + @"_Status""></DIV>";
     }
     html += @"
   </TD>
  </TR>
 </TABLE>

          </td>
          <td width=""50%""><div align=""right""><a href=""javascript:Jacky_change_Size(200)""><img src=""../../ftb/images/ftb/plus.gif"" border=""0""></a>&nbsp;<a href=""javascript:Jacky_change_Size(-200)""><img src=""../../ftb/images/ftb/minus.gif"" border=""0""></a>&nbsp;&nbsp;</div></td>
        </tr>
      </table>

最后：如果说还有其他工作要做，那么就是把我们刚才修改的部分写成变量，以便在引用控件的时候可以直接修改。例如图片路径以及Js代码，还有每次调整高度，上面默认是200。
最终实现效果如下图，看看图片右下角的 + - 图标，现在执行文字编辑的时候应该方便多了。