Shared plugin configuration for RTE in components

14 October 2011
Lukasz Madrzak
Frink_Cognifide_2016_HeaderImages_0117
The rich text editor (RTE) is one of the most flexible out-of-the-box component widgets Adobe WEM/CQ delivers. It's powerful, customisable, looks good and is easy to use.

One issue CQ developers might have with it is its configuration. The amount of options available makes it rather complex. Although the widget is quite easy to integrate, if the project has more than a few components using RTE in dialogs and the client requests a global change in RTE plugin configuration, going through all the dialog files can be quite painful, not too mention it's easy to miss a file.

There is a simple solution to that - to create a dedicated plugin configuration node and include it in widgets that want to share plugin configuration.

Let's assume you want to have a common RTE plugins configuration, i.e. all descriptions share the same plugins. First create a node in your application code at /apps/myapp/components/text/description with following properties:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
    xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:isContainer="{Boolean}false"
    jcr:primaryType="cq:Component"
    componentGroup=".hidden"/>
In the node itself create a rtePlugins childnode with the actual plugin configurations, i.e.:
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="nt:unstructured">
    <paraformat jcr:primaryType="nt:unstructured" features="*">
    <formats jcr:primaryType="cq:WidgetCollection">
        <p jcr:primaryType="nt:unstructured" description="Paragraph" tag="p" />
        <h2 jcr:primaryType="nt:unstructured" description="Heading 2" tag="h2" />
        <h3 jcr:primaryType="nt:unstructured" description="Heading 3" tag="h3" />
    </formats>
    </paraformat>
    <lists jcr:primaryType="nt:unstructured"
        features="[ordered,unordered,indent,outdent]" />
    <undo jcr:primaryType="nt:unstructured" features="*" />
    <subsuperscript jcr:primaryType="nt:unstructured" features="*" />
    <image jcr:primaryType="nt:unstructured" features="[]" />
    <misctools jcr:primaryType="nt:unstructured" features="[]" />
    <format jcr:primaryType="nt:unstructured" features="[bold,italic,underline]" />
    <justify jcr:primaryType="nt:unstructured" features="[*]" />
    <links jcr:primaryType="nt:unstructured"
        features="[anchor,modifylink,unlink]" />
    <edit jcr:primaryType="nt:unstructured"
        defaultPasteMode="plaintext"
        features="[cut,copy,paste-plaintext,paste-wordhtml]" />
</jcr:root>
Now you only need to include a link to that node in your RTE dialogs. Assuming you created your node at /apps/myapp/components/text/descriptionrtePlugins your RTE plugins entry in the dialog becomes
<rtePlugins
jcr:primaryType="cq:Widget"
path="/apps/myapp/components/text/rtePlugins.infinity.json"
xtype="cqinclude" />
You can use this approach for other config nodes (i.e. htmlRules) or other components as well. This not only makes your code cleaner, but also easier to maintain and manage.