FreeTextBox in Asp .Net

FreeTextBox :

In this article I will explain you how easy it is to add an open source HTML editor in your ASP .Net application. If you are creating your own content management system and you want

your user to give capabilities to express their thoughts in formatted way, FreTextBox is your available open source solution. If you are creating a discussion forum and want your users to give high end content editing capabilities this is a very good option.

Step - 1

So very first thing that you have to do is to get latest version of FreeTextBox editor from its web site http://freetextbox.com/download/ Once you download the latest you will find the latest assembly for using in your application. Get this dll file copy this file to locally to your project folder inside Bin folder. Once this is done you are half way done.

Step - 2

            Next thing is to add a reference to your web.config file. Simply add following line in your web.config file inside <httpHandlers> section.

<add verb="GET" path="FtbWebResource.axd" type="FreeTextBoxControls.AssemblyResourceHandler, FreeTextBox" />

Step - 3

            Next thing is to add a reference to your web page where you want to use this editor. Simply add following line to your web page after page directive.

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

Step - 4

            Now before you actually add this control on your page and start using it a very important task has to be done is adding a support folder to your application. Usually when you download the source from the link above you will get a folder named aspnet_client/ FreeTextBox. Simply copy the FreeTextBox folder inside your application. Make sure you know the exact path where you are placing this folder as we will use it while we actually declare this control on our page. This folder contains supporting JavaScript files and images files and css files.

Step - 5

            And the last step is to declare this control on your page and start using it. It can be done by code below.

<FTB:FreeTextBox ID="FreeTextBox1"  Focus="true" SupportFolder="FreeTextBox/"

                                    JavaScriptLocation="ExternalFile" ButtonImagesLocation="ExternalFile" ToolbarImagesLocation="ExternalFile"

                                    ToolbarStyleConfiguration="OfficeXP" 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"

runat="Server" GutterBackColor="red" DesignModeCss="designmode.css" ButtonSet="Office2000" />

And that’s it, your cool and powerful HTML editor is ready in your users’ service. Before we close this topic let’s discuss how we can use this control to store the content to your database, catch while storing and accessing these value.

The value of your editor can be easily access using line below.

Output.Text = FreeTextBox1.Text;

Here the Output is the literal control which can easily decode your values from HTML editor and show your users for just viewing purpose. This control can be defined as below. You can also store this data into database and retrieve back upon user’s request on to similar literal control.

<asp:Literal id="Output" runat="server"   />

Catch:-

Now when you actually start using this you will get an error as below.

A potentially dangerous Request.Form value was detected. This screen will look something like below.

Simply add this to your page directive and this error will disappear

ValidateRequest="false".

This is what you have to do to use a fully functional HTML editor in your web application.