Touch UI in place editing within page context

[alistairp781078]

I'm looking into upgrading all of the rich text editor fields in our Classic UI dialogs. Since there doesn't appear to be a method for including RTEs within a dialog in Touch UI, I'm changing them all to in place editors. My question is how can I ensure the in place editor allows the content editor to change the text within the context of the page.

For example:

I have the following component where the text at the top of the grey box is editable in a RTE:

When I click on the pencil icon to edit the text, the editor allows me to edit the text with different styling and with the rest of the component temporarily removed.

Is it possible to configure the in place editor to retain the styling around the text so the the user sees the text changing within the context of the rest of the component?

[alistairp781078]

I just realised I didn't post any code.

This is the inplaceEditing config:

<cq:inplaceEditing
        jcr:primaryType="cq:InplaceEditingConfig"
        active="{Boolean}true"
        editorType="hybrid">
        <cq:childEditors jcr:primaryType="nt:unstructured">
             <dataProtection
                  jcr:primaryType="cq:ChildEditorConfig"
                  title="Data Protection Text"
                  type="text" />
        </cq:childEditors>
        <config jcr:primaryType="nt:unstructured">
             <dataProtection
                  jcr:primaryType="nt:unstructured"
                  editElementQuery="div.dataProtection"
                  name="./dataProtection"
                  propertyName="./dataProtection">
                  <rtePlugins jcr:primaryType="nt:unstructured">
                      ...
                  </rtePlugins>
             </dataprotection>
        </config>
</cq:inplaceEditing>

And the JSP:

<div class="social-signup">
     <div class="js-social-signup social-signup--container">
          <div class="row">
               <div class="small-12 social-signup--description">
                    <cq:text property="dataProtection" escapeXml="true" tagClass="dataProtection" />
               </div>
          </div>
     </div>
</div>

[smacdonald2008]

"doesn't appear to be a method for including RTEs within a dialog in Touch UI"

That is not true - you can use RTE in Touch UI component dialogs and use plugu-ins for the RTE as well:

Configuring Experience Manager Rich Text Editor Plugins in a Touch UI Component Dialog

[alistairp781078]

I'm looking to add a RTE within a dialog as one of many fields (see below). From what I've read on other forum posts this isn't possible. The old xtype was richtext; if it is possible, what is the corresponding sling resource type for Touch UI?

Example dialog in classic:

[kautuk_sahni]

As per the documentation, it is not required as the functionality is covered by In-place/Full-screen editing.

I will ask documentation to update it based on the Helpx article Configuring Experience Manager Rich Text Editor Plugins in a Touch UI Component Dialog

This article shows you how to create Touch UI component dialog which contains the Rich Text Editor (RTE)!!

~kautuk

[alistairp781078]

Thanks, I will have a look at the article both yourself and Scott have linked to.

Regardless, as per my original question, is it possible to configure the in-place editor to allow the content editor to see their text changes in the context of the page rather than in a white box?

[alistairp781078]

Based on the example in the link, I have implemented a dialog with an RTE field in it:

<text
     jcr:primaryType="nt:unstructured"
     sling:resourceType="cq/gui/components/authoring/dialog/richtext"
     name="./text"
     fieldLabel="Text"
     useFixedInlineToolbar="{Boolean}true" />

I've also got a load of configuration for the RTE plugins, which I can post if necessary.

For some reason the buttons at the top of the RTE do not appear in the dialog until I change focus to the text box (see screenshot below). Is this expected behaviour, if not, do you know I can fix it?

[smacdonald2008]

Also - what AEM Version are you upgrading to? AEM 6.3?

[alistairp781078]

Yeah, 6.3.

[smacdonald2008]

In that case - i recommend looking at the AEM Core Components:

GitHub - Adobe-Marketing-Cloud/aem-core-wcm-components: AEM Core WCM Components

Look at how the various components use the Touch UI RTE.

Also - we have an Ask the AEM COmmunity Experts this month on use of Core Components -- see this link -- Scott's Digital Community: Ask the AEM Community Experts for August 2017

[Ratna_Kumar]

Hi,

You are right. This is expected behavior of RTE for Touch UI dialog in AEM 6.3. Please find the below screenshots.

After clicking on Text in the dialog:::

Hope this helps!!

~Ratna.

[alistairp781078]

Is it possible to override this behaviour and have the icons appear on load?