Rearranging Buttons in AEM Table Component Rich Text Editor Toolbar

[hnakamura]

Hello everyone,

I'm currently working with AEM's table component, and I have a question regarding the toolbar buttons in the rich text editor that appears when I open the component toolbar's settings dialog.

I would like to rearrange the buttons in this toolbar. However, I've noticed that some buttons, particularly the ones related to table creation, are not displayed unless I go into full-screen mode, which is a bit inconvenient.

Is there a way to customize the order of buttons in the rich text editor toolbar without going into full-screen mode? Your insights and suggestions would be greatly appreciated!

Thank you in advance.

normal mode

full-screen mode

[Jvenkat]

Hello @hnakamura 

Yes, you can customize the order of the buttons, and even add or remove buttons in the Rich Text Editor (RTE) toolbar by configuring it in the design dialog of the page component.

Here are the steps:

1. Navigate to your project's page component ("Design mode", /config in CRXDE Lite).

2. Create or edit an existing "design_dialog".

3. Here, you can find and edit the node "_cq_rtePlugins". Each plugin represents a button group in the toolbar.

4. Change the position of the item according to your needs. The order of these plugins will be reflected in your RTE toolbar. You can define the order for both fullscreen and normal screen modes.

5. Additionally, if you want a plugin to appear in normal screen mode, set the "features" property under each plugin to "*" allowing it to always be visible, or you can remove this property if you don't want it to appear.

Hope this helps.

Thanks,

Venkat

[Raja_Reddy]

Hi @hnakamura 
Please check this urls
https://docs.mktossl.com/docs/experience-manager-cloud-service/content/implementing/configuring-and-... 
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/text... 
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/wcm-components/text... 

[AsifChowdhury]

Hi @hnakamura 

You can extend the text component then modify it as per your requirements. You can include/exclude plugins. You can set which one you want to show in the dialog and which one you want to show in the full screen mode. Here is a code snippet so that you can get an idea. Here you will get the option for inline dialog & full screen mode both. You can rearrange the order also.

<text
    jcr:primaryType="nt:unstructured">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <format
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <paraformat
                jcr:primaryType="nt:unstructured"
                features="*">
            <formats jcr:primaryType="cq:WidgetCollection">
                <default_span
                        jcr:primaryType="nt:unstructured"
                        description="Span"
                        tag="span"/>
            </formats>
        </paraformat>
        <links
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <misctools
            jcr:primaryType="nt:unstructured"
            features="*">
            <specialCharsConfig jcr:primaryType="nt:unstructured">
                <chars jcr:primaryType="nt:unstructured">
                    <copyright
                        jcr:primaryType="nt:unstructured"
                        entity="&amp;#169;"/>
                </chars>
            </specialCharsConfig>
        </misctools>
        <table
            jcr:primaryType="nt:unstructured"
            features="*"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline
                jcr:primaryType="nt:unstructured"
                toolbar="[edit#cut,edit#copy,edit#paste-default,edit#paste-plaintext,edit#paste-wordhtml,#format,rteFontProp#addfontprop]">
                <popovers jcr:primaryType="nt:unstructured">
                    <justify
                        jcr:primaryType="nt:unstructured"
                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
                        ref="justify"/>
                </popovers>
            </inline>
            <dialogFullScreen
                jcr:primaryType="nt:unstructured"
                toolbar="[edit#cut,edit#copy,edit#paste-default,edit#paste-plaintext,edit#paste-wordhtml,#format,rteFontProp#addfontprop]">
                <popovers jcr:primaryType="nt:unstructured">
                    <justify
                        jcr:primaryType="nt:unstructured"
                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright,justify#justifyjustify]"
                        ref="justify"/>
                </popovers>
            </dialogFullScreen>
        </cui>
    </uiSettings>
</text>

 Thanks.

[hnakamura]

