starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

RadzenHtmlEditor tools add unwanted <span> #1441

New Issue
Closed
opened 2026-01-29 17:53:42 +00:00 by claunia · 3 comments
claunia commented 2026-01-29 17:53:42 +00:00
Owner
Copy Link

Originally created by @RickdeBruijn on GitHub (Oct 17, 2024).

Describe the bug
Im using the RadzenHtmlEditor, a few of the editor tools seem to add unwanted HTML tags to the value.
specifically this span tag:
<span style="background-color: var(--rz-editor-content-background-color);">

This seems to happen with at least the following tools:

  • align center
  • align right
  • ordered list

The bug is consistent on the first edit; however, if you remove the span after that first edit, it seems to keep working.

To Reproduce
I created a new Blazor solution in Visual Studio and added the RadzenHTMLEditor to the home page.
In this new project, the problematic span tag contains even more unwanted text.
the small test project:
[BlazorApp1 (3).zip] (https://github.com/user-attachments/files/17413382/BlazorApp1.3.zip)

  1. Launch app
  2. Type your text.
  3. Click the "align center button." 
  4. the value changes to:
    <div style="text-align: center;"><span style="background-color: var(--rz-editor-content-background-color); color: var(--bs-body-color); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); text-align: var(--bs-body-text-align);">Hello world</span></div>

Expected behavior
Clicking, for example, "align center" should only result in:
<div style="text-align: center;">HelloWorld</div>

Screenshots
The bug happening in my original app
image

The bug is happening in my test project (BlazorApp1).
image

Desktop:

  • OS: Windows
    Browser chrome
    Version 130.0.6723.59

Additional context

Originally created by @RickdeBruijn on GitHub (Oct 17, 2024). **Describe the bug** Im using the RadzenHtmlEditor, a few of the editor tools seem to add unwanted HTML tags to the value. specifically this span tag: `<span style="background-color: var(--rz-editor-content-background-color);">` This seems to happen with at least the following tools: - align center - align right - ordered list The bug is consistent on the first edit; however, if you remove the span after that first edit, it seems to keep working. **To Reproduce** I created a new Blazor solution in Visual Studio and added the RadzenHTMLEditor to the home page. In this new project, the problematic span tag contains even more unwanted text. the small test project: [BlazorApp1 (3).zip] (https://github.com/user-attachments/files/17413382/BlazorApp1.3.zip) 1. Launch app 2. Type your text. 3. Click the "align center button."  4. the value changes to: `<div style="text-align: center;"><span style="background-color: var(--rz-editor-content-background-color); color: var(--bs-body-color); font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); text-align: var(--bs-body-text-align);">Hello world</span></div>` **Expected behavior** Clicking, for example, "align center" should only result in: `<div style="text-align: center;">HelloWorld</div>` **Screenshots** The bug happening in my original app ![image](https://github.com/user-attachments/assets/5b442207-6f2b-4880-8194-973d08cef223) The bug is happening in my test project (BlazorApp1). ![image](https://github.com/user-attachments/assets/276eed38-5234-490e-9796-d90103544a38) **Desktop:** - OS: Windows Browser chrome Version 130.0.6723.59 **Additional context**
claunia commented 2026-01-29 17:53:43 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Oct 17, 2024):

Unfortunately this is produced by the built-in browser HTML editor. We are not sure if there is any way to solve it.

@akorchev commented on GitHub (Oct 17, 2024): Unfortunately this is produced by the built-in browser HTML editor. We are not sure if there is any way to solve it.
claunia commented 2026-01-29 17:53:43 +00:00
Author
Owner
Copy Link

@akorchev commented on GitHub (Oct 17, 2024):

It seems this is related to CSS variables which we heavily use in the themes. Here is a test with and without CSS variables using vanilla contentEditable div.
contentEditable

It seems that setting some concrete font values for the contentEditable element rendered by RadzenHtmlEditor mitigates the problem:

    .rz-html-editor-content {
        font-family: Roboto;
        font-size: 15px;
    }
@akorchev commented on GitHub (Oct 17, 2024): It seems this is related to CSS variables which we heavily use in the themes. Here is a test with and without CSS variables using vanilla contentEditable div. ![contentEditable](https://github.com/user-attachments/assets/0dbbb57a-954e-468d-b586-54f53868a3c1) It seems that setting some concrete font values for the contentEditable element rendered by RadzenHtmlEditor mitigates the problem: ``` .rz-html-editor-content { font-family: Roboto; font-size: 15px; } ```
claunia commented 2026-01-29 17:53:43 +00:00
Author
Owner
Copy Link

@RickdeBruijn commented on GitHub (Oct 18, 2024):

This seems to be a chromium issue, as it happens in Chrome and Edge but not in Firefox.

Setting just font values did not solve the issue for me; however, it does look like Chromium likes to add styles to its span that it thinks are missing. For me, setting all attributes that Chromium thinks are missing to inherit solved the issue:
background-color: inherit;  color: inherit;  font-size: inherit;  font-weight: inherit;  text-align: inherit;

@RickdeBruijn commented on GitHub (Oct 18, 2024): This seems to be a chromium issue, as it happens in Chrome and Edge but not in Firefox. Setting just font values did not solve the issue for me; however, it does look like Chromium likes to add styles to its span that it thinks are missing. For me, setting all attributes that Chromium thinks are missing to inherit solved the issue: `background-color: inherit;  color: inherit;  font-size: inherit;  font-weight: inherit;  text-align: inherit;`
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1441
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?