Change styles for Table RTE plugin in Touch UI

Aleksandre

03-06-2020

I need to change the table style of the RTE plugin in my own style.
Screenshot_1.png
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?

Accepted Solutions (1)

Accepted Solutions (1)

manising

03-06-2020

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

Answers (2)

Answers (2)

Aleksandre

18-06-2020

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

Aleksandre_1-1592467614876.png


View for editing table dialog 

Aleksandre_0-1592467560738.png