FreeTextBox3.1.6使用说明（整理）

从baidu或google上下载最新版本的FreeTextBox3.1.6

打开你的项目，添加引用Framework-2.0/FreeTextBox.dll
打开工具栏，反键，选择项，再次添加，这样你的工具栏就会多出FreeTextbox控件，还会有其他一些控件，不过我都没动，也不知道具体怎么用，毕竟我也是菜鸟！
然后将ftb.imagegallery.aspx拷贝到需要使用到的.aspx文件的同级目录下，当然母板也可以用！
这样就可以使用freetextbox了

有几个地方需要注意
1.修改ImagaeGallerPath属性为你图片放置的路径
2.Language调整语言. 简体中文是zh-cn
3.ToolbarLayout属性,添加一个InsertImageFromGallery就可以从图片库中插入图片了
其实这里面还可以添加很多按钮功能,至于分别有什么用就不清楚,都粘出来给大家吧!
 ToolbarLayout="ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu,
                                 FontForeColorPicker, FontBackColorsMenu, FontBackColorPicker, Bold, Italic, Underline|
                                 Strikethrough, Superscript, Subscript, InsertImageFromGallery, CreateLink, Unlink,
                                 RemoveFormat, JustifyLeft, JustifyRight, JustifyCenter, JustifyFull, BulletedList|
                                 NumberedList, Indent, Outdent, Cut, Copy, Paste, Delete, Undo, Redo, Print, Save,
                                 ieSpellCheck, StyleMenu, SymbolsMenu, InsertHtmlMenu, InsertRule, InsertDate|
                                 InsertTime, WordClean, InsertImage, InsertTable, EditTable, InsertTableRowBefore,
                                 InsertTableRowAfter, DeleteTableRow, InsertTableColumnBefore, InsertTableColumnAfter,
                                 DeleteTableColumn, InsertForm, InsertForm, InsertTextBox, InsertTextArea|
                                 InsertRadioButton, InsertCheckBox, InsertDropDownList, InsertButton, InsertDiv,
                                 InsertImageFromGallery, Preview, SelectAll, EditStyle,InsertImageFromGallery"

4.打开新建目录，上传文件等功能
   修改ftb.imagegallery.ASPx页面可以做到
   <FTB:ImageGallery id="ImageGallery1"
   SupportFolder="~/ASPnet_client/FreeTextBox/"
   AllowImageDelete="true" AllowImageUpload="true"
   AllowDirectoryCreate="true" AllowDirectoryDelete="true" runat="Server" />
   修改AllowImageDelete等属性
...这个我没用到!所以错了也不要找我!呵呵!~

还有一点大家要注意,有些时候大家是要对用户输入做危险字符过滤

这对FreeTextBox没必要,他会将用户输入的任何东西存储起来,就算你输入的是危险字符或标签它也只当做是文本!

---

 

好了,这就是FreeTextBox控件使用...写的很烂,大家不要骂我就ok了!
我会经常上传一些我自己的开发经验,希望大家能多多光顾我的blog!
thank you !

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

　　首先把下载好的 FTBv3-1-6.zip 解压。然后对应 asp.net 的版本 FreeTextBox.dll 添加到 Visual Studio 的工具栏里面，如 asp.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 返回的图片代码。