FREETEXTBOX的应用

用C#写网站后台时的记录


    FreeTextBox是一款开源的网页文本编辑器,这一款所见即所得的编辑器在

文章编辑时可以方便用户使用,其中的插入表格和图片功能也很方便使用。

这次使用的版本为FTBv3-3-1,在测试页上实现其功能。

第一步、将压缩文件解压如图所示

在项目中添加BIN文件夹,讲对应的Franmwork版本的框架中的DDL文件加入项目。

第二步、将压缩文件内的aspnet_client文件夹加入项目中,其内容为该控件的所有样式和外观图片。

第三步、在网页处加入下面代码

<@% Page ValidateRequest="false" %>

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

第四步、在需要使用FREETEXTBOX的地方使用下面代码

<FTB:FreeTextBox ID="TextBox" runat="Server" 

           ButtonDownImage="True"

           ImageGalleryPath="~/images"

           Language="zh-CN"

toolbarlayout="ParagraphMenu,FontFacesMenu,FontSizesMenu,FontForeColorsMenu,FontForeColorPicker,FontBackColorsMenu,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,StylesMenu,InsertHtmlMenu|InsertRule,InsertDate,InsertTime|InsertTable,EditTable;InsertTableRowAfter,InsertTableRowBefore,DeleteTableRow;InsertTableColumnAfter,InsertTableColumnBefore,DeleteTableColumn|InsertForm,InsertTextBox,InsertTextArea,InsertRadioButton,InsertCheckBox,InsertDropDownList,InsertButton|InsertDiv,EditStyle,InsertImageFromGallery,Preview,SelectAll,WordClean,NetSpell" ImageGalleryUrl="ftb.imagegallery.aspx?rif={0}&cif={0}">

</FTB:FreeTextBox>

说明:其中的Toolbarlayout属性为该控件可选择的功能按钮,纤细功能如下

*********************************************

Customizing FreeTextBox

*********************************************

FreeTextBox has as default set of buttons and dropdownlists in its toolbars. If you

would like to customize the buttons, there are three methods you can use.

1. ToolbarLayout String

This property accepts a string of ToolbarItem names. Use commas ( , ) to separate items. A pipe ( | ) will insert a ToolbarSeparator and a semicolon ( ; ) will start a new Toolbar.

The default way to configure toolbars is to use use the propery ToolbarLayout

 <@% Page ValidateRequest="false" %>

 <html>

 <body>

   <form runat="server">

     <FTB:FreeTextBox id="FreeTextBox1"

       ToolbarLayout="paragraphmenu,fontsizesmenu;bold,italic,underline|

        bulletedlist,numberedlist"

       runat="Server" />

   </form>

 </body>

 </html>

Valid values for ToolbarButtons and ToolbarDropDownLists are

 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

The following values are only available in Pro versions of FreeTextBox (or if running on localhost)

 FontForeColorPicker, FontBackColorPicker, EditTable

 InsertTableRowAfter, DeleteTableRow, InsertTableColumnBefore, InsertTableColumnAfter, 

 DeleteTableColumn, InsertForm, InsertForm, InsertTextBox, InsertTextArea, 

 InsertRadioButton, InsertCheckBox, InsertDropDownList, InsertButton, InsertDiv, 

 Preview, SelectAll, EditStyle, WordClean

现在就可以看到大致的页面效果了,讲该控件设置成服务器控件,通过ID就可以操控其中的数据。

第五步、加入上传和添加图片功能

该功能的添加比较复杂,是通过另外一个ASPX页面实现的。

将压缩文件中的ftb.imagegallery.aspx加入项目,并且与需要调用的页面放在同一个目录下。

   在项目中创建一个文件夹存放上传的图片,建议在根文件夹中创建,方便使用。

修改ftb.imagegallery.aspx文件

<FTB:ImageGallery id="ImageGallery1" 

   JavaScriptLocation="ExternalFile" 

   UtilityImagesLocation="ExternalFile" 

   AllowImageDelete="true" 

   AllowImageUpload="true"

   SupportFolder="~/aspnet_client/FreeTextBox/"

   AllowDirectoryCreate="false" 

   AllowDirectoryDelete="false" runat="Server" />

在控件的属性出设置

ImageGalleryUrlftb.imagegallery.aspx?rif={0}&cif={0}

ImageGalleryPath为存放上传图片的文件夹地址

