Hi,
One of the main complaints I get about our CMS is that on occasion the layout of content in the "editing mode" drastically differs to it's rendered counterpart. While we have the FCKEditor instance dynamically pulling in a custom configuration (which defines an array of appropriate stylesheets), when content is externally wrapped with DIV to be uniquely stylized, layouts in editing mode start to break down.
For some background, our CMS system has the notion of "Content Locations" which are predefined chunks of real estate on a page (areas that may or may not have specific layouts, styles, heights, widths, etc.). Our web producers create instances of "Content Modules" which are assigned to a "Content Location". In our app layer, these Content Modules are surrounded by uniquely identified DIV tags that are dynamically generated by the web app, for example:
The rendered modules above could look totally different, uniquely styled based on their surrounding DIV. What I'm having trouble figuring out is if there is a way to wrap this DIV around the content the web producers enter in the FCKEditor without it actually being part of the content itself (hoping this makes sense). Using the examples above, the users are only responsible for entering open <h2> to close </ul> tags. The external application that renders the web pages wrap the modules contents with these DIV tags. Of course, our CMS allows for previewing the content (by saving content to db and viewing a preview page), but it would be nice the layout in the editor wasn't so willy-nilly in the case when you might have prefixed styles defined like:
I assume there's an easy way to do this that's just not jumping out at me. Is there some way to externalize a "shell" in a config file that will layout out this content more appropriately?
Thanks in advance
One of the main complaints I get about our CMS is that on occasion the layout of content in the "editing mode" drastically differs to it's rendered counterpart. While we have the FCKEditor instance dynamically pulling in a custom configuration (which defines an array of appropriate stylesheets), when content is externally wrapped with DIV to be uniquely stylized, layouts in editing mode start to break down.
For some background, our CMS system has the notion of "Content Locations" which are predefined chunks of real estate on a page (areas that may or may not have specific layouts, styles, heights, widths, etc.). Our web producers create instances of "Content Modules" which are assigned to a "Content Location". In our app layer, these Content Modules are surrounded by uniquely identified DIV tags that are dynamically generated by the web app, for example:
<div id="pageModuleOne"> <h2>Module One Header</h2> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </div> <div id="pageModuleTwo"> <h2>Module Two Header</h2> <ul> <li><a href="#">link 1</a></li> <li><a href="#">link 2</a></li> <li><a href="#">link 3</a></li> </ul> </div>
The rendered modules above could look totally different, uniquely styled based on their surrounding DIV. What I'm having trouble figuring out is if there is a way to wrap this DIV around the content the web producers enter in the FCKEditor without it actually being part of the content itself (hoping this makes sense). Using the examples above, the users are only responsible for entering open <h2> to close </ul> tags. The external application that renders the web pages wrap the modules contents with these DIV tags. Of course, our CMS allows for previewing the content (by saving content to db and viewing a preview page), but it would be nice the layout in the editor wasn't so willy-nilly in the case when you might have prefixed styles defined like:
#pageModuleOne { background: #000; width: 500px; height: 150px; } #pageModuleOne h2 { color: #fff; font-size: 18px; } #pageModuleTwo { background: #ECECEC; width: 160px; height: 450px; } #pageModuleTwo h2 { color: #333; font-size: 12px; }
I assume there's an easy way to do this that's just not jumping out at me. Is there some way to externalize a "shell" in a config file that will layout out this content more appropriately?
Thanks in advance