Expand my Community achievements bar.

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>