Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Change styles for Table RTE plugin in Touch UI

Avatar

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

Avatar

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

9 Replies

Avatar

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

Avatar

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

Avatar

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

Avatar

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

 

Avatar

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.

Avatar

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) 

Avatar

Level 1

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

Thanks

Avatar

Level 1

hi There,

 

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