How can I support user edited content in a complex web application?

Question

I'm building a web site (using ASP.NET, MVC 3, Razor) and I'm not using an off the shelf CMS. This is because I evaluated a lot of existing CMS's, and found them all to have a massive learning curve, tons of features I didn't need, and they force you into a page oriented model. By "page oriented model", I mean that you can specify a general page layout and stylesheets, but the object that the user can edit is a whole page, which displays, for example, in a central panel, and maybe you can customize the sidebars as well.

But this site is very design centric, and needs to be much more fluid and granular than this. By "design-centric", I mean that the site was built in Photoshop by a graphic designer, and there is heavy use of images and complex styling to map the design to HTML/css/js. Also, every page on the site is totally different. There are also UI elements such as accordion panels, in which we need the user to be able to edit the content of each panel, but certainly not the jQuery+HTML that powers the accordion. The users are subject matter experts but very non-technical.

So I'll have a page with lots of complex layout and styling, which I don't want the user to access, but within this there will be, say, a div containing text that I would like the user to be able to edit.

How can I best accomplish this?

So far, I'm implementing this by having snippets, which are little units of html, stored in external files, that the user can edit. In run mode, these are loaded and displayed inline (with a little "Edit This Content" button if you're logged in and have permissions). If you click the Edit button, you get a little WYSIWYG editing screen, where you can edit and save changes. So I can control all the messy stuff, and put in little placeholders for user editable content. But this isn't entirely simple for me, and I'm wondering if there's a better way.

Answer 1

Don't mean to necro this, but it seems to be the most relevant question to what I'm currently researching. I recently built something similar as you described above, but I'm pulling data from a database instead of static files. For each page (like /about or /contact) in the Controller I pull data for that page from the DB in the form of a Json string key/value pair. Key is the placeholder tag, Value is the.. value. After deserializing, I simply populate a list and assign it to a ViewBag, then in the CSHTML I ViewBag.List.Keyname to grab the text.

I have a small admin control panel which allows me to modify the text in the database. Having little hover-overs like you do is a great idea though!