给FreeTextBox增加自己的按钮

大家都知道FreeTextBox现在的版本是不开放源代码的，如果你想给它增加一些自己的东西，
看起来会比较麻烦一些，至少没有那些开源版本那样直观，但这并不能妨碍我们给FreeTextBox
添加我们自己的按钮。

       那么究竟怎么做才可以把我们需要的按钮制作成像其他按钮一样安静的放在那里，等待我们
去使用它呢？下面就介绍我的实现过程。

       我的初步想法是，FreeTextBox应该支持我们这样做，所以它可能已经给我们留了一些属性或
者Button集合类似的东西，让我们轻松把我们自己的按钮加到它的这个大家庭中。如果推断正确
的话，很明显，我们需要做的工作为：

1）  制作我们自己的按钮

2）  把我们的按钮添加到FreeTextBox的Button集合当中

那么就让我们去验证一下我们的想法吧。这个验证的过程，就是我们认知和熟悉FreeTextBox的一
个过程，我想最快的路无疑是看控件的作者留给我们的一些文档啦，FreeTextBox的作者很理解他
的客户的想法，所以我很快在下载的该控件的一些文件中找到了很需要的东西，那就是readme.txt
文本文件，打开，就可以看到作者对关于怎样使用FreeTextBox控件的一个很简单，但很有用的叙述，
阅读完后我已经觉得我当初的想法是正确的。在这里我们可以了解到，我们可以自定义我们的工
具栏的按钮（指增减已存在的按钮），方法有三种：

1）  ToolbarLayout String

2）  Procedurally

3）  Code (Page_Load or Code Behind)

这里我只简单列举一下，具体的可参考readme文本文件

接下来的事情，就让我们动手制作我们的按钮吧。这一次，我添加的是QQ表情图片，希望做到
的效果是点击工具栏上我自己的按钮，然后打开一个页面，选择表情，然后把表情图片返回到Free
TextBox中，就像其他按钮一样，我不希望我的按钮在工具栏上受到不平等的待遇。如何了解其他按
钮的工作原理呢？在没有源代码的情况下，这个可能会是一个麻烦事，但并不能阻挡我们探索事物
原理的好奇心，拿出我们的利器：Reflector吧，在这个时候他可以带给我们光明，我想反编译在这个
时候也该发挥一点力量了吧！用Reflector打开FreeTextBox DLL文件，展现在你面前的是该控件的类层
次结构，当然了，你可能会说，直接在vs.net的对象浏览器里就直接可以看到类层次结构，对，是这
样的。在这里我们不仅是查看FreeTextBox的类层次结构更为重要的是我们需要了解他自己的按钮是
如何实现的，因为Reflector可同时帮我们做这两件事情。打开FreeTextBoxControls你会发现他自己的
按钮类都在这里静静的等你呢，我找到了跟我需要制作的QQ表情类似的按钮：InsertImageFromGallery，
查看他的实现，你就会找到你需要的东西，首先，它是继承了ToolbarButton，查看他的构造函数，
你会发现如下的代码：

public InsertImageFromGallery() : base("Insert Image From Gallery", "insertimagefromgallery")
{
      base.isBuiltIn = true;
      base.isProFeature = false;
      base.BuiltInButtonOffset = 0x15;
      base.builtInScript = "this.ftb.InsertImageFromGallery();";
      base.className = "InsertImageFromGallery";
}

 

他看上去很懒，仅仅做了这些，这个对我们来说无疑是个好消息。当然，如果你对FreeTextBox比较熟悉的话，
你完全不必要这么做，你可以查看它的帮助文档，那里对他的类已经有了一个大致的说明，这个文档你可以
很轻松的从其官方网站获得。代码虽然不多，但我们仍需要好好研读，好好推敲，只有这样我们才可以理解
他的按钮的工作原理。按照平常的思维，如果我们抛开FreeTextBox，单独去实现我前面提到的那个需求，我
想应该会很简单，思路就是给按钮绑定一个客户端代码，当按钮被触发时，这段客户端代码就会执行，而我们
想让按钮做的工作也就是在这段客户端代码里实现。思路是一样的，FreeTextBox的按钮也还是按照这样一个思
路来完成它的工作的。为了验证我的想法，在FTB-FreeTextBox.js文件里你可以找到this.ftb.InsertImageFromGallery()
这个函数，它的代码如下：

FTB_FreeTextBox.prototype.InsertImageFromGallery = function() {

    url = this.imageGalleryUrl.replace(/\{0\}/g,this.imageGalleryPath);    
    url += "&ftb=" + this.id;

    var gallery = window.open(url,'gallery','width=700,height=600,toolbars=0,resizable=1');
    gallery.focus();    
}

