How to limit Radzen.Blazor.RadzenHtmlEditor

Radzen.Blazor Components
1

Hi everyone,

we are using the Radzen.Blazor.RadzenHtmlEditor component to allow people to edit some text with more advanced options.

This is how I implemented the control:
<Radzen.Blazor.RadzenHtmlEditor @bind-Value="pos.Langtext" Style="height: 300px;">






</Radzen.Blazor.RadzenHtmlEditor>

Now we are having some difficulties. As you can see we only want the user to have limited abilites to enter text such as Bold, Italic, Underline, StrikeThrough, Un/Ordered lists. However, the user can still paste in any HTML code which will get displayed fine but should not be allowed.

This results in texts with different font-familys and different font-sizes. Is there any way to prevent this behaviour?

It should only allow copy these tags in our case <i>, <b>, <strong>, <ul>, <li>, <ol>

We don't want to have any divs or spans with this kind of stuff inside. In the most cases we get a span with font-size: initial; which results in wrong text sizes in our layouts.

2

Hi @marvinkleinmusic,

You can try handling the Paste event of the editor and remove the unwanted HTML tags. Set the Html property of the event args to the cleaned value:

void OnPaste(HtmlEditorPasteEventArgs args)
{
   args.Html = Sanitize(args.Html);
}
3

Hi @korchev ,

I tried to use Sanitize the input Html but it didnt work.

@marvinkleinmusic have you done it successfully?

4

What does that mean?

5

No I didn't get it working. We threw all Radzen stuff away and are using a custom implementation of CKEditor now which does excatly what we want. No bullshit format in HTML

1 Like