Hi
Are there any plans to introduce a WYSIWYG HTML blazor editor similar to CKEditor? Would be a nice addition to the already fantastic collection of controls.
Cheers
Hi,
Thanks for the suggestion! I've logged your request in our backlog for the next year.
Best Regards,
Vladimir
2 Likes
Apologies for bumping in after @enchev, but until we get native Radzen, this looks promising
It has very detailed blog post about implmenitng it Blazor from js.
Hi @enchev,
are there a target date or version when we can have a HTML or RT editor field in Radzen?
We are waiting for it and before implementing something "beside" Radzen we would love to use a radzen component 
Thomas
Hi @Thomas,
The HTML editor isn't happening any time soon. The reason is Blazor does not expose anything from the Browser HTML editing capabilities and we would have to do it from scratch in JavaScript (which we don't want to). Feel free to use the linked component or any other Blazor wrapper of a JavaScript editor.
Hi @korchev,
Thanks for the fast respond!
Ok. Then we will look for a Blazor Component to deal with.
Thomas
just a little feedback here.
currently we use the syncfusion components for a "rich text editor" and while it mostly works fine, every major update breaks something and we have to open tickets/deal with support (support is fine to work with, no complaints, it's just cumbersome). the reason we chose syncfusion is because the component supports a callback via http api, when an image is uploaded. we consume that callback via a web handler to store the image binary in a database, and just have the <img src="...." code in the html text. this keeps everything small and tidy. if anyone is interested in that i can post the code here.
so anway, we would be very happy to see a HTML/RTF editor implemented in radzen components, to trim down the required frameworks/packages of our app. hopefully the reasoning not to implement it changes some day in the future (i agree that implementing it in js is not a good solution 
).
cheers
Thanks for the feedback!
Most component vendors already have a complete JavaScript implementation for rich text editing and they reuse it in Blazor.
All modern browsers support rich text editing but there are some limitations. For example the HTML generated for the same operations sometimes varies between browsers, undo-redo during typing is not ideal - if you type 100 words and then undo all 100 words will get deleted. Pasting from Word or Excel requires a ton of regular expressions to clean up the broken markup.
I was part of the team that developed the Kendo UI editor and have less than fond memories of those times. I had to reimplement all built-in features in JavaScript so the editor behaves in a consistent manner across browsers.
Still we can probably try the current state of the built-in browser HTML editing and see how far it goes without JavaScript overrides. We can show you guys some prototype and you will tell us if it does the job or not. How does that sound?
1 Like
i'd be very happy to do that.
for us the requirements are actually quite "basic"
text editing: bold, italic, bullet list, (font color - optional)
images: the editor has to be able to insert pictures with CTRL+V, and it should trigger a callback so we can store the image in sql. in editors string binding the result is a <img tag, with the url pointing to the relative /api/xxx path
we don't need any other functionality like tables or stuff (actually when inserting preformatted text we would be fine if all existing HTML is stripped out right away ) but of course other people's requirements may vary. if the image pasting function is not provided, we will be unable to use the component though.
I uploaded a simple prototype here. It is entirely based on the browser contentEditable support and shows what is possible without any custom JavaScript involved. Would be very happy to hear if the built-in browser editing is sufficient for your needs. I have to admit things have improved a lot since 2010 when I last tested it.
We can probably support pasting of images with some extra JavaScript.
i tested it a bit, two issues currently 
when i tab out of the editor, the content multiplicates:
when i clear all content and tab out, the page crashes sometimes (not always).
pasting images works too, they then appear in markup base64 encoded:
i wouldn't mind this but this will probably lock up the blazor framework because the messages will get too big (at least that's what happened with the syncfusion component)
Will look into this. Hopefully it is something in our code which we can fix.
I've managed to reproduce this a couple of times. The error however is something that isn't in our code ...
Maybe Blazor can't handle contentEditable elements so well at the moment which is a shame. Will give it some more time to see if those two can be fixed.
I was surprised this worked out of the box! Blazor will definitely choke on larger files (a few megs in size). We can handle that but first we need to see if the basic content editing features can work without crashes and duplicate content.
Seems both problems are related to this closed issue.
The prototyp looks great!
I would love to exchange all textarea components with the HTML Editor!
Great work!
Thomas
that's a real shame. maybe they find time in 2021 to tackle this? thanks for your efforts.
I just updated the prototype with an attempt to address both reported issues. I may have found a way to circumvent that Blazor limitation.
1 Like
I have tested it. Looks good for me. 
cool. first testing reveals no errors. couldn't make it crash anymore (tested in chrome)
the only odd thing is undo/redo, when i type two lines
and press undo
it keeps the first char
pressing undo again, keeps the first char
this is something we can totally live with, just wanted to mention this behaviour.
then i a test more related to a real life scenario:
this looks fine as well, just the grey areas around the text are a little irritating at first. but this might even be helpful in editing mode to see the paragraphs (i assume it's the paragraphs?)
(speaking of which, the final solution needs a readonly boolean, ideally with the possiblity to have the toolbar removed.)
removing this text left some markup
(it might be necessary in a final solution to have a way to edit the html directly, to clean up content manually)
pasting some random pre-formatted text works surprisingly well, with a minor quirk tough: adding new lines at the end of the text take over the formatting from the last paragraph and i found no way of resetting that:
so yeah, for the very basic text requirements i think that's working fine already!
pasting advanced preformatted stuff (to be clear, we don't need this in our app, just testing it here) needs a bit work to make it perfect. and then the pictures
Undo / redo is indeed sometimes unexpected. Unfortunately we can't do anything about it without an entirely custom implementation in JavaScript.
This is the default background that is inherited from the app css and can be set to white. The white stuff that you see is strange though. It is either coming from the pasted markup (it contains background-color: rgb(255, 255, 255) which sets the background) or is something that is inherited from the app CSS as well. Probably a CSS reset would fix those.
This is the default browser text editing behaviour. Usually selecting all (ctrl+a) and deleting (del or backspace) should remove even those empty tags.
We keep that in mind 
All in all we are still not completely sure this is the right approach. There will be many cases where we will have to tell the users "this is the default browser behavior and we can't do much to prevent it". We will think it over during the weekend. Meanwhile everybody is welcome to share their feedback!
1 Like
Quick update on the editor prototype. We have been able to successfully handle image upload during paste (not enabled in the prototype linked above). We decided to proceed with the implementation - fingers crossed we don't hit any major roadblock!
5 Likes