AEM RichText TouchUI, Enabling Code Editor, Source Edit

Sometimes we need to give our power content authors, the flexibility to review their HTML markup from the richText editor, so they can ensure that the semantics are looking as expected.

As AEM developers we are summoned to enable and deliver this requirement. In this article, I will provide a code example on how we can enable the code editor for the rich text editor. Technically, we call this feature the source edit when referring to this feature from the rtePlugins.

The source edit feature is actually a feature from the misctools rtePlugin. Simply add the rtePlugins > misctools with the feature set as sourceedit. Next add the toolbar configuration value of misctools#sourceedit, for the inline && dialogFullScreen node. See the code example below.

For sightly, make sure you use the context attribute, ${properties.text @ context=’html’}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
   jcr:primaryType="nt:unstructured"
   jcr:title="Text"
   sling:resourceType="cq/gui/components/authoring/dialog"
   helpPath="https://www.adobe.com/go/aem_cmp_text_v2"
   trackingFeature="core-components:text:v2">
    <content
       jcr:primaryType="nt:unstructured"
       sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
               jcr:primaryType="nt:unstructured"
               sling:resourceType="granite/ui/components/coral/foundation/tabs"
               maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                       jcr:primaryType="nt:unstructured"
                       jcr:title="Properties"
                       sling:resourceType="granite/ui/components/coral/foundation/container"
                       margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                               jcr:primaryType="nt:unstructured"
                               sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                               margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                       jcr:primaryType="nt:unstructured"
                                       sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <text
                                               jcr:primaryType="nt:unstructured"
                                               sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                               name="./text"
                                               useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <misctools
                                                       jcr:primaryType="nt:unstructured"
                                                       features="[sourceedit]"/>
                                                </rtePlugins>
                                                <uiSettings jcr:primaryType="nt:unstructured">
                                                    <cui jcr:primaryType="nt:unstructured">
                                                        <inline
                                                           jcr:primaryType="nt:unstructured"
                                                           toolbar="[misctools#sourceedit]"/>
                                                        <dialogFullScreen
                                                           jcr:primaryType="nt:unstructured"
                                                           toolbar="[misctools#sourceedit]"/>
                                                    </cui>
                                                </uiSettings>
                                            </text>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>
My last thoughts for this enabled feature.
I really think the code editor for the AEM richText editor Touch UI is really useful because, now power authors can review HTML elements that will be inserted into the page, making sure that they can fix syntax errors before publishing the page. In this way, it will keep the SEO team happy, and allow HTML elements on the page to be W3C compliant.

But however, with great power comes great responsibilities; enabling this feature will allow authors to add the markup they require.

Was this post helpful?

Hello, I am an Adobe AEM MVP & a certified Lead AEM Developer who is currently working as a Senior AEM Full Stack Developer at Whitbread, UK, London. I have 10 years of overall web engineering experience and 6 years of AEM experience in practice. I hope to give back to the AEM Full Stack Development community by sharing my knowledge with the world.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top