Defining editors 

Once we have created a class representing the type of content we plan to publish on the site it's time to add the properties we identified and define the control needed to change that property. E.g. i want to be able to edit the Title on all pages, choose an image for the start page, write text on the text page with a WYSYWYG editor, and so on. Okay, lets start...

Title on all pages

The WithEditableTitle attribute on the base class tells N2 that all types derived from that class should have a textbox where we can edit the title. Since the start, text, and news pages all inherit from this class they will all have a title which can be edited through the web interface.

Text on the text and news pages

The EditableFreeTextArea attribute defines a free text editor for the "Text" property. Since the News page inherits from the text page both of these will have a nice html editor when we edit them.

The number (100) is just a sort order. Since thelarge image below has a lower sort order it will appear above the free text editor.

The large image on the start page

The EditableUrl attribute allows us to pick image from the file cabinet. It also allows us to select a page url from within the site which can be avoided using some tricks. But thats for another day. The other images and links can be defined with the same attribute. 

The date on the news page

In this case I decided to use a simple text box to edit the date. I could use the Calendar control instead using the Editable attribute like this:

[N2.Details.Editable("Published", typeof(SelectedDate), "SelectedDate", 20)]

In the association site example I defined a custom textbox with a little javascript date time picker popup.

The introduction on the news page

On the news page I didn't want a WYSYWIG editor because we are displaying this text in a list. Instead I'm using a textbox and the EditorModifier attribute to change a property on the textbox to make a bit larger.

A nice feature is that you can roll your own editors by inheriting from the Editable attribute and using them decorate your properties. This allows you greater control over which editors are used to edit the page and how values from the editors are mapped to the page.

It might be useful to know how the options in the edit interface can be restricted in regard to security and integrity or you could go and read about how we can display the content using templates.