Background

I originally created the Content Control as alternative to a traditional CMS system.  I wanted the editing capability of a CMS for some of my end-users and friends, but I didn't want the overhead or commitment.  May of the sites that I create do things, and aren't just static content.  A CMS system often is the site.  I wanted to retain creative control over the site's construction, but provide flexibility.

I decided the best way to do it was to make a simple-to-use ASP.Net server control.  The Content Control was born.

It doesn't need a database.  It just uses the file system.  Simple.  Tasty.

Demo

You're looking at it.  This page is built using Content Controls.

The Content Controls on this page have been set to allow anonymous editing, so you should see a button at the bottom of the page that says Edit Content.

Usage

The Content Control is an ASP.Net user control written in Visual Basic.Net.  It was written under the framework v. 2.0, using Visual Web Developer Express 2005.  It generates XHTML 1.1 compliant code.

It appears as a "literal" of the content when in viewing mode.  It renders as a TinyMCE enhanced textarea in editing mode. 

You can insert them into any page, just like any other ASP.Net control:

<UserContent:ContentControl runat="server" ID="MyContent" AnonymousEditing="True"></UserContent:ContentControl>

Also, make sure to register it, within your web.config:

<add tagPrefix="UserContent" tagName="ContentControl" src="~/App_Controls/ContentControl.ascx"/>

Dependencies

  • It depends on TinyMCE for the actual Javascript editing interface.  This is located in the Admin/tiny_mce directory.
  • I've added included a custom plugin in the TinyMCE distribution. It's called advimageNet,  and provides a nicer browser for images when using TinyMCE. Not critical, but tasty.
  • It needs write permissions wherever you choose to store the content files.

Properties

The Content Control has several properties available.  They can all be set at the web.config level for global scope, or on any individual control.  Here's the list:

AnonymousEditing, Use this to specify a control that anybody may edit freely.  Normally the control will only allow editing for authenticated users (forms authentication).

ContentFileName, Use this to specify a different filename for the control's content storage.  By default, it uses for naming convention "Parent Filename" + "Control ID" as its filename.

ContentCSS, Use this to specify a stylesheet for edit mode.  This will also supply the classes that are visible in the editor.

EditModeRows + EditModeCols, Use these to specify the dimensions of the textarea.  The Content Control (edit mode) is just a text area that is transformed by TinyMCE.  If you make it very narrow, an alternate toolbar setup is used to save width.

ImagePath, Use this to specify which folder you store your images.  These will be available on the image menu of TinyMCE.

UserName, Use this to specify which user (or users) may edit the control's content.  You can specify one person, several, or the special Any.   Normally the control will only allow editing for authenticated users (integrates with your existing authentication).

BlockFormats, Use this to specify which block formats are available within TinyMCE (such as h1, h2, p, div).

Customization

Since the Conent Control uses TinyMCE for the actual editing, you have lots flexibilty available to you.  Normally, I run a pretty stripped-down version of TinyMCE, but you are free to use any options that you choose.

Furthermore, since you have all the source to the control, you can modify any aspect about how it works.

Localization

The Content Control is totally localized.  Currently, it includes translations in English and Dutch.  Additional translations can easily be added using the .resx files as templates.  If you make any new translations, be sure to contact me so I can include them in future releases.