Adobe Experience Manager Sites & More

bob_smith11 · 3/11/16

I am trying to add styles to the rteplugins section inside a dialog. I am not using inplace editing and am just using sling:resourceType="cq/gui/components/authoring/dialog/richtext".

I have scoured the aem forum and examples in blogs for a good example of adding and editing the uisettings and popovers in the RTE but nothing completely answers my questions.

General questions I have are as follows:

In rteplugins let's say I want to include the edit plugin with only cut, copy, and paste-plaintext. I know from other rteplugins I could do something like this:
```
<rtePlugins jcr:primaryType="nt:unstructured"> <edit jcr:primaryType="nt:unstructured" features="[cut,copy,paste-plaintext]"/> </rteplugins> <uiSettings jcr:primaryType="nt:unstructured"> <cui jcr:primaryType="nt:unstructured"> <inline jcr:primaryType="nt:unstructured" toolbar="[#edit]"> <popovers jcr:primaryType="nt:unstructured"> <edit jcr:primaryType="nt:unstructured" items="[edit#cut,edit#copy,edit#paste-plaintext]" ref="edit"/> </popovers> </inline> </cui> </uiSettings>
```
But this does not work. And changing the toolbar to include the items individually does not work either.
I realize the documentation states:
"The RTE-specific Cut/Copy/Paste buttons are not available under the touch-optimized UI.
However, the browser cut/copy/paste functionality is available."
If this is so then how is cut and copy accomplished?
For Styles I know how it was done in classic mode but the trouble I am having comes from migrating to touch-UI.
I am able to get the styles button to appear in the RTE toolbar options but am not able to get the styles to show up.
Currently I have this:
```
<leftText jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./leftContent" useFixedInlineToolbar="{Boolean}true" externalStyleSheets="/etc/designs/responsive/main/source/css/styles.css"> <rtePlugins jcr:primaryType="nt:unstructured"> <styles jcr:primaryType="nt:unstructured" features="*"> <styles jcr:primaryType="cq:WidgetCollection"> <dark-headline jcr:primaryType="nt:unstructured" cssName="dark-headline" text="Dark Headline"/> </styles> </styles> </rtePlugins> <uiSettings jcr:primaryType="nt:unstructured"> <cui jcr:primaryType="nt:unstructured"> <inline jcr:primaryType="nt:unstructured" toolbar="[#styles]"> <popovers jcr:primaryType="nt:unstructured"> <styles jcr:primaryType="nt:unstructured" items="styles#dark-headline" ref="styles"/> </popovers> </inline> </cui> </uiSettings> </leftText>
```
The css class dark-headline exists in the styles.css file in externalStyleSheets. This file happens to be a minified file but I tried with a non-minified file and it still did not work.

How do I get the dropdown for styles to work and how do I add more styles?

I have seen the following references and possibly more so try not to link to these:
https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/rich-text-editor.html#Pa...
Edit:
https://docs.adobe.com/docs/en/aem/6-1/ref/widgets-api/index.html?class=CQ.form.rte.plugins.EditTool...
Rich Text:
https://docs.adobe.com/docs/en/aem/6-1/author/page-authoring/rich-text-editor.html
https://helpx.adobe.com/experience-manager/using/configure-touchui-rte.html

notyourcat · 5/12/16

There is little to no information on how to do this. Working with RTE in Touch UI can be very frustrating, specially after being able to easily configure it in Ext.

So, my line of thought is that you may be able to get the dropdown to show the styles same as the paraformats.

In you uiSettings node, I used:

<styles jcr:primaryType="nt:unstructured"        items="styles:getStyles:styles-pulldown"        ref="styles"/>

And then in my rtePlugins node standard RTE configuration.

<styles        jcr:primaryType="nt:unstructured"        features="*">    <styles jcr:primaryType="cq:WidgetCollection">        <smalltext                jcr:primaryType="nt:unstructured"                cssName="smalltext"                text="Small Text"/>        <urgent                jcr:primaryType="nt:unstructured"                cssName="urgent"                text="Special Color"/>    </styles></styles>

smacdonald2008 · 5/12/16

The way to use styles in Touch UI is to use inplace editing. You have access to all of the same plug-ins as you do with Ext. The only thing is the author needs to maximize the window.

naresh5361 · 7/27/17

Hi smacdonald,

Is it possible to enhance the inline rich text element to include the controls for heading styles and button styles.

in aem 6.3 touchUI.

we need heading styles in tool bar as well as full screen also.

Thanks in advance.

Report · 5/12/16

Hi,

You can refer to this link http://stackoverflow.com/questions/34309445/aem-6-1-enable-rich-text-editor-rte-plugins-on-touch-ui

I have managed to get the my style from the style list on Touch UI.

pavan_gade · 10/28/16

Hi i am currently working on RTE touch ui plugins and trying to get Quotestyle and disclaimer as tags in paraformat and it does work inplace edit and fullscreen but doesn't render on the page(in both author and preview mode). Please find the attached for the work done

VeenaVikraman · 10/15/17

I was having the same issue today ...This was really helpful.. To summarize. The important things (Styles will appear in touch UI if all the below three are satisfied) to make sure the styles dropdown is appearing is

1) add the styles node under plugin

2) add the styles under uiSettings

3) add the #styles as value to the property "toolbar" in inline/fullscreen node

Thanks

Veena

VictorToledo_ · 10/23/18

Thank you Veena_07!! your answer has helped me to resolve my problem with the Touch UI dialog and rich text editor

abhishekk861844 · 10/1/19

but css is not visible in results of page

mazena77020460 · 1/8/19

This was helpful. In addition, under uiSettings -> cui -> inline in order for the popup to show, "#styles" must be added to the string array in the "toolbar" property.