现在可以使用上传图片的功能了,但是我们发现上传图片的对话框在插入图片后并没有关闭,这个可以通过修改该控件的JS文件实现。

FTB-ImageGallery.js中找到FTB_InsertImage函数,在最后加上this.window.close()

现在控件可以使用了。

官方说明

*********************************************

Using FreeTextBox

*********************************************

To add FreeTextBox to an ASP.NET page, do the following:

1. Add the following lines to the top of your page:

   <@% Page ValidateRequest="false" %>

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

2. Add the following code between <form runat="server"> tags:

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

Here's a complete example

   <@% Page ValidateRequest="false" %>

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

   <!DOCTYPE html>

   <html>

   <head>

     <title>FreeTextBox Test</title>

   </head>

   <body>

     <form runat="server">

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

     </form>

   </body>

   </html>

工具栏的应用:

Procedurally

You can define which toolbar items appear by adding ToolbarItems in much the same way that one would add DataGrid Columns to a DataGrid. In order to do this, set AutoGenerateToolbarLayoutFromString=false:

 <html>

 <body>

    <form runat="server">

        <FTB:FreeTextBox id="FreeTextBox1" AutoGenerateToolbarsFromString="false" runat="server" >

            <Toolbars>

                <FTB:Toolbar runat="server">

                    <FTB:ParagraphMenu runat="server" />

                    <FTB:FontSizesMenu runat="server" />

                </FTB:Toolbar>

                <FTB:Toolbar runat="server">

                    <FTB:Bold runat="server" />

                    <FTB:Italic runat="server" />

                    <FTB:Underline runat="server" />

                    <FTB:ToolbarSeparator runat="server" />

                    <FTB:BulletedList runat="server" />

                    <FTB:NumberedList runat="server" />

                </FTB:Toolbar>

                <FTB:Toolbar runat="server">

                    <FTB:InsertHtmlMenu runat="server">

                        <Items>

                            <FTB:ToolbarListItem Text="Cool1" Value="<b>lalala</b>" runat="server" />

                            <FTB:ToolbarListItem Text="Cool2" Value="<i>lalala</i>" runat="server" />

                            <FTB:ToolbarListItem Text="Cool3" Value="<u>lalala</u>" runat="server" />

                        </Items>

                    </FTB:InsertHtmlMenu>

                    <FTB:StyleMenu runat="server">

                        <Items>

                            <FTB:ToolbarListItem Text="Highlighed" Value="<b>Highlighed</b>" runat="server" />

                            <FTB:ToolbarListItem Text="SmallCaps" Value="<i>smallcaps</i>" runat="server" />

                        </Items>

                    </FTB:StyleMenu>

                </FTB:Toolbar>

            </Toolbars>

        </FTB:FreeTextBox>

    </form>

 </body>

 </html>

3. Code (Page_Load or Code Behind)

ToolbarButtons and ToolbarDropDownLists can also be set through code. You should set the property AutoGenerateToolbarsFromString to false if you want only the ToolbarItems you define.

 <script runat="server">

 void Page_Load(object Src, EventArgs E) {

    Toolbar toolbar1 = new Toolbar();

    toolbar1.Items.Add(new ParagraphMenu());

    toolbar1.Items.Add(new FontSizesMenu());

    FreeTextBox1.Toolbars.Add(toolbar1);

    Toolbar toolbar2 = new Toolbar();

    toolbar2.Items.Add(new Bold());

    toolbar2.Items.Add(new Italic());

    toolbar2.Items.Add(new Underline());

    toolbar2.Items.Add(new ToolbarSeparator());

    toolbar2.Items.Add(new BulletedList());

    toolbar2.Items.Add(new NumberedList());

    FreeTextBox1.Toolbars.Add(toolbar2);

    Toolbar toolbar3 = new Toolbar();

    StyleMenu styleMenu = new StyleMenu();

    styleMenu.Items.Add(new ToolbarListItem("Highlight","Highlight"));

    styleMenu.Items.Add(new ToolbarListItem("SmallCaps","smallcaps"));

    toolbar3.Items.Add(styleMenu);

    FreeTextBox1.Toolbars.Add(toolbar3);

 }

 </script>

 <html>

 <body>

    <form runat="server">

        <FTB:FreeTextBox id="FreeTextBox1" AutoGenerateToolbarsFromString="false" runat="server" />

    </form>

 </body>

 </html>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值