Update RTE component to use Block Quotes in AEM

Question

I'm currently using Rich Text Editor (RTE) in my AEM 6.2 project. I would like to configure RTE to use blockquote tag. How can achieve this?

<blockquote>

Component code:

<paraformat jcr:primaryType="nt:unstructured" features="*">
    <formats jcr:primaryType="cq:WidgetCollection">
        <p  jcr:primaryType="nt:unstructured" description="Paragraph" tag="p"/>
        <h1 jcr:primaryType="nt:unstructured" description="Heading 1" tag="h1"/>
        <h2 jcr:primaryType="nt:unstructured" description="Heading 2" tag="h2"/>
        <h3 jcr:primaryType="nt:unstructured" description="Heading 3" tag="h3"/>
        <h4 jcr:primaryType="nt:unstructured" description="Heading 4" tag="h4"/>
        <h5 jcr:primaryType="nt:unstructured" description="Heading 5" tag="h5"/>
        <blockquote jcr:primaryType="nt:unstructured" description="Block Quote" tag="blockquote"/>
    </formats>
</paraformat>

Reference:

RTE in JCR

Dialog View

Thanks.

What do you mean by configure? Do you want RTE to show blockquote as an option or do you want it to allow blockquote to be rendered? These are two different problems, hence asking. — Imran Saeed
See my answer below. I have covered both issues. Let me know if you need more details — Imran Saeed

Imran Saeed Imran Saeed · Accepted Answer · 2017-03-20T16:16:52

You can add a new block element by following the instructions at official documents:

Adding custom paragraph formats to RTE

Basically, you overlay the RTE and extend the paraformat plugin by introducing the new elements. Summary steps are:

Overlay your RTE
Create cq:EditConfig/inplaceEditing/paraformat/format node under your RTE control.
Create a node for your style, name it blockquote and give it the following properties -> Description: Block Quote & Tag: blockquote
Make sure you add all other default formats like p, H1, H2 etc.

That's it. You should see your new paragraph style available in the paragraph styles dropdown.

This is a summary as all the pictures will make this post too long but a detailed post can be found at: http://www.aemcq5tutorials.com/tutorials/configure-rte-plugin-in-touch-ui/

Optionally, you will need to check if blockquote element is allowed by inspecting your /libs/cq/xssprotection/config.xml file. The file is self explanatory with lots of comments but in general you should check under <tag-rules> to ensure that your tag is supported. OOTB AEM 6.2 allows blockquote element but some upgrades might have lost it.

Update RTE component to use Block Quotes in AEM

1 Answers