Expand my Community achievements bar.

SOLVED

AEM6: Custom Styles in Rich Text Editor

Avatar

Former Community Member

Hi,

I'm trying to add custom styles to the new AEM 6.0 (SP1) rich text editor (fullscreen). I have two questions about this:

 

1. I was able to get the select box to show my new css classes (and using the chrome inspector I can see that the class is applied to the span: <span class="caps">). However, I can't actually see the new styles. It says I can reference a stylesheet so that the new styles are actually visible for the user [1]. I added this to the "text" node (/apps/wcm/foundation/components/text/dialog/items/tab1/items/text):

externalStyleSheets="[/etc/designs/abc/clientlib/css/static.css]"

Again, in the inspector I can see that the file static.css is included. The style of .caps is not applied in the actual editor window though. What am I missing?

 

2. Secondly I'm trying to add a class to a <ul>. In the docs [2] it says I can put the cursor in the list to select a different style for the list. However, that does not work. It only adds a span with a class, it doesn't add the class to the ul. Is there a way to do that?

 

Thanks,

Paul

 

PS: Is it just me or does this Forum just randomly return white pages on posts/searches every once in a while?

 

[1] http://docs.adobe.com/docs/en/aem/6-0/administer/operations/page-authoring/rich-text-editor.html#Sty... (Text)

[2] http://docs.adobe.com/docs/en/aem/6-0/author/page-authoring/rich-text-editor.html#Lists

1 Accepted Solution

Avatar

Correct answer by
Employee

Unfortunately custom styles in the RTE are not currently supported for the touch-optimized UI. Please see the documentation at:

They are supported for the classic UI.

View solution in original post

10 Replies

Avatar

Level 4

Hello All,

Am seeing some issue like this.

My RTE editor is remove the entire style.

If we add <style type="text/css">.css{color: #234444}</style>

If we save the editor. The entire style tag is removed.

 

May I know how we can keep it.

Avatar

Former Community Member

Thanks for posting the link, but this approach doesn't work for the new RTE in AEM 6, does it?

I added a stylesheet, it's loaded and has a definition for "#CQrte span.caps" in it. Looking at the inspector on the page I don't even see an element called "CQrte" though, so I'm guessing that approach only works for <= 5.6.1?

The article also doesn't seem to answer my question regarding adding styles to an unordered list (or did I miss it?)

[img]Screen Shot 2014-09-19 at 9.01.57 AM.png[/img]

Avatar

Former Community Member

Any feedback on this? The issue is basic enough but I can't seem to find an answer to it.

Avatar

Correct answer by
Employee

Unfortunately custom styles in the RTE are not currently supported for the touch-optimized UI. Please see the documentation at:

They are supported for the classic UI.

Avatar

Employee

Are you adding the style definition directly in the source edit mode? This is not recommended practice and might result in the bahavior you are experiencing.

You can define styles that can be selected from a drop down selection box - this is covered (AEM 6) under:

However, it might depend on the version and UI you're using - as mentioned above, for AEM 6 this is only fully operational in the classic UI:

Hope that helps, but if you have any further questions just let us know.

Avatar

Former Community Member

OK, thanks for confirming. Is there a timeline for this to be integrated into AEM6?

Avatar

Employee
Hello again,
I know that this is on the to-fix list, but I'm afraid I do not know of the road-map for the issue.
If you can file an request on DayCare, this registers your interest and helps to raise the priority for whole issue.

Avatar

Former Community Member

http://blogs.adobe.com/contentmanagement/tag/custom-richtext/

Thank mod.

Avatar

Former Community Member

http://blogs.adobe.com/contentmanagement/tag/custom-richtext/

Thank mod.