A real world web site (3) - Rich text CSS styling

Now we get to the interesting problem, this is close to being a deal breaker for me (assuming I can find any CMS that does it right).

My web designer uses CSS extensively, also in his wisdom he wants the end user to be able to do routine content editing on the final site. To maintain the look and feel the user’s input has to be styled correctly. The requirements are quite simple, a styled heading line, some text paragraphs and some bulleted lists. An example might be

<div id="maintext">
<p class="title">Latest News</p>
<p>Lorem ipsum dolor sit amet, consectetuer tincidunt, nunc mauris interdum ipsum.</p>
<p></p>
</div>

My template place holder is as you would expect:
<div id="maintext">
[*content*]
</div>

The site is to be maintained by non-technical staff so entering html tags is out of the question. If I use FCKedit I am unable to use a class of ’title’ (as distinct from ’Title’) and so can’t maintain the style. If I set the document to not be rich text then I can enter the html by hand (or in rich text I can view and edit the source), however the end user will not, and should not, be expected to tolerate this. FCK also seems to generate <span></span> inside <p></p> which might cause problems.

Obviously the cause of the problem is that FCK does not know about my styles, however it seems impossible or at least very difficult to tell it about them.

I tried the process described in http://wiki.fckeditor.net/Developer%27s_Guide/Configuration/Styles but that seems to be all about how FCK displays its text. I don’t need the user styles to display properly (though that would be nice) but I do want an easy way to add them to an editor drop down.

Has anyone successfully incorporated 3rd party CSS styles from within a rich text editor?, if so which one and how? The real world also uses multiple css files but we’ll gloss over that for now.

I am going to look at tinymce to see if that is any easier as some have claimed, if not I am going to do a comparison with Joomla though I *really* want to use MODx if I can.

Ed

I don’t know about FCK, but it’s really easy with TinyMCE.

And you should put that <p class="title"> business in <hx> header tags in your template instead:

would do the job nicely. Then style #maintext h2 however you want it.

Exactly what Sottwell described, a more semantic approach. Regarding TinyMCE, its better than FCK in your scenario, get it from download section.

regards,

zi

Quote from: sottwell at Aug 26, 2006, 07:33 AM

I don’t know about FCK, but it’s really easy with TinyMCE.

And you should put that <p class="title"> business in <hx> header tags in your template instead:

<div id="maintext">
<h2>[*pagetitle*]</h2>
[*content*]
</div>

would do the job nicely. Then style #maintext h2 however you want it.

Susan,

Thank you again, I had installed and played with TinyMCE and it certainly meets my needs much better than FCK. I don’t know why the designer used <p></p> instead of header <h> tags so I will ask him.

The end users may want to enter arbitrary titles and text paras into the page so though your method is more elegant it is probably more difficult to explain/manage/maintain (for non-technical people) than just entering it directly and styling paragraphs. Some days there may be three stories, some days just one and so on (maybe there is something I have not come across which will do this, it is a process of discovery for me)

There is a need for user specified content on many pages, this was (I thought) the simplest example though perhaps not a good one as in this case in the final system it will be pulled from e.g. a news page (yet to be converted).

When I have clarified my thoughts I shall start a new topic soliciting advice on how to easily allow end-user editable content.

Ed

All "header" text should be in "header" containers. That’s just good coding practice. With TinyMCE, in the Manager’s Site Configuration there is a field for entering css styles that you want your users to use.