Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Applying colors to the text

Avatar

Level 3

how can I apply colors to the text in rich text editor.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @SahrudayaB, if you have a prefined list, try using AEM's richtext editor plugin, styles. https://experienceleague.adobe.com/docs/experience-manager-64/administering/operations/configure-ric...

Using the styles plugin will wrap your selected text with a <span> tag, along with the cssClassName.

 

 

<text
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    name="./text"
    useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <styles
            jcr:primaryType="nt:unstructured"
            features="*">
            <styles jcr:primaryType="nt:unstructured">
                <plainSpan
                    jcr:primaryType="nt:unstructured"
                    cssName="text-color-red"
                    text="Red Text"/>
                <lead
                    jcr:primaryType="nt:unstructured"
                    cssName="text-color-green"
                    text="Green Text"/>
            </styles>
        </styles>
        <table
            jcr:primaryType="nt:unstructured"
            features="*"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,#styles]">
                <popovers jcr:primaryType="nt:unstructured">
                    <styles
                        jcr:primaryType="nt:unstructured"
                        items="styles:getStyles:styles-pulldown"
                        ref="styles"/>
                </popovers>
            </inline>
            <dialogFullScreen
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,#styles]">
                <popovers jcr:primaryType="nt:unstructured">
                    <styles
                        jcr:primaryType="nt:unstructured"
                        items="styles:getStyles:styles-pulldown"
                        ref="styles"/>
                </popovers>
            </dialogFullScreen>
        </cui>
    </uiSettings>
</text>

 

 

 

 

View solution in original post

3 Replies

Avatar

Level 3

After installing, I'm unable to see Experience AEM fonts and colors in Template policy and also eaem-aem-fonts under conf. I'm using AEM 6.5. Is there any other way to do it.

Avatar

Correct answer by
Community Advisor

Hi @SahrudayaB, if you have a prefined list, try using AEM's richtext editor plugin, styles. https://experienceleague.adobe.com/docs/experience-manager-64/administering/operations/configure-ric...

Using the styles plugin will wrap your selected text with a <span> tag, along with the cssClassName.

 

 

<text
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    name="./text"
    useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <styles
            jcr:primaryType="nt:unstructured"
            features="*">
            <styles jcr:primaryType="nt:unstructured">
                <plainSpan
                    jcr:primaryType="nt:unstructured"
                    cssName="text-color-red"
                    text="Red Text"/>
                <lead
                    jcr:primaryType="nt:unstructured"
                    cssName="text-color-green"
                    text="Green Text"/>
            </styles>
        </styles>
        <table
            jcr:primaryType="nt:unstructured"
            features="*"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,#styles]">
                <popovers jcr:primaryType="nt:unstructured">
                    <styles
                        jcr:primaryType="nt:unstructured"
                        items="styles:getStyles:styles-pulldown"
                        ref="styles"/>
                </popovers>
            </inline>
            <dialogFullScreen
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,#styles]">
                <popovers jcr:primaryType="nt:unstructured">
                    <styles
                        jcr:primaryType="nt:unstructured"
                        items="styles:getStyles:styles-pulldown"
                        ref="styles"/>
                </popovers>
            </dialogFullScreen>
        </cui>
    </uiSettings>
</text>