2009年3月23日星期一

ASP.NET2.0中使用FreeTextBox并解决本地图片上传问题

FreeTextBox是一个可以在ASP.NET环境中使用的HTML编辑器,功能强大,而且免费。

【一、下载】
可以到官网下载最新版本,本文使用 3.2.2版,下载地址: http://freetextbox.com/files/9729/download.aspx

【二、添加到Visual Studio2005工具箱】
下载后得到的是一个zip的压缩包,解压后,把Framework-2.0文件夹中的FreeTextBox.dll添加到Visual Studio2005的工具箱中。具体方法可以参考本站其它文章。

【三、使用】
1,打开Visual Studio 2005,创建一个网站项目。
2,新建一个网页,从工具箱中把FreeTextBox控件拖拽到页面上合适的位置,并调整大小。
3,调整FreeTextBox的属性。如:
language:使用的语言,中文可以设为:zh-CN
AllowHtmlMode:EnableHtmlMode:是否允许HTML模式,可选true或false
ButtonSet:按钮风格,如Office2003等
PasteMode:粘贴模式,如Default正常、Disable禁用、Text文本
StartMode:启动模式,有设计模式和HTML模式2个选项
4,这样就可以使用了,要想获得编辑器中的内容,使用: this.FreeTextBox1.Text 即可。
5,当提交时,会提示:检测到有潜在危险的 Request.Form 值,此时在网页的page指令中加入:ValidateRequest="false"即可。

【四、解决本地图片上传的问题】
按照上面的方法可以使用FreeTextBox的基本功能,但是这时插入图片时是使用网络上的图片,要求输入以HTTP开始的地址。
其实要想使用本地的图片,在FreeTextBox中是使用一个叫ImageGallery的东西的。方法如下:
1,在上面的例子中,把下载到的压缩包中的examples\fully_loaded_external文件夹中的ftb.imagegallery.aspx文件拷贝到和包含FreeTextBox的网页相同的目录中。
2,把下载到的压缩包中的aspnet_client文件夹拷贝到网站应用程序的根目录。
3,调整FreeTextBox控件的属性:
ImageGalleryPath:相册路径,默认是~/image/,可以指向上传图片的保存路径,为安全,可以在指定文件夹下为有权限用户创建以用户名命名的文件夹,然后使用程序设置此属性。
ImageFalleryUrl:指向第一步拷贝的文件的链接
SupportFolder:默认为/aspnet_client/FreeTextBox/,即上面第二步拷贝的文件夹
4,最重要的一步,设置Toolbar,注意此版本的Toolbars属性面板不可用,只能进入HTML源编辑视图,为FreeTextBox控件指明Toolbars选项,例如:
<ftb:freetextbox id="FreeTextBox1" toolbarlayout="ParagraphMenu,FontFacesMenu,FontSizesMenu, FontForeColorsMenu,FontForeColorPicker,FontBackColorsMenu, FontBackColorPickerBold,Italic,Underline,Strikethrough,Superscript, Subscript,RemoveFormatJustifyLeft,JustifyRight,JustifyCenter,JustifyFull; BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImageCut, Copy,Paste,Delete;Undo,Redo,Print,SaveSymbolsMenu,StylesMenu, InsertHtmlMenuInsertRule,InsertDate,InsertTimeInsertTable, EditTable;InsertTableRowAfter,InsertTableRowBefore,DeleteTableRow; InsertTableColumnAfter,InsertTableColumnBefore, DeleteTableColumnInsertForm,InsertTextBox,InsertTextArea, InsertRadioButton,InsertCheckBox,InsertDropDownList, InsertButtonInsertDiv,EditStyle,InsertImageFromGallery, Preview,SelectAll,WordClean,NetSpell" runat="server"> 

注意,其中toolbars属性尽量写到一行中,本文为了显示方便进行了换行处理。
另外,细心的读者会发现,这里实际上是列出了要出现的按钮,可以通过更改这个列表,来更改工具条中的按钮。

这样就可以把本地文件夹中的图片上传显示到文章中了。

没有评论: