Change styles for Table RTE plugin in Touch UI

[Aleksandre]

I need to change the table style of the RTE plugin in my own style.

To do this, just add a new class to <table> tag.
For example:

<table class="newStyleTable"></table>

Could you tell me if there is any possibility to change the styles Table RTE plugin out-of-the-box or have to override Table RTE plugin with new styles?

[hamidk92094312]

You should be able to overlay the existing component to configure your style in RTE. The following article help you for this:
https://helpx.adobe.com/experience-manager/using/touchUI_RTE_configure.html

[manising · Accepted solution]

I think you would be able to use the style system in AEM to apply your custom styles. More here: https://docs.adobe.com/content/help/en/experience-manager-65/authoring/siteandpage/style-system.html

[Aleksandre]

Thank you for your answer, but I have to add the custom class to <table>, not a component.
If the content author create 3 or 4 tables in RTE, then class "newStyleTable" have to be in each table.
So unfortunately, this answer does not suit me((

[arunpatidar]

Check the Similar customization done for the list plugin - http://experience-aem.blogspot.com/2017/05/aem-62-touch-ui-extend-rte-list-plugin-for-adding-selecte...

[Aleksandre]

For adding a new style for a table, I override Touch UI RTE table dialog.
As this example: http://experience-aem.blogspot.com/2018/06/aem-64-touchui-rich-text-editor-table-plugin-extension-su...
And I added setting used for Classic UI: 

<table
    jcr:primaryType="nt:unstructured"
    features="*">
    <tableStyles jcr:primaryType="cq:WidgetCollection">
        <table1
            jcr:primaryType="nt:unstructured"
            cssName="myClass"
            text="Style"/>
        <table2
            jcr:primaryType="nt:unstructured"
            cssName="myClassTwo"
            text="New Style"/>
    </tableStyles>
</table>

 As this User Guide https://docs.adobe.com/content/help/en/experience-manager-64/administering/operations/configure-rich...

Now, I am reading "tableStyles" config and set all configuration to Granite selection field. 

View for creating table dialog

View for editing table dialog 

[praveenk9057427]

Hi @Aleksandre , Actually I am looking to achieve same functionality in both cell properties and table properties. Tried but not able to achieve it. could you please provide more in detail the way you achieved it.

Thanks in advance.

[Aleksandre]

Hi @praveenk9057427,

• ClassicUI 
  I used Out of the Box functionality
  https://experienceleague.adobe.com/docs/experience-manager-64/administering/operations/configure-ric...
• TouchUI
  I override CUI.rte.plugins.TablePlugin where add RTE Table Style select fields for creation and modification RTE table.
  Add commands for these fields where I set my css class to Table html

<table
    jcr:primaryType="nt:unstructured"
    features="*">
    <tableStyles jcr:primaryType="cq:WidgetCollection">
        <table1
            jcr:primaryType="nt:unstructured"
            cssName="myClass"
            text="Style"/>
        <table2
            jcr:primaryType="nt:unstructured"
            cssName="myClassTwo"
            text="New Style"/>
    </tableStyles>
</table>

I hope this helps you. If you have any questions, I will gladly tell you more) 

[meges25]

do you have the code how do you implemented for touchUI?

Thanks

[neerajsingh26neer]

hi There,

Can you please help with the dialog box code the plugin code which you used i want to implement the same functionality.