today

虽有智慧,不如乘势;虽有镃基,不如待时
随笔 - 33, 文章 - 4, 评论 - 285, 引用 - 17
数据加载中……

给FreeTextBox增加自己的按钮

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

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

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

1)  制作我们自己的按钮

2)  把我们的按钮添加到FreeTextBoxButton集合当中

那么就让我们去验证一下我们的想法吧。这个验证的过程,就是我们认知和熟悉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
     
下面的imagesoffice2000等等,所以你要在这几个目录下面添加你自己的按钮的图片。

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

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

posted on 2007-01-10 17:11 today 阅读(2590) 评论(11)  编辑 收藏

评论

#1楼    回复  引用  查看    

找的就是你.!!谢谢.
先收了,晚上回来再看.我想添个代码高亮的这个应当行吧.
2007-01-10 18:12 | solog      

#2楼    回复  引用    

高人!源代码里好像就是这么个流程的
2007-01-10 18:17 | chenglingr [未注册用户]

#3楼    回复  引用  查看    

我一直都是把js代码写在类里面。不用单独写到FTB的js文件里。
或者,直接把所有实现都放在UI中。
<FTB:ToolbarButton Title="InsertImageFromGallery" ScriptBlock="window.open('ftb.imagegallery.aspx','FreeTextBox1')" ButtonImage="insertimage" runat="server" />

添加按钮到工具栏也是很简单的,直接就用上边的那段代码就可以。

可以参考 :
http://www.cnblogs.com/dlwang2002/archive/2005/12/12/295315.html
2007-01-10 19:05 | 随心所欲      

#4楼    回复  引用    

为什么不试试FCKeditor呢

它也很好用
2007-01-11 09:21 | hedking [未注册用户]

#5楼    回复  引用  查看    

第一个问题,怎么样实现那个word格式删除的按钮呢,我用的3.1.6版本,在loacalhost下可以显示,但是传到空间或者用vs预览就不会有这个按钮显示了,文档里说是免费用户不能用,你有什么思路解决一下么?
第二个问题,你自己编的那个类最后放哪里了?重新编译进freetextbox。dll里面?还是怎么弄?
谢谢
2007-01-12 10:20 | ddr888      

#6楼 [楼主]   回复  引用  查看    

to ddr888 兄:
第一个问题:这样的功能如果脱离FreeTextBox环境你自己可以实现的话,
我想按照我的思路那肯定很容易就把这样的需求添加进来了,所以问题是:
你不知道如何实现word格式删除这样的功能还是你不会把它和FreeTextBox
融合在一起,这是两个问题。
第二个问题:因为我们没有FreeTextBox的源代码,所以我们的按钮类肯定不
会放在FreeTextBox.dll程序集中,至于放在那里就看你自己的爱好了,只要
当你需要把你的按钮类加进FreeTextBox中时,能找到你的按钮类即可。你也可以把你自己的按钮类统统放到一个程序集中,这样为以后的重用提供方便。
2007-01-12 13:49 | today      

#7楼    回复  引用  查看    

word格式删除的功能知道,而且FreeTextBox.js里面应该也有,用你的思路加这个功能也能,但是因为一个按钮就要重新写那么多代码,我感觉有点不值,而且其他默认的按钮也要重新加对吧,有没有什么方法能让ftb默认的word清楚按钮能用,不管什么方法都行。@today
2007-01-12 14:54 | ddr888      

#8楼 [楼主]   回复  引用  查看    

呵呵 所谓有得必有失嘛。
你可以把添加FreeTextBox按钮的功能封装起来,这样不管你有多少个FreeTextBox都是一行代码搞定。
另外,你可能也注意到了,其实你可以在目录:aspnet_client\FreeTextBox下面找到FTB-Pro.js文件,从名字上看就可以猜出来是商业版的一些功能的封装,所以可以很容易的找到你需要的功能,直接拿来就可以用。
最后,还有一个办法,那就是破解,这可能就需要花点时间去研究啦!
2007-01-12 15:28 | today      

#9楼    回复  引用    

我看了你的增加QQ按钮这个功能,也跟着你的步骤和思路去写
但是调试不成功的!!!
能给个代码吗???谢谢
2007-05-14 15:43 | yangjoy [未注册用户]

#10楼    回复  引用    

我看了你的增加QQ按钮这个功能,也跟着你的步骤和思路去写
但是调试不成功的!!!
能给个代码吗???谢谢
再顶!!
急急急!!!
2007-05-14 15:43 | yangjoy [未注册用户]

#11楼    回复  引用    

YOYO是我最喜欢的是了
2007-10-19 20:00 | 陈玲 [未注册用户]

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2007-01-10 17:52 编辑过


相关链接: