FreeTextBox

一,     安装

1) 把FTBv3-1-1/Framework-1.1/FreetextBox.dll拷入bin目录

根据你的开发环境添加,有1.0,1.1和2.0得3种

2) 在项目中添加FreetextBox.dll的dll引用

<%@ Register TagPrefix="FTB" Namespace="FreeTextBoxControls" Assembly="FreeTextBox" %>

3) Web.config加入如下代码

1<?xml version="1.0" encoding="utf-8" ?>
2  <configuration>
3   <system.web>
4    <httpHandlers>
5     <add verb="GET" path="FtbWebResource.axd" type="FreeTextBoxControls.AssemblyResourceHandler, FreeTextBox" />
6    </httpHandlers>
7   <system.web>
8 <configuration>

二,使用FreeTextBox

1) 调用

<FTB:FreeTextBox id="FreeTextBox1" runat="Server" />

(一定要放在<form>标记内)

 

2) 客户端中检测到有潜在危险的 Request.Form 值

<% @ Page language = " c# " ValidateRequest = " false " %>

(这个是防止上传图片时遇到得一些问题,一定要写)

通过以上2步,再自己编写一些代码.就基本可以使用了,但还不具有上传图片的功能

 

在调用imagegallery.aspx时常常会遇到脚本错误的提示：“FTB_ResizeGalleryArea” 未定义 点击上传，没反应。图片显然上传不了 经查找问题，得到解决： 在ftb.imagegallery.aspx页可以看到一下代码：     <FTB:ImageGallery id="ImageGallery1"     UtilityImagesLocation="InternalResource"      AllowImageDelete="true"   AllowImageUpload="true"         RootImagesFolder="/Resource/"           AllowDirectoryCreate="true"         AllowDirectoryDelete="true"        JavaScriptLocation ="InternalResource"         runat="Server" /> 关键代码就是    UtilityImagesLocation="InternalResource"和JavaScriptLocation ="InternalResource" 这两个属性。一个定义了文件调用的图片地址，另一个定义了脚本调用地址。如果你使用的ftb是内嵌资源版本，就改成InternalResource （默认是ExternalFile），否则就应该使用外部文件方式就可以了。

 

打开 Freetextbox 的 InsertImageFromGallery 及如何接收 ftb.imagegallery.aspx 返回的图片信息

如何打开 Freetextbox 的 InsertFromGallery 功能
　　
　　eWebEditor、WebHtmlEidtor  等许多在线编辑器默认都有一个功能，可以实时把图片上传到服务器并插入到编辑器里面，而在 Freetextbox 默认的“插入图片”只能让你插入一个图片网址，如果你需要实时上传图片和对图片进行设置的话，就要打开强大的 InsertImageFromGallery  功能。虽然网上能搜到不少的相关文章，但基本上都是没用的，估计可能是版本不同的原因，我下载的版本是3.1.6。

　　首先把下载好的 FTBv3-1-6.zip 解压。然后对应 .Net 的版本 FreeTextBox.dll 添加到 Visual Studio 的工具栏里面，如 .Net 版本是2.0，则在 Visual Studio 2005 里右击“添加选项卡”添加名为“FreeTextBox”的项，右击项在弹出菜单中点击“选择项”，在“.Net Framwork组件”中选“浏览”把 Framework-2.0 里面的 FreeTextBox.dll 添加进去。完成了这一步之后，就可以在任何网站或者Web Project使用FreeTextBox了，只要简单地把工具栏上面的FreeTextBox拖到页面上即可，VS会帮你Copy所需的DLL文件和生成相应的licenses.licx（这个会在你的应用程序根目录，是FreeTextBox的授权文件）。

　　为了打开 InsertFromGallery ，必须先从 FTB 的解压目录把 ftb.imagegallery.aspx 拷贝到网站/Web Project目录下，然后，先把 ftb.imagegallery.aspx 的只读属性去掉，因为需要对它进行一些必要的更改，在源代码视图中，把JavaScriptLocation、UtilityImagesLocation这两项设为InternalResource让它引用DLL的内嵌资源文件。再把AllowImageDelete、AllowImageUpload、AllowDirectoryCreate、AllowDirectoryDelete等都设为true。
　　现在，对页面上的 FreeTextBox 控件进行设置，ImageGalleryPath 指定图片存放的位置（注意要按照此路径建立相应的文件夹），ImageGalleryUrl 指定 ftb.imagegallery.aspx 所在的URL，如果FreeTextBox所在的页与ftb.imagegallery.aspx在同一目录下，则无需设置此项，最后要设置 ToolbarLayout 属性，在 InsertImage 之后加入 InsertImageFromGallery 。
　　这时用浏览器预览之后会在原来的Insert Image按钮右边多出一个按钮来，通过这个就可以实现上传图片文件并对图片进行适当地设置再插入到编辑器中。


