How to customize my AEM CQ Richtext Component?

1
votes

I have been working on a custom AEM component that includes a title, image and a richtext field. I have been able to get the components to work using the OTB features except I can not get the RichText xtype to create the HTML to meet the specification I have been given by my designer. The format I need to hit is <p class="lede">. I created a format called p-lede and entered the tag as p class="lede", but it still only entered the standard <p> tag. Any thoughts on how I can accomplish this?

Screenshot of Format List

2
aemrich-text-editor
If you go to /libs/cq/ui/rte/core/plugins/ParagraphFormatPlugin.js you will see the following in the comments: "Also note that you can't set additional DOM attributes using the "paraformat" * plugin" – Woodifer

2 Answers

0
votes

I doubt if you can add class (using editor) in touch/classic mode of RTE (you can do this by using source mode). Adding Styles is an option. another option is to customize plugin and create a new plugin for your requirement.

0
votes

very old question, but I'll post an answer anyway.

You would need to do this with styles, you can't add classes to paraformat OOTB. eg:

<styles
        jcr:primaryType="nt:unstructured"
        features="*">
        <styles jcr:primaryType="cq:WidgetCollection">
            <lede
                jcr:primaryType="nt:unstructured"
                cssName="lede"
                text="lede"/>
        </styles>
    </styles>