FreeTextBox使用详解(FTBv3-1-6)

文本编辑框，类似于csdn使用的fckedit。具有广泛的用途。下面介绍其中之一FreeTextBox：

下载FreeTextBox：

http://freetextbox.com/files/6949/download.aspx

下载完解压。

我使用的是Framework-2.0中的FreeTextBox.dll。这个比1.0的要容易上手点，不需要配置太多。

将这个文件夹复制到项目文件的bin目录下。然后添加引用。

同时可以复制aspnet_client文件夹及内容进入你的项目文件夹中。我是直接放在根目录下的。这个的用处就是传输图形图像的使用。可以创建，删除文件夹和文件的。没有这个，你使用图像麻烦。

此时你可以参考它自带的英文说明（readme.txt）：照做即可。

1 Installation of dll

2 Installing the FreeTextBox support files

上面2步，参考上面的讲解。

3 Using FreeTextBox

将下面的内容加入aspx文件的顶部：

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

加入下面的代码在<form runat="server"> 之间：

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

我的使用如下：

<FTB:FreeTextBox id="FreeTextBox1" runat="Server" AllowHtmlMode="True" ButtonFileExtention="gif,jpg" ImageGalleryPath="~/imagesLib/" ToolbarLayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu|Bold,Italic,Underline,Strikethrough;Superscript,Subscript,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImage,InsertImageFromGallery,InsertRule|Cut,Copy,Paste;Undo,Redo,Print" />

这个可以自定义的。readme里也有说明。

 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

其中的参数添加在ToolbarLayout中。比较有用的红色显示。

这样你可以运行了。

界面如下：

ParagraphNormalHeading 1Heading 2Heading 3Heading 4Heading 5Heading 6FormattedAddress FontArialCourier NewGaramondGeorgiaTahomaTimesVerdana Size123456 ColorBlackGrayDarkGrayLightGrayWhiteAquamarineBlueNavyPurpleDeepPinkVioletPinkDarkGreenGreenYellowGreenYellowOrangeRedBrownBurlyWoodBeige

class="FreeTextBox1_DesignBox" id="FreeTextBox1_designEditor" style="padding: 0px; width: 598px; height: 349px;" src="about:blank">

class="FreeTextBox1_DesignBox" id="FreeTextBox1_previewPane" style="padding: 0px; width: 598px; height: 349px;" src="about:blank">

Design

HTML

如果出现如下错误：A potentially dangerous Request.Form value was detected from the client

则需要添加代码：ValidateRequest="false"

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FreeTextBox.aspx.cs" Inherits="FreeTextBox" ValidateRequest="false" %>

注意：你可以在属性窗口中进行众多设置。自己体会一下。

比如:ImageGalleryPath设置为~/imagesLib/

 下面讲解图像处理：

复制ftb.imagegallery.aspx进入项目文件夹：

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

我的代码如下：

<% @ Page Language = " C# "  ValidateRequest = " false "  Trace = " false "   %>
<% @ Register TagPrefix = " FTB "  Namespace = " FreeTextBoxControls "  Assembly = " FreeTextBox "   %>
< script runat = " server " >
protected   void  Page_Load(Object Src, EventArgs E)  ... {
    
    // *** remove this return statement to use the following code ***
    return;

    string currentFolder = ImageGallery1.CurrentImagesFolder;
    
    // modify the directories allowed
    if (currentFolder == "~/imagesLib") ...{

        // these are the default directories FTB:ImageGallery will find
        string[] defaultDirectories = System.IO.Directory.GetDirectories(Server.MapPath(currentFolder),"*");
        
        // user defined custom directories
        string[] customDirectories = new string[] ...{"folder1","folder2"};
        
        // the gallery will use these images in this instance
        ImageGallery1.CurrentDirectories = customDirectories;
    }
    
    
    // modify the images allowed
    if (currentFolder == "~/imagesLib") ...{

        System.IO.DirectoryInfo directoryInfo = new System.IO.DirectoryInfo(Server.MapPath(currentFolder));

        // these are the default images FTB:ImageGallery will find
        System.IO.FileInfo[] defaultImages = directoryInfo.GetFiles("*");
        
        // user defined custom images (here, we're just allowing the first two)
        System.IO.FileInfo[] customImages = new System.IO.FileInfo[2] ...{defaultImages[0], defaultImages[1]};
        
        // the gallery will use these images in this instance
        ImageGallery1.CurrentImages = customImages;
    }    
    
}
</ script >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
     < title > Image Gallery </ title >
</ head >
< body >

     < form id = " Form1 "  runat = " server "  enctype = " multipart/form-data " >   
    
         < FTB:ImageGallery id = " ImageGallery1 "  
            JavaScriptLocation = " ExternalFile "  
            UtilityImagesLocation = " ExternalFile "  
            SupportFolder = " ~/aspnet_client/FreeTextBox/ "
            AllowImageDelete = " true "  AllowImageUpload = " true "  AllowDirectoryCreate = " true "  AllowDirectoryDelete = " true "   runat = " Server "   />
        
     </ form >

</ body >
</ html >

 

自己对应文件夹体会一下：

SupportFolder="~/aspnet_client/FreeTextBox/" 就是对应的你复制的aspnet_client文件夹。

currentFolder == "~/imagesLib" 就是你设定的图像存储文件夹。运行后你可以新建或删除文件夹。

AllowImageDelete="true" AllowImageUpload="true" AllowDirectoryCreate="true" AllowDirectoryDelete="true"

就是使得上述功能能够使用。

我将其<htm>修改为<html xmlns="http://www.w3.org/1999/xhtml">省得老是报错。

默认的语言设置为英文，改为中文的用对应的那个值Language="zh-CN"。

测试通过。

下面贴一个我师兄用的布局图：<FTB:FreeTextBox id="FreeTextBoxXinXiNeiRong" runat="Server" AllowHtmlMode="True" ButtonFileExtention="gif,jpg,*.*" ImageGalleryPath="~/imagesLib/" ToolbarLayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu|Bold,Italic,Underline,Strikethrough;Superscript,Subscript,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImage,InsertRule,InsertImageFromGallery|Cut,Copy,Paste;Undo,Redo,Print" Height="400px" Width="550px" Language="zh-CN" />

我的添加了个表格
ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu|Bold,Italic,Underline,Strikethrough;Superscript,Subscript,RemoveFormat|JustifyLeft,JustifyRight,JustifyCenter,JustifyFull;BulletedList,NumberedList,Indent,Outdent;CreateLink,Unlink,InsertImage,InsertRule,InsertImageFromGallery,InsertTable|Cut,Copy,Paste;Undo,Redo,Print