This post has been updated! Check Creating a Content Management System for your ASP.NET Web Site with CKEditor
When developing web sites for clients, a simple yet powerful value added proposition is to allow your customers the ability to easily change text on their web site, such as updating contact details, news items, or promotions.
This article will show you how to integrate the popular FCKeditor HTML Text editor into an ASP.NET site to provide your users with the ability to edit their web site without them having to access the underlying HTML or source files.
The Content Management System (CMS) we will be designing in this tutorial works by storing your page HTML in a database and then using a Formview to bind the HTML to the FCKeditor text control, just like using a normal text box.
Step 1: Create the Database
For this example I will be setting up a simple SQL Server database which holds the HTML content for the pages that the customer will be editing.
I’ve created a simple table, T_Pages which has 2 columns, one to store the page name, and the other to store the HTML.
The PageName field stores the name of the aspx file that we are editing, and the HTML field stores the raw HTML which makes up the page:
Step 2: Set up FCKeditor
Download the latest full version of FCKeditor from http://www.fckeditor.net/download. Extract the files to a directory called fckeditor in the root of your web site.
Download the FCKeditor ASP.NET Control from http://www.fckeditor.net/download. ExtractFredCK.FCKeditorV2.dll from the bin/Release/2.0/ folder and place it in the /bin directory in your web site.
Step 3: Create a site administration page to edit page content
Now we create a simple aspx page that contains a Formview. Make sure you secure this page so anonymous users cannot edit the page text!
At the top of the page, register the FCKeditor control:
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
Now create a Formview with an EditItemTemplate which binds the FCKeditor control to the HTML field in your database depending on what page is to be edited. The FCKeditor control has a large number of settings (see http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide) but the main ones that we are interested in are:
- ToolbarSet - This allows you to create a custom toolbar that only shows the font manipulation controls that you want your customers to access (We will be discussing this item and customising it further below, under Step 5 – Customising FCKEditor.)
- EditorAreaCSS - This allows you to specify what the text inside the FCKeditor control looks like.
The Formview will also need a Save Button which runs the update command to save changes. I also recommend a Cancel button, but have left it out of this example.
The Formview code then looks something like this:
<asp:FormView DataKeyNames="page" DataSourceID="dsSiteAdministration" ID="FormView1" runat="server" DefaultMode="Edit"> <EditItemTemplate> <FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server" ToolbarSet="MyToolbarSet" Value='<%# Bind("html") %>' EditorAreaCSS="/css/editor.css"> </FCKeditorV2:FCKeditor> <asp:LinkButton ID="btnSave" runat="server" CommandName="Update" Text="Save changes" /> </EditItemTemplate> </asp:FormView>
You also need to create the DataSource. I use the SQLDataSource here, but recommend ObjectDataSources for production environments:
<asp:SqlDataSource ID="dsSiteAdministration" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" SelectCommand="SELECT * FROM [T_Pages] WHERE page=@page" UpdateCommand="UPDATE [T_Pages] SET HTML=@HTML WHERE page=@page"> <SelectParameters> <asp:QueryStringParameter Name="page" QueryStringField="page" Type="string" /> </SelectParameters> <UpdateParameters> <asp:Parameter Name="html" Type="string" /> <asp:QueryStringParameter Name="page" QueryStringField="page" Type="string" /> </UpdateParameters> </asp:SqlDataSource>
Our application will call the SiteAdministration.aspx page with a parameter telling it which page to retrieve from the database for editing. such as SiteAdministration.aspx?page=AboutUs.
You should put checks in your page to ensure that a valid QueryStringParameter is being passed.
Step 4: Modify your pages so they retrieve content from your database
For existing pages that you wish to allow editing on, simply create a new row in your T_Pages database table with the PageName column containing the page name, and the html column containing all the editable part of the page text, including all html content.
Then, simply modify your pages by putting in a repeater to display the HTML from your database:
<html> <head> <title>Title</title> </head> <body> <asp:Repeater runat="server" ID="Repeater1" DataSourceID="dsPage"> <ItemTemplate> <asp:Label ID="lblPage" runat="server" Text='<%# Eval("HTML") %>' /> </ItemTemplate> </asp:Repeater> </body> </html>
The Datasource simply looks at what page you specify (using the DefaultValue setting in the <Parameter> section) and retrieves the appropriate HTML:
<asp:SqlDataSource ID="dsPage" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnectionString %>" SelectCommand="SELECT * FROM [T_Pages] WHERE page=@page" > <SelectParameters> <asp:Parameter Name="page" Type="string" DefaultValue="AboutUs" /> </SelectParameters> </asp:SqlDataSource>
We will also show a link to edit the page. For production environments, you should set this link up to only appear if the user has authenticated as a site administrator. The script below removes the ‘.aspx’ extension from the current page and then creates a hyperlink with the remainder as a query parameter to the Site Administration page.
If HttpContext.Current.User.Identity.IsAuthenticated Then Dim MyPage As String = LCase(Left(System.IO.Path.GetFileName(Request.ServerVariables("SCRIPT_NAME")), InStr(System.IO.Path.GetFileName(Request.ServerVariables("SCRIPT_NAME")), ".") - 1)) Response.Write("<a href='/admin/siteadministration.aspx?page=" + MyPage + "'>Edit this page</a>") End If
So let’s recap with an example ‘About Us’ page called aboutus.aspx:
- The SQL Database contains a record for ‘aboutus’ as the Page and the formatted HTML for the page in the HTML column.
- Visitors to aboutus.aspx will get the formatted HTML page from the database via a Repeater control.
- Site Administrators will see a ‘Edit this Page’ link which will go tositeadministration.aspx?page=aboutus.
- Clicking on ‘Edit this Page’ will show the FCKeditor text box populated with the HTML from the database in a WYSIWYG format.
Step 5: Customising the FCKeditor Toolbar
To finish off the ToolbarSet can be customised to show only the text manipulation features you approve. The default toolbar set is defined in the \fckeditor\fckconfig.js file as follows:
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'], ['Form','Checkbox','Radio','TextField','Textarea','Select','Button', 'ImageButton'], ‘/’, ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'], ['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'], ['Link','Unlink','Anchor'], ['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'], ‘/’, ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor'], ['FitWindow','ShowBlocks','-','About'] // No comma for the last row. ] ;
You may wish to cut down some of these options by defining your own toolbar set. For example:
FCKConfig.ToolbarSets["Mytoolbarset"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink'] ] ;
You need to reference your new ToolbarSet in your ASP.NET control, as discussed in Step 3.
That's it! There are many more options to play around with, and the whole source code is available to customise even futher. For more details, check out the FCKeditor web site.