Add custom css file to RTE at the component level

[parthibanselvam]

I have been trying to add custom css file the should be specifically applied to the RTE component.

The main intentions in this requirements are:

1) Custom css code to be applied to RTE at the component level itself.

2) The rendered content of RTE should be automatically applied with the custom css code and rendered of the page.

Can this be achieved by adding any specific property to dialog nodes or any other way to integrate the CSS file to the component? Appreciate ur help.

[Asutosh_Jena_ · Accepted solution]

Hi @parthibanselvam 

You can apply the classes to the RTE content and write CSS styles based on the classes that is applied on the RTE content which will be applied to the content on the page while rendering.

You can create the styles under the RTE component like below.

It will be applied as a <span> tag like below:

[parthibanselvam]

Hi @Asutosh_Jena_ ,

I completely understood ur proposed idea. However we are trying to implement the css as a built-in feature with the component itself.

Rather the styles be applied manually during the RTE component authoring. How can we possibly approach this?

[Asutosh_Jena_]

If you mean to add the CSS directly on the component, you can build a custom component with 2 fields i.e. one RTE field to add the content and one text area field to apply the CSS styles.

Now in the HTL you need to read the textarea property which holds the CSS code using the styleString as the HTL expression within the <style> tag. This will apply the CSS Styles to the component.

[parthibanselvam]

@Asutosh_Jena_ , is it possible to make a custom css file get applied to the RTE text inside the dialog box itself, i.e, the styles and other css effects are visible inside the RTE text box itself