Solved
Applying colors to the text
how can I apply colors to the text in rich text editor.
BrianKasingliAccepted solution
New Participant
Dec 21, 2021 4:00 AM UTC
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>