　　至此，FreeTextBox 的 InsertImageFromGallery 功能就完全打开了。





如何接收 ftb.imagegallery.aspx 返回的图片信息

　　一般的企业网站很多时候会有产品展示系统，通常会需要独立的图片字段，如缩略图。我们可以利用ftb.imagegallery.aspx 对该字段进行管理。由于使用了InternalResource方式，所以我是通过 Firefox+Web Developer 对Javascript进行观察，当然你也可以使用ExternalFile方式：
　　先把压缩包内aspnet_client文件夹复制到网站的根目录，然后对ftb.imagegallery.aspx和Freetextbox进行相应的设置，以Location为结尾的属性设为ExternalFile，SupportFolder设为"~/aspnet_client/FreeTextBox/"
　　总的来说，InternalResource使用起来比较方便，不用去复制aspnet_client；ExternalFile方式比较灵活，必要时可以自行对资源文件，如js文件进行修改。

　　ftb.imagegallery.aspx 的对接方式还是比较简单的，相关的函数如下：

function  FTB_InsertImage() {
    
    image =  document.getElementById('img_preview');
    src =  document.getElementById('img_preview').src;
    if (src == '' || src == null) return ;
    
    alt =  document.getElementById('img_alt').value;
    title =  document.getElementById('img_title').value;
    width = image.width; //document.getElementById('img_width').value;
    height = image.height; //document.getElementById('img_height').value;
    align =  document.getElementById('img_align').options[document.getElementById('img_align').selectedIndex].value;
    
    hspace =  document.getElementById('img_hspace').value;
    vspace =  document.getElementById('img_vspace').value;
    border =  document.getElementById('img_border').value;
    
    ftb =  document.getElementById('TargetFreeTextBox').value;

    img = '<img src="' + src + '"' + ' temp_src="' + src + '"' +  
        ( (alt != '') ? ' alt="' + alt + '"' : '' ) +  
        ( (title != '') ? ' title="' + title + '"' : '' ) +  
        ( (width != '') ? ' width="' + width + '"' : '' ) +  
        ( (height != '') ? ' height="' + height + '"' : '' ) +  
        ( (height != '') ? ' height="' + height + '"' : '' ) +  
        ( (align != '') ? ' align="' + align + '"' : '' ) +  
        ( (hspace != '') ? ' hspace="' + hspace + '"' : '' ) +  
        ( (vspace != '') ? ' vspace="' + vspace + '"' : '' ) +  
        ( (border != '') ? ' border="' + border + '"' : '' ) +  
        ' /> ';
        
    window.opener.FTB_API[ftb].InsertHtml(img);
    window.close(); // 这个是我加上去的，原始文件没有这行。
};

 

　　显然，ftb.imagegallery.aspx 会在用户点击 Insert 按钮之后生成图片的html代码，并调用指定的FTB的InsertHtml方法将代码传递过去。因此，只要为某一元素添加InsertHtml方法，并附加到 FTB_API 对象上，就可以接收和利用 ftb.imagegallery.aspx 返回的图片代码。

<asp:TextBox ID="oThumbnail" runat="server" Width="200px"></asp:TextBox>
<input id="Button1" type="button" value="..." onclick="pickThumbnail('<%= oThumbnail.ClientID %>');" />
<script type="text/javascript">
<!--
     function  pickThumbnail(src_id) {
        var o =  document.getElementById(src_id);
        if (o.InsertHtml ===  undefined) {
            o.InsertHtml = function (img) {
                //this.value = img;
                var div = document.createElement("DIV" );
                div.innerHTML =  img;
                //div.firstChild.src 取得图片的绝对网址。这里处理为绝对根路径。
                this.value = div.firstChild.src.substr((location.protocol+"//"+ location.host).length);
            }
            FTB_API[o.id] =  o;
        }
        // rif 代表图片文件夹的根目录，cif 代表当前目录
        var gallery = window.open("ftb.imagegallery.aspx?rif=~/images&cif=~/images&ftb="+o.id,'gallery','width=700,height=600,toolbars=0,resizable=1 ');
        gallery.focus();    
    }
// -->
</script>

以上代码在IE7.0及Firefox测试通过。点击下载打包的示例网站


PS: ftb.imagegallery.aspx 在点击Insert按钮后是不会自动关闭的。如果想点击此按钮后关闭该窗口。可以改用ExternalFile方式，然后打开 aspnet_client/FreeTextBox/FTB-ImageGallery.js 文件，在FTB_InsertImage函数的最后加上window.close()；我这里是第77行之后加入了这一句

三,图片上传
1) 工具栏上添加ImageGallery按钮.

< FTB:FreeTextBox  id="FreeTextBox1"    runat="Server" OnSaveClick="FreeTextBox1_SaveClick" ToolbarLayout =InsertImageFromGallery />

