Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Change styles for Table RTE plugin in Touch UI

Aleksandre
Level 2
Level 2

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?

1 Accepted Solution
manising
Correct answer by
Level 3
Level 3

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

View solution in original post

2 Replies
hamidk92094312
Employee
Employee

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
Correct answer by
Level 3
Level 3

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

View solution in original post

Aleksandre
Level 2
Level 2

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((

Aleksandre
Level 2
Level 2

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

 

praveenk9057427
Level 2
Level 2

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
Level 2
Level 2

Hi @praveenk9057427,

<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)