Expand my Community achievements bar.

RTE Styles and Edit in Touch UI Dialog

Avatar

Level 2

 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:

  1. 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?
     
  2. 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
0 Replies

Avatar

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>

Avatar

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.  

Avatar

Level 2

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.

Avatar

Level 1

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 

Avatar

Community Advisor

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

1325320_pastedImage_2.png

2) add the styles under uiSettings

1325319_pastedImage_1.png

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

1325318_pastedImage_0.png

1325321_pastedImage_3.png

Thanks

Veena

Avatar

Level 4

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

1603315_pastedImage_0.png

Avatar

Level 1

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.

page footer
Change Username