Adding styles in rtePlugins in Touch UI

[vikas_chaudhary]

Hi ALL,

While adding styles plugin in the rtePlugin we need to specify the css file where the css definition for the classes used are defined, which is stored as "externalStyleSheets" in the "config" node(parent node of rtePlugin).

See image1

Styles applied to the text get rendered in inPlaceEditor as specified in the css in externalStyleSheets .

See image2

But when we are finished editing the text, that text appears as plain un-styled text.The rte appears to function right.But the css we referred to in config node is only available to the in place editor and not to the page itself.

See image 3

One solution to this is to include the same css file in the page as well, but this won't be the best practice to follow as we are referring to the same css file twice for the same component.

Thanks in advance!!

[smacdonald2008]

I was talking to an Adobe Touch UI expert about this and they stated: 

The Css can be added in a clientlib for page and referenced in externalStyleSheet config

[prabhdeep_puri]

@smacdonald2008, just including the clientlib containing the CSS on the page will not make it available to the dialog, so the author isn't able to see the applied styles while authoring. Thus, it makes it necessary to include the CSS in the 'externalStyleSheets' property. As vikas.chaudhary states, the vice versa is also true. This appears to be a pretty redundant step as compared to the classic UI, where you can see the styles applied on both component and dialog by just including the clientlib on the page. 

[smacdonald2008]

"This appears to be a pretty redundant step as compared to the classic UI, where you can see the styles applied on both component and dialog by just including the clientlib on the page"

In some cases - you have to perform extra steps in TOuch UI as compared to Classic. I agree that we need a clear article on this . I will work with the TOuch UI team to get this into an Article so its clear to everyone. 

[Ashwin_Raju]

vikas.chaudhary wrote...

Hi ALL,

While adding styles plugin in the rtePlugin we need to specify the css file where the css definition for the classes used are defined, which is stored as "externalStyleSheets" in the "config" node(parent node of rtePlugin).

See image1

Styles applied to the text get rendered in inPlaceEditor as specified in the css in externalStyleSheets .

See image2

But when we are finished editing the text, that text appears as plain un-styled text.The rte appears to function right.But the css we referred to in config node is only available to the in place editor and not to the page itself.

See image 3

One solution to this is to include the same css file in the page as well, but this won't be the best practice to follow as we are referring to the same css file twice for the same component.

Thanks in advance!!

Hi Vikas,

Can you please share the code package or let me know how the css is getting added. My css is not getting added.

Regards,

AR