Creating a Content Management System for your ASP.NET Web Site with CKEditor

This article will show you how to integrate CKEditor 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 CKeditor 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 CKeditor

Go to the CKEditor download site and download the latest versions of both CKEditor 3.x and the CKEditor for ASP.NET control..  Extract the files to a directory called CKeditor in the root of your web site.
Extract CKEditor.NET.dll from the bin\Release\ 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 CKeditor control:

<%@ Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor" %>

 
Now create a Formview with an EditItemTemplate which binds the CKeditor control to the HTML field in your database depending on what page is to be edited.  The CKeditor control has a large number of settings (see http://docs.cksource.com/CKEditor_3.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>
    <CKEditor:CKEditorControl ID="CKeditor1" runat="server" 
        ToolbarSet="MyToolbarSet"
        Value='<%# Bind("html") %>' EditorAreaCSS="/css/editor.css">
    </CKEditor:CKEditorControl>
    <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)
{
    string MyPage = Strings.LCase(Strings.Left
        (System.IO.Path.GetFileName(Request.ServerVariables("SCRIPT_NAME")), 
        Strings.InStr(System.IO.Path.GetFileName(Request.ServerVariables("SCRIPT_NAME")), ".") - 1));
    Response.Write("<a href='/admin/siteadministration.aspx?page=" + MyPage + "'>Edit this page</a>");
}

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 to siteadministration.aspx?page=aboutus.
• Clicking on 'Edit this Page' will show the CKEditor text box populated with the HTML from the database in a WYSIWYG format.

Step 5: Customising the CKEditor Toolbar

Finally, the ToolBar can be customised to only show the text manipulation features you approve. 
The default toolbar sets Full and Basic are defined as follows:
config.toolbar_Full =
[
    { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
    { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
    { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton',   'HiddenField' ] },
    '/',
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-   ','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
    { name: 'links', items : [ 'Link','Unlink','Anchor' ] },
    { name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
    '/',
    { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
    { name: 'colors', items : [ 'TextColor','BGColor' ] },
    { name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];  


config.toolbar_Basic =
[
    ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

 
To add your own toolbars, simply add a custom toolbar definition inside the config.js file, and reference your new ToolbarSet in your ASP.NET control, as discussed in Step 3.


About The Author

This article is written by bartek marnane, He blogs at www.blog.evonet.com.au/