AEM6: Custom Styles in Rich Text Editor

[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

[smacdonald2008]

Here is a community article that talks about this subject:

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

[tc82]

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.

[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]

[Former Community Member]

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

[aheim02 · Accepted solution]

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

• Plugins and their Features - Touch-optimized UI
• Predefined Styles and Formats

They are supported for the classic UI.

[aheim02]

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:

• Styles (Text)

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:

• Plugins and their Features - Touch-optimized UI

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

[Former Community Member]

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

[aheim02]

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.

[Former Community Member]

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

Thank mod.

[Former Community Member]

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

Thank mod.