Better integration of FCKEditor and themes

Up until now the editor area of FCKEditor did not always correctly reflect the look&feel that the contents were going to have when published. The reason was that the theme CSS was not being applied within the editor area. With the help of Nate I've just fixed that so from now on, what you see will really be what you get.

But this is just the beginning of a better integration. The next step has been to make it possible to select styles within the editor (substituting the old and not so useful font select box). With the new select box it's possible to select different headers and other useful element types:



These are all HTML elements so it's very easy for a theme to define the desired look and feel for them. The content authors will be able to just select them and have that nice look be applied automatically.

But the fun just starts here. What is truly powerful is that FCKEditor allows defining custom styles. To test this out I've defined three styles that are mapped to the existing classes to show informative, alert and error messages. The look and feel of these messages is defined within the theme. The next screenshot shows 3 paragraphs each with one of these styles:



What is very cool is that the styles can be applied as a CSS class so all the power remains for the theme. For example the above screenshot has the following HTML source:



These 3 styles are just nice looking examples, but they are probably not so useful. What I'd like to do is define a few standard very useful styles, provide a default look & feel for them and, of course, let theme developers provide custom appearances. Which styles would you define? I can think of:

• highlighted: to highlight text for example with a yellow background
• javacode, htmlcode: to format the paragraph according to java or html code rules (with some javascript this could look very good, although probably we wouldn't add it by default to avoid having even more js libs).
• other?? I'm not feeling that creative today so I'd appreciate your thoughts and suggestions here. You can win a default style available for you and your content authors in the next release of Liferay!! :)

For TinyMCE users: you are using TinyMCE instead of FCKEditor? Do you know how the same thing could be done? Let me know, or better, send me a patch and I'll happily apply it :)

[Bryan Cheung]

This is one of your best features ever, Jorge. This totally rocks!

[Jorge Ferrer]

Thanks Bryan.

Which additional styles do you think would be useful? The more we add the more useful the feature will be.

[Arne T. Mossin]

An ingress style? Typical bold with extra margin under.

Btw: why do you use <div>? Is it not better with a <p>aragraph?

On the "not so serious" side: A tab (like the one "comments" above here) or a button (like the "Replay" under here I write)

[Ed Shin]

How do you make your blog do the "Read more..." thing? I can't figure out how to do that on my blog. =)

[Jorge Ferrer]

Hi Ed,

You have to click the configuration icon and select the "Abstracts" display style. BTW, the icon is not available as of now as Brian is doing the Social networking deployment but I guess it'll be back soon.