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

SahrudayaB
Level 2
Level 2

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

1 Accepted Solution
BrianKasingli
Correct answer by
Community Advisor
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
SahrudayaB
Level 2
Level 2

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.

BrianKasingli
Correct answer by
Community Advisor
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