Code Information has been added. ./_cq_dialog/.content.xml 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="テーブル"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[news.release.checkboxshowhide.dialog]"
    helpPath="https://www.adobe.com/go/aem_cmp_text_v2"
    trackingFeature="core-components:text:v2">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <tab1
                        jcr:primaryType="nt:unstructured"
                        jcr:title="TABLE"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        granite:class="cq-RichText-FixedColumn-column"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <table
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                                class="cq-dialog-www-news-table"
                                                externalStyleSheets=""
                                                name="./tableData"
                                                required="{Boolean}true"
                                                useFixedInlineToolbar="{Boolean}true">
                                                <rtePlugins jcr:primaryType="nt:unstructured">
                                                    <format
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <justify
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <lists
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-"/>
                                                    <links
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <paraformat
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-">
                                                        <formats jcr:primaryType="cq:WidgetCollection">
                                                            <myparagraph5
                                                                jcr:primaryType="nt:unstructured"
                                                                description="段落"
                                                                tag="p"/>
                                                            <myparagraph2
                                                                jcr:primaryType="nt:unstructured"
                                                                description="H2"
                                                                tag="h2"/>
                                                            <myparagraph3
                                                                jcr:primaryType="nt:unstructured"
                                                                description="H3"
                                                                tag="h3"/>
                                                            <myparagraph4
                                                                jcr:primaryType="nt:unstructured"
                                                                description="H4"
                                                                tag="h4"/>
                                                        </formats>
                                                    </paraformat>
                                                    <subsuperscript
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <undo
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-"/>
                                                    <misctools
                                                        jcr:primaryType="nt:unstructured"
                                                        features="sourceedit">
                                                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                            <chars jcr:primaryType="nt:unstructured">
                                                                <diamond-b
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#9670;"/>
                                                                <diamond-w
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#9671;"/>
                                                                <circle-b
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#9679;"/>
                                                                <circle-w
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#9675;"/>
                                                                <square-b
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#9724;"/>
                                                                <square-w
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#9723;"/>
                                                                <range-2
                                                                    jcr:primaryType="nt:unstructured"
                                                                    rangeEnd="{Long}963"
                                                                    rangeStart="{Long}945"/>
                                                                <range-1
                                                                    jcr:primaryType="nt:unstructured"
                                                                    rangeEnd="{Long}255"
                                                                    rangeStart="{Long}192"/>
                                                                <copy
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#169;"/>
                                                                <reg
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#174;"/>
                                                                <trade
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#8482;"/>
                                                                <euro
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;#128;"/>
                                                            </chars>
                                                        </specialCharsConfig>
                                                    </misctools>
                                                    <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,subsuperscript#subscript,subsuperscript#superscript,-,#justify,-,links#modifylink,links#unlink,links#anchor,-,#styles,-,misctools#specialchars,misctools#sourceedit,-,fullscreen#start,-,control#close,control#save]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <styles
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="styles:getStyles:styles-pulldown"
                                                                    ref="styles">
                                                                    <styles jcr:primaryType="cq:WidgetCollection">
                                                                        <thead
                                                                            jcr:primaryType="nt:unstructured"
                                                                            cssName="thead"
                                                                            text="bg-color：Deep Gray"/>
                                                                        <s-01
                                                                            jcr:primaryType="nt:unstructured"
                                                                            cssName="s-01"
                                                                            text="bg-color：Light Gray"/>
                                                                        <s-02
                                                                            jcr:primaryType="nt:unstructured"
                                                                            cssName="s-02"
                                                                            text="bg-color：Gray"/>
                                                                    </styles>
                                                                </styles>
                                                                <format
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[format#bold,format#italic,format#underline]"
                                                                    ref="format"/>
                                                                <justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                    ref="justify"/>
                                                                <lists
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                    ref="lists"/>
                                                                <paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
                                                            </popovers>
                                                        </inline>
                                                        <fullscreen
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[format#bold,format#italic,format#underline,subsuperscript#subscript,subsuperscript#superscript,-,links#modifylink,links#unlink,links#anchor,-,#justify,-,#lists,-,misctools#specialchars,misctools#sourceedit,-,#styles,-,undo#undo,undo#redo,-,table#createoredit,-,control#close,control#save]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <styles
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="styles:getStyles:styles-pulldown"
                                                                    ref="styles">
                                                                    <styles jcr:primaryType="cq:WidgetCollection">
                                                                        <thead
                                                                            jcr:primaryType="nt:unstructured"
                                                                            cssName="thead"
                                                                            text="bg-color：Deep Gray"/>
                                                                        <s-01
                                                                            jcr:primaryType="nt:unstructured"
                                                                            cssName="s-01"
                                                                            text="bg-color：Light Gray"/>
                                                                        <s-02
                                                                            jcr:primaryType="nt:unstructured"
                                                                            cssName="s-02"
                                                                            text="bg-color：Gray"/>
                                                                    </styles>
                                                                </styles>
                                                                <paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
                                                                <justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                    ref="justify"/>
                                                                <lists
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                    ref="lists"/>
                                                            </popovers>
                                                        </fullscreen>
                                                        <tableEditOptions
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
                                                    </cui>
                                                </uiSettings>
                                            </table>
                                        <tableClass
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldLabel="Table Class"
                                            name="./tableClass"/>                                            
                                            <isRichTextFlag/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </tab1>
                    <tab2
                        jcr:primaryType="nt:unstructured"
                        jcr:title="表設定"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        granite:class="cq-RichText-FixedColumn-column"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <tableSetting
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="Setting TABLE"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <columns
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <fontSize
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                fieldLabel="font-size"
                                                                name="./fontSize"
                                                                value="tx_16">
                                                                <datasource
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="site/www/release/components/content/datasource"
                                                                    path="/apps/site/www/release/components/content/resources/json/fontSize.json/jcr:content"/>
                                                            </fontSize>
                                                            <width
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                fieldLabel="Width of table"
                                                                name="./width">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <bgNone
                                                                        jcr:primaryType="nt:unstructured"
                                                                        selected="{Boolean}true"
                                                                        text="100% (default)"
                                                                        value="none"/>
                                                                    <bgGray
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="inherit"
                                                                        value="cellBlueTh"/>
                                                                </items>
                                                                <align
                                                                    jcr:primaryType="nt:unstructured"
                                                                    sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                    fieldLabel="Position"
                                                                    name="./align"
                                                                    value="left">
                                                                    <datasource
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="site/www/release/components/content/datasource"
                                                                        path="/apps/site/www/release/components/content/resources/json/align.json/jcr:content"/>
                                                                </align>
                                                            </width>
                                                        </items>
                                                    </columns>
                                                </items>
                                            </tableSetting>
                                            <border
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="Line style"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"
                                                fieldLabel="Border"
                                                name="./border">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <columns
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <borderColor
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                defaultValue="none"
                                                                fieldLabel="Line Color"
                                                                hideLabel="{Boolean}false"
                                                                name="./borderColor">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <borderNone
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="none"
                                                                        value="none"/>
                                                                    <borderGray
                                                                        jcr:primaryType="nt:unstructured"
                                                                        selected="{Boolean}true"
                                                                        text="Gray (default)"
                                                                        value="bd_gray"/>
                                                                </items>
                                                            </borderColor>
                                                            <borderStyle
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                defaultValue="tableSingle"
                                                                fieldLabel="Style"
                                                                hideLabel="{Boolean}false"
                                                                name="./borderStyle">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <none
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="none"
                                                                        value="tableNone"/>
                                                                    <single
                                                                        jcr:primaryType="nt:unstructured"
                                                                        selected="{Boolean}true"
                                                                        text="Single (default)"
                                                                        value="tableSingle"/>
                                                                    <double
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Double"
                                                                        value="tableDouble"/>
                                                                </items>
                                                            </borderStyle>
                                                            <borderWeight
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                defaultValue="none"
                                                                fieldLabel="Weight"
                                                                hideLabel="{Boolean}false"
                                                                name="./borderWeight">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <border1
                                                                        jcr:primaryType="nt:unstructured"
                                                                        selected="{Boolean}true"
                                                                        text="1px (default)"
                                                                        value="none"/>
                                                                    <border2
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="2px"
                                                                        value="tableBoder2px"/>
                                                                </items>
                                                            </borderWeight>
                                                        </items>
                                                    </columns>
                                                </items>
                                            </border>
                                            <th
                                                cq:showOnCreate="{Boolean}false"
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="cell heading &lt;th>"
                                                sling:resourceType="granite/ui/components/foundation/form/fieldset">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <useLoadCss
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/form/checkbox"
                                                        class="cq-dialog-checkbox-showhide"
                                                        cq-dialog-checkbox-showhide-target=".button-option-enable-showhide-target"
                                                        id="enable"
                                                        name="./headline"
                                                        text="Heading first row"
                                                        value="true"/>
                                                    <showHideContainer
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/foundation/container"
                                                        class="hidden button-option-enable-showhide-target"
                                                        showhidetargetvalue="true">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <thAlign
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                defaultValue="none"
                                                                fieldLabel="text-align"
                                                                hideLabel="{Boolean}false"
                                                                name="./thAlign">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <txtL
                                                                        jcr:primaryType="nt:unstructured"
                                                                        selected="{Boolean}true"
                                                                        text="Left(default)"
                                                                        value="none"/>
                                                                    <txtC
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Center"
                                                                        value="cellCth"/>
                                                                    <txtR
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Right"
                                                                        value="cellRth"/>
                                                                </items>
                                                            </thAlign>
                                                            <thBgColor
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                defaultValue="none"
                                                                fieldLabel="Cell background color"
                                                                hideLabel="{Boolean}false"
                                                                name="./thBgColor">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <bgNone
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="none"
                                                                        value="none"/>
                                                                    <bgBlue
                                                                        jcr:primaryType="nt:unstructured"
                                                                        selected="{Boolean}true"
                                                                        text="Gray (default)"
                                                                        value="cellBlueTh"/>
                                                                </items>
                                                            </thBgColor>
                                                        </items>
                                                    </showHideContainer>
                                                </items>
                                            </th>
                                            <td
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="cell &lt;td> setting"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <columns
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <tdAlign
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                defaultValue="none"
                                                                fieldLabel="position"
                                                                hideLabel="{Boolean}false"
                                                                name="./tdAlign">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <txtL
                                                                        jcr:primaryType="nt:unstructured"
                                                                        selected="{Boolean}true"
                                                                        text="Left (default)"
                                                                        value="none"/>
                                                                    <txtC
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Center"
                                                                        value="cellCth"/>
                                                                    <txtR
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Right"
                                                                        value="cellRth"/>
                                                                </items>
                                                            </tdAlign>
                                                            <tdBgColor
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                defaultValue="none"
                                                                fieldLabel="Cell background color"
                                                                hideLabel="{Boolean}false"
                                                                name="./tdBgColor">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <bgNone
                                                                        jcr:primaryType="nt:unstructured"
                                                                        selected="{Boolean}true"
                                                                        text="none (default)"
                                                                        value="none"/>
                                                                    <bgGray
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Gray"
                                                                        value="cellBlueTh"/>
                                                                    <bgStripe
                                                                        jcr:primaryType="nt:unstructured"
                                                                        text="Stripe"
                                                                        value="stripe"/>
                                                                </items>
                                                            </tdBgColor>
                                                        </items>
                                                    </columns>
                                                </items>
                                            </td>
                                            <sp
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="Setting SP"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <columns
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <spDispOption
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup"
                                                                name="./spDispOption"
                                                                text="Display">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <fit
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/radio"
                                                                        checked="{Boolean}true"
                                                                        text="FIxed Mode"
                                                                        value="fit"/>
                                                                    <scroll
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/radio"
                                                                        text="Scroll Mode"
                                                                        value="scroll"/>
                                                                </items>
                                                            </spDispOption>
                                                        </items>
                                                    </columns>
                                                </items>
                                            </sp>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </tab2>
                    <paddingOption
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/include"
                        path="/apps/site/www/release/components/content/title/cq:dialog/content/items/tabs/items/paddingOption"/>
                    <properties
                        cq:hideOnEdit="{Boolean}true"
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        granite:class="cq-RichText-FixedColumn-column"
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <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="bold,italic"/>
                                                    <justify
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-"/>
                                                    <links
                                                        jcr:primaryType="nt:unstructured"
                                                        features="modifylink,unlink"/>
                                                    <lists
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*"/>
                                                    <misctools jcr:primaryType="nt:unstructured">
                                                        <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                            <chars jcr:primaryType="nt:unstructured">
                                                                <default_copyright
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;copy;"
                                                                    name="copyright"/>
                                                                <default_euro
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;euro;"
                                                                    name="euro"/>
                                                                <default_registered
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;reg;"
                                                                    name="registered"/>
                                                                <default_trademark
                                                                    jcr:primaryType="nt:unstructured"
                                                                    entity="&amp;trade;"
                                                                    name="trademark"/>
                                                            </chars>
                                                        </specialCharsConfig>
                                                    </misctools>
                                                    <paraformat
                                                        jcr:primaryType="nt:unstructured"
                                                        features="*">
                                                        <formats jcr:primaryType="nt:unstructured">
                                                            <default_p
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Paragraph"
                                                                tag="p"/>
                                                            <default_h1
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 1"
                                                                tag="h1"/>
                                                            <default_h2
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 2"
                                                                tag="h2"/>
                                                            <default_h3
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 3"
                                                                tag="h3"/>
                                                            <default_h4
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 4"
                                                                tag="h4"/>
                                                            <default_h5
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 5"
                                                                tag="h5"/>
                                                            <default_h6
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Heading 6"
                                                                tag="h6"/>
                                                            <default_blockquote
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Quote"
                                                                tag="blockquote"/>
                                                            <default_pre
                                                                jcr:primaryType="nt:unstructured"
                                                                description="Preformatted"
                                                                tag="pre"/>
                                                        </formats>
                                                    </paraformat>
                                                    <table
                                                        jcr:primaryType="nt:unstructured"
                                                        features="-">
                                                        <hiddenHeaderConfig
                                                            jcr:primaryType="nt:unstructured"
                                                            hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden"
                                                            hiddenHeaderEditingCSS="cq-RichText-hiddenHeader--editing"/>
                                                    </table>
                                                    <tracklinks
                                                        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,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
                                                            <popovers jcr:primaryType="nt:unstructured">
                                                                <justify
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                                                    ref="justify"/>
                                                                <lists
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                                                    ref="lists"/>
                                                                <paraformat
                                                                    jcr:primaryType="nt:unstructured"
                                                                    items="paraformat:getFormats:paraformat-pulldown"
                                                                    ref="paraformat"/>
                                                            </popovers>
                                                        </inline>
                                                        <tableEditOptions
                                                            jcr:primaryType="nt:unstructured"
                                                            toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]"/>
                                                    </cui>
                                                </uiSettings>
                                            </text>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

./_cq_dialog/content/items/tabs/items/tab1/items/columns/items/column/items/isRichTextFlag.xml

<?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"
    jcr:primaryType="cq:Widget"
    ignoreData="{Boolean}true"
    name="./textIsRich"
    value="true"
    xtype="hidden"/>

./table.html.dir/.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:file">
    <jcr:content
        jcr:lastModifiedBy="Administrator"
        jcr:mimeType="text/plain"
        jcr:primaryType="nt:resource"/>
</jcr:root>

./.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Table"
    sling:resourceSuperType="core/wcm/components/text/v2/text"
    componentGroup="News Release - Content"/>

./table.html

<!--/*
    News Release - Content
    Table Component
*/-->
<sly data-sly-use.model="com.xxxx.news.release.core.models.TableModel"
     data-sly-use.textModel="com.adobe.cq.wcm.core.components.models.Text"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
     data-sly-test.table="${model.tableData}">
<div class="p-table22 js-scrollable scroll-hint is-scrollable cmp-table p-post22__block--center" style="${mtModel.mt @ context='unsafe'}">
<sly class="cmp-text__paragraph"-
       data-sly-unwrap="${textModel.isRichText}">${table @ context = textModel.isRichText ? 'html' : 'text'}</sly>

</div>
</sly>
<sly data-sly-call="${templates.placeholder @ isEmpty = !table, classAppend='cmp-table'}"></sly>