(ToolbarLayout属性有很多值可以赋予,若只写InsertImageFromGallery,那么只会出现一个上传图片的按钮,其他的就不会显示.网上查到了另外一些供大家参考ToolbarLayout=" ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu,

FontBackColorsMenu, FontForeColorPicker, FontBackColorPicker| Bold, Italic, Underline,

Strikethrough, Superscript, Subscript, RemoveFormat| JustifyLeft, JustifyRight, JustifyCenter,

JustifyFull; BulletedList, NumberedList, Indent, Outdent; CreateLink, Unlink, InsertImage| Cut,

Copy, Paste, Delete, Undo, Redo, Print, Save| SymbolsMenu, StyleMenu, InsertHtmlMenu| InsertRule,

InsertDate, InsertTime| InsertTable, EditTable; InsertTableRowBefore, InsertTableRowAfter,

DeleteTableRow; InsertTableColumnBefore, InsertTableColumnAfter, DeleteTableColumn| InsertForm,

InsertDiv, InsertTextBox, InsertTextArea, InsertRadioButton, InsertCheckBox, InsertDropDownList,

InsertButton| InsertImageFromGallery, Preview, SelectAll, WordClean, EditStyle, ieSpellCheck"

Bold    加粗
BulletedList 项目符号
Copy    复制
CreateLink    插入链接
Cut     剪切
Delete    删除
DeleteTableColumn 删除一列(En)
DeleteTableRow    删除一行(En)
IeSpellCheck IE拼写检查(En 需要安装拼写检查软件)
Indent    增加缩进
InsertDate 插入日期
InsertImage 插入图片
InsertRule 插入水平线(En)
InsertTable 插入表格(En)
InsertTableColumnAfter 插入表格列在后面(En)
InsertTableColumnBefore 插入表格列在前面(En)
InsertTableRowAfter 插入表格行在后面(En)
InsertTableRowBefore 插入表格行在前面(En)
InsertTime 插入时间
Italic 斜体
JustifyCenter 居中
JustifyFull 两端对齐
JustifyLeft 左对齐
JustifyRight 右对齐
NetSpell 网络拼写检查(En)
NumberedList 编号
Outdent 减少缩进
Paste 粘贴
Print 打印
Redo    重复
RemoveFormat 删除所有格式
Save    保存(En)
StrikeThrough    删除线
Subscript 下标
Superscript 上标
Underline 下划线
Undo    撤消
Unlink    删除链接

2) 拷贝 "ftb.imagegallery.aspx" 文件到同一目录下

3) FreeTextBox 属性设置

ImageGalleryPath = "~/image/upload"    上传默认路径
ImageGalleryUrl = "ftb.imagegallery.aspx?rif={0}&cif={0}"    ftb.imagegallery.aspx的目录, 只能用相对目录,不可以用"~"

4) ImageGallery 的设置
ftb.imagegallery.aspx文件里

< FTB:ImageGallery id ="ImageGallery1"
JavaScriptLocation ="InternalResource" UtilityImagesLocation ="InternalResource"
SupportFolder ="~/aspnet_client/FreeTextBox/"
AllowImageDelete =true
AllowImageUpload =true
AllowDirectoryCreate =false
AllowDirectoryDelete =false
runat ="Server" />

AllowDirectoryCreate - 能否建立文件夹
AllowDirectoryDelete - 能否删除文件夹
AllowImageUpload - 能否上传图片
AllowImageDelete - 能否删除图片
AcceptedFileTypes - 可以上传文件扩展名的数组(array)

四,FreeTextBox 其他的一些属性

1)工具栏皮肤

ToolbarStyleConfiguration = Offoce2003/OfficeXP/Office2000/officeMAC

2)设置语言

FreeTextBox1.Language=zh-cn

(中文,其他得在Language文件夹里都有)

 

在使用FreeTextBox控件进行文本编辑后，进行保存时需要取编辑内容对应的HTML文本内容。取编

辑内容使用my_freetextbox.ViewStateText属性会比使用my_freetextbox.Text属性，在后续的字

符串内容处理上会方便一些。

        在所取出的字符串中，系统自动加上了“/r/n”的回车换行字符串标示，在存储内容到数据库之前最

好将这些“/r/n”字符串用空串“”替换掉（如：my_str=my_str.Replace("/r/n","")），否则在将

来调用时会导致不正常显示。

        在所取出的字符串中，系统还把编辑文本中的双引号“用转义字符/进行了处理，如原字符串为

“wangshixin said "hello!"”，所取得的字符串实际为“wangshixin said /"hello!/"”，因此需要

将所获得的字符串中的全部“/"”用特定的字符串替换掉。在将来提取显示时，再将特定字符串替换为

“/"”（如：my_str=my_str.Replace("/"","wangshixin750920")）。