当然了，FreeTextBox现在的版本已经把这些代码做为嵌入资源，编译到dll文件里了，你可以通过Free
TextBox的属性JavaScriptLocation来改变其读取这些资源的来源。（按钮的图片也一样）理解了这些以
后就可以做自己的按钮啦，创建自己的类文件，让它也继承ToolbarButton，实现自己类的构造函数，
以下是我的按钮的实现代码：

using System;
using FreeTextBoxControls;
namespace FreeTextBoxControls
{
    /**//// <summary>
    /// InsertQQ 的摘要说明。
    /// </summary>
    public class InsertQQ:ToolbarButton
    {
        public InsertQQ(): base("Insert QQ", "insertqq")
        {
            this.ButtonImage = "QQ";
            this.ScriptBlock = "this.ftb.InsertQQ();";
            this.CommandIdentifier = "InsertQQ";
            this.FunctionName = "InsertQQ";
            this.Title = "插入表情";
        }
    }
}

 

相应的，在FTB-FreeTextBox.js添加类似的客户端处理代码，我的按钮的代码如下：

/**//*插入QQ表情*/
FTB_FreeTextBox.prototype.InsertQQ = function()
{
    var myUrl = 'InsertQQImages.aspx';
    var myQQ = window.showModalDialog(myUrl,'qq','dialogWidth=160px;dialogHeight=170px;status=no');
    
    if(myQQ != undefined)
    {
        var doc = this.designEditor.document;
        var image = doc.createElement("img");
        image.src = myQQ;
        this.designEditor.focus();
        var sel = this.GetSelection();
        var range = this.CreateRange(sel);    
        if (FTB_Browser.isIE) {
            range.pasteHTML(image.outerHTML);
        } else {
            this.InsertNodeAtSelection(image);
        }
    }
}

 

这样，制作按钮的工作基本可以结束了，接下来，看如何把我们自己制作的按钮添加到工具栏上。
我试了readme.txt中讲解的三种方法，其中前两种都无效，只有最后一种，也就是在后台代码里添
加是可行的，我想可能是程序在FreeTextBox.dll程序集中找不到我自己的按钮类吧，因为我的按钮
类无法编译到其程序集中。还好有第三种方法不会让我们失望，具体的方法可以参考如下代码（
其实很简单，只不过让阅读的朋友不用回头查看readme文本啦）：

public static void AddToolBarButton(FreeTextBoxControls.FreeTextBox myFtb)
        {
            Toolbar bar = null;
            bar = new Toolbar();
            bar.Items.Add(new ParagraphMenu());
            bar.Items.Add(new FontFacesMenu());
            bar.Items.Add(new FontSizesMenu());
            bar.Items.Add(new FontForeColorsMenu());
            bar.Items.Add(new FontForeColorPicker());
            bar.Items.Add(new FontBackColorsMenu());
            bar.Items.Add(new FontBackColorPicker());
            myFtb.Toolbars.Add(bar);

            bar = new Toolbar();
            bar.Items.Add(new Bold());
            bar.Items.Add(new Italic());
            bar.Items.Add(new Underline());
            bar.Items.Add(new StrikeThrough());
            bar.Items.Add(new SuperScript());
            bar.Items.Add(new SubScript());
            bar.Items.Add(new RemoveFormat());
            myFtb.Toolbars.Add(bar);

            bar = new Toolbar();
            bar.Items.Add(new InsertImageFromGallery());
            bar.Items.Add(new InsertQQ());
            myFtb.Toolbars.Add(bar);
        }

 

到此，你就可以使用你自己的按钮啦，但我要说明以下三点：

1）  要把FreeTextBox读取资源的方式改为外在资源，这很重要。
2）   在使用后台代码创建按钮的时候，注意把FreeTextBox的属性AutoGenerationToolBarsFromString
   设为false
3）   自己按钮的图片的位置会根据你选择的按钮的样式而不同，即aspnet_client\FreeTextBox
      下面的images，office2000等等，所以你要在这几个目录下面添加你自己的按钮的图片。

到这里你就可以享受你自己的按钮带来的愉悦吧！除此之外就让我们感谢FreeTextBox的作者
吧，是他们让我们可以免费使用此控件以及可以很容易的可扩展控件的功能，还有那些对我们非
常有用的文档。

备注：搜索了一下博客园，发现有位仁兄的博客里有很多介绍FreeTextBox的文章，放个链接希望对用到的朋友的多一些参考。
http://www.cnblogs.com/windsails/archive/2004/09/24/46369.aspx 另外博客园的FreeTextBox已经做了这方面的工作，但
不知道是不是开源的版本。