Style tag not rendering and styles are not getting applied

[ym]

Hey there, we are currently using the rich text editor and give html value as its input using the bindvalue attribute. the preview works fine but the editor is not able to pick up the <style> tag and the styles inside them 

Example, this does not work, I don't  get the css applied to the text, but inline css works . 

<p class = "test"> Test</p>

<style>

test {

  color: blue;

}

</style>

it would be great if I could get your assistance

Thanks,

ym

[Vinothkumar Yuvaraj]

Hi Ym,

To resolve this issue, you can add the dot to the class style in the <style> tag. Here is an example of the code you can use:

<style>

    .test {

        color: blue;

    }

</style>

Please let us know if you have any further questions or concerns.

Regards,

Vinothkumar

Attachment: BlazorApp1_96dcff75_9ae42545.zip

[ym]

Sorry that was a typo. I do have the dot present there . 

[ym]

We are actually using a markdown editor with two editors 1 for markdown and the other for preview . when we try to add raw html in the markdown editor it works for most cases but not for the style tag 

we convert the markdown to html and feed it to the preview window. this ignores the style tags completely . 

I also tested out the demo on your page and it does not seem to work - https://blazor.syncfusion.com/demos/rich-text-editor/markdown-overview?theme=bootstrap4

[Vinothkumar Yuvaraj]

Hi Ym,

To resolve this issue, we recommend setting the EnableHtmlSanitizer property to false into preview, which will allow you to add raw HTML and ensure that the styles are properly applied in the preview. Please note that by default, EnableHtmlSanitizer is set to true to avoid cross-scripting site attacks.

To implement this solution, please use the following code:

<SfRichTextEditor EnableHtmlSanitizer="false>

</SfRichTextEditor>

We have also attached a sample for your reference. You can find more information about EnableHtmlSanitizer in our API documentation, which is available at this link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.SfRichTextEditor.html#Syncfusion_Blazor_RichTextEditor_SfRichTextEditor_EnableHtmlSanitizer

If you prefer not to disable the EnableHtmlSanitizer property for the preview, you can always add your styles into the application end.

Regards,

Vinothkumar

Attachment: BlazorApp1_eceaa08c_e6ccb018.zip