HTML Editor component uses styles within the HTML content #851

New Issue

claunia · 2026-01-29T17:45:15Z

claunia commented

2026-01-29 17:45:15 +00:00

Originally created by @rmccrackentd on GitHub (May 16, 2023).

Describe the bug
Using the Demo of the HTML Editor component, if you add a <style> tag for CSS, the controls use these styles instead of treating the content as sandboxed.

To Reproduce
Steps to reproduce the behaviour:

Go to 'https://blazor.radzen.com/html-editor'
Click on View Source "<>"
Paste in example text below:

<html>
<head>
    <style type="text/css">
    </style>
</head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

See how the HTML Editor controls look as they were before.
Edit the text to now include some styles:

<html>
<head>
    <style type="text/css">
        * {
            font-family: sans-serif !important;
        }
    </style>
</head>
<body>
   <h1>Hello World!</h1>
</body>
</html>

See how the HTML Editor controls (and other elements on the page) now use the font-family from within the HTML content.

Expected behavior
I would expect this not to affect the HTML Editor component and for it to treat the HTML inside as sandboxed content.

Screenshots

Desktop (please complete the following information):

OS: Windows 11
Browser: Chrome
Version: 113

Additional context
I have tried this same test on other WYSIWYG HTML editors and they do not use the inner HTML styles.

Originally created by @rmccrackentd on GitHub (May 16, 2023). **Describe the bug** Using the Demo of the HTML Editor component, if you add a <style> tag for CSS, the controls use these styles instead of treating the content as sandboxed. **To Reproduce** Steps to reproduce the behaviour: 1. Go to ['https://blazor.radzen.com/html-editor'](https://blazor.radzen.com/html-editor#get-set-value) 2. Click on View Source "<>" 3. Paste in example text below: ``` <html> <head> <style type="text/css"> </style> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 4. See how the HTML Editor controls look as they were before. 5. Edit the text to now include some styles: ``` <html> <head> <style type="text/css"> * { font-family: sans-serif !important; } </style> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 6. See how the HTML Editor controls (and other elements on the page) now use the font-family from within the HTML content. **Expected behavior** I would expect this not to affect the HTML Editor component and for it to treat the HTML inside as sandboxed content. **Screenshots** ![Before](https://github.com/radzenhq/radzen-blazor/assets/127946069/a421b920-df57-4e5a-a597-7ca9fed5e61b) ![after](https://github.com/radzenhq/radzen-blazor/assets/127946069/a7e6b28e-750a-48ee-ab05-1cea899377b0) **Desktop (please complete the following information):** - OS: Windows 11 - Browser: Chrome - Version: 113 **Additional context** I have tried this same test on other WYSIWYG HTML editors and they do not use the inner HTML styles.

claunia closed this issue

2026-01-29 17:45:15 +00:00

claunia commented

2026-01-29 17:45:16 +00:00

@akorchev commented on GitHub (May 16, 2023):

RadzenHtmlEditor uses a <div> element to render its content. As such it inherits all CSS rules from the parent document. I don't think sandboxing can happen considering the current implementation.

@akorchev commented on GitHub (May 16, 2023): RadzenHtmlEditor uses a `<div>` element to render its content. As such it inherits all CSS rules from the parent document. I don't think sandboxing can happen considering the current implementation.

claunia referenced this issue

2026-01-29 18:18:27 +00:00

[PR #851] [MERGED] Update OrderIndex for all Columns #2353

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#851