Define different styles in the rich:editor in richfaces.

Question

I want to add a rich:editor (the one based on tinyMCE) richfaces component to my Seam web application, and on that editor I need to pass somehow a CSS file with a collection of css classes. So that someone editing the content of a specific page can use the same styles available to all the other static parts of the web app.

Did someone already face this problem?

Is this possible? And if not, is there another WYSIWYG editor that can do such a thing?

Answer 1

go to : http://livedemo.exadel.com/richfaces-demo/richfaces/editor.jsf?tab=info&cid=218162

Answer 2

Hi there.

Sorry I probably didn't made myself very clear yesterday.

What I need is a way to pass CSS classes to the Style combobox of the editor, so that when I'm creating or editing html (using rich:editor) I can select a class (on the Style combobox) to apply to the selected html text.

The only things I found on the link you provided (wich I already had seen) are the arguments used to define the actual style of the editor.

Thanks for the quick reply and I hope I have explained myself better this time. Once again I appreciate the quick reply.

Thanks.

Answer 3

I have not used the rich:editor component, but in general, Richfaces has a number of ways to customize the CSS classes of their components, all listed here. The appearance of every Richfaces component is determined by a number of classes, which are listed for each component in the documentation (see here for the rich:editor). You can change the appearance of a component in three ways:

• Define your own skin. This is done by defining a .properties file, and setting an appropriate context parameter in your deployment descriptor. The Richfaces CSS classes that will be used will have the same names as before, but will now have values from your .properties file. Note that each property of your property file will be re-used in a number of Richfaces classes.
• Override the default Richfaces classes in your application's CSS file. So, you can check at the documentation which classes your Richfaces component uses (or inspect the elements with FireBug and find out from there), and override them by defining classes with the exact same name and your own attributes.
• Set your own classes to your components. Components usually have attributes such as styleClass in most components, rowClasses in datatable etc. So, if you can see that the text in the rich:editor is a specific class, define this class again in your own CSS and override it partially or completely.

Generally, the documentation page (the second link) is the starting point to change the appearance of your Richfaces component.

Cheers!