Level 2

RTE Styles and Edit in Touch UI Dialog

Forum|Forum|9 years ago
March 12, 2016
2 replies
18439 views

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#Paragraph%20Formats
Edit:
https://docs.adobe.com/docs/en/aem/6-1/ref/widgets-api/index.html?class=CQ.form.rte.plugins.EditToolsPlugin
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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

F

felipeabellan

Level 2

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

Level 10

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.