The design and use of the Sueetie Content Part Control for inline page editing
Sueetie Content Part Design
The Sueetie Content Part Control was originally a client-side editor based on the NicEdit jscript editor. It did the job but we wanted a more robust solution. So the Content Part Control was redesigned in July 2010 as a server-side control while using javascript for inline, real-time editing capabilities. But instead of NicEdit as the editor, the Content Part now uses TinyMCE, as does BlogEngine.NET and several other Sueetie Application functions.
We are using TinyMCE as our editor for several reasons:
- We like it
- TinyMCE is one of the most popular and best-known editors in the ASP.NET developer community
- TinyMCE is used in many other areas in Sueetie
- TinyMCE is very extensible, so community administrators can customize TinyMCE with the functionality they need
The Content Part was designed to support multiple content areas per page. Here is a screenshot of the Content Part Control in action.
The Content Part also has an HTML view.
There is also a one-click button to expand the editor window in either HTML or Rich Text view to full-screen, which is very nice.
Using the Sueetie Content Part
To have editing capabilities with the Sueetie Content Part Control a user must be in the ContentAdministrator role, though this can be overwritten for each control as we'll see in a minute. Users with edit permissions will see the "Pencil" button shown here. The image is located at /themes/THEME/images/pencil.png, so you can change this if you wish. You can also modify the position of the pencil through CSS.
You can add Roles that can edit Content Areas using the "Roles" property with the Content Part.
Here is a Content Part with Roles added. In addition to the ContentAdministrator group, members of the ShopManagers and ProductManagers group would be able to edit this particular content area.
<SUEETIE:ContentPart ID="ContentPart2" runat="server" ContentID="HomeContent"
Roles="ShopManagers,ProductManagers" />
ContentID
Each content part must be assigned a unique ContentID. Content Parts can share contentIDs, in which case changing the contents of one content part will update all content parts with that ContentID.
Page Configuration Issues
There are two requirements for the page housing the Content Part.
1) ValidateRequest="false" must be added to the page directive. You'll find this a common practice with BlogEngine.NET and other applications which use the TinyMCE editor.
2) To enable text edit window dragging DOCTYPE xhtml1-transitional.dtd is not supported. You would need to remove "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" from the following DOCTYPE declaration. If you need xhtml1-transitional.dtd support, the edit window will still display center-screen and you can go full-screen with it.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Centralized Content Editing
If you wish to edit all site content areas in a single location you can do so in Sueetie Administration, in Content Management -> Content Parts. Administrative centralized content editing continues to use the NicEditor rather than TinyMCE. Role access is no longer assigned in the Centralized Administration but with the Roles property in the HTML markup as shown earlier.
