Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Change the default font of the paragraph content in richtext widget

Avatar

Level 1

I want to change the default look and feel(like size, color) of the content of richtext widget. I tried set the cls property when defining the widget, but it doesn't work. any idea?

 

thx

1 Accepted Solution

Avatar

Correct answer by
Level 7

You can create your own text component in which you can extend the RTE plugin.
The plugin can be customized itself (see the second link from Yogesh)  but you can also add your own styles in a css file that will target the specified elements. Just create the specified css files in include it in the clientlib for the component. Then make sure that clientlib is also included in your app. Look at the following code from the link Yogesh sent:

You may want to specify stylesheets that are optimized for rich text editing. Due to technical restrictions the CSS context is lost in the editor, so you may want to emulate this context to improve the WYSIWYG experience. The Rich Text Editor uses a container DOM element with an ID of CQrte which may be used to provide different styles for viewing and editing: #CQ td { // defines the style for viewing } #CQrte td { // defines the style for editing }

 


Hope that will solve your problems!

View solution in original post

3 Replies

Avatar

Correct answer by
Level 7

You can create your own text component in which you can extend the RTE plugin.
The plugin can be customized itself (see the second link from Yogesh)  but you can also add your own styles in a css file that will target the specified elements. Just create the specified css files in include it in the clientlib for the component. Then make sure that clientlib is also included in your app. Look at the following code from the link Yogesh sent:

You may want to specify stylesheets that are optimized for rich text editing. Due to technical restrictions the CSS context is lost in the editor, so you may want to emulate this context to improve the WYSIWYG experience. The Rich Text Editor uses a container DOM element with an ID of CQrte which may be used to provide different styles for viewing and editing: #CQ td { // defines the style for viewing } #CQrte td { // defines the style for editing }

 


Hope that will solve your problems!

Avatar

Level 1

Hi Yogesh, I am not quite understand http://helpx.adobe.com/communique/kb/CustomRichTextEditor.html. All I want is changing the font-size of the text in rte body(It a little small by default), can I just override some css to achieve that?

 

thx