Applying colors to the text

[SahrudayaB]

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

[Kishore_Kumar_]

Hi @SahrudayaB ,

Try installing this color picker plugin and check if it works for you.

http://experience-aem.blogspot.com/2021/03/aem-cloud-service-css-and-color-picker-plugin-rte-rich-te... 

[SahrudayaB]

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 · Accepted solution]

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>