Applying colors to the text

3 replies
1051 views
Translate All

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

BrianKasingliAccepted solution

Adobe Champion and 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-rich-text-editor-plug-ins.html?lang=en#text-styles

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>

Kishore_Kumar_

Level 9

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-text-editor.html

Translate

SahrudayaBAuthor

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.

Translate

BrianKasingli

Accepted solution

Adobe Champion and 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-rich-text-editor-plug-ins.html?lang=en#text-styles

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>

Translate

Sign up

Login with SSO

Login to the community

Login with SSO