The setup is as follows: the project
HTMBuilder is a class library with core editor functionality. That is pure .NET, without UI, with an accompanying test project.
HTMLEditableContent project is a Blazor component with a
ContentEditable div. It calls
HtmlBuilder to render HTML in a
BlazorHtmlEditor is a Blazor component built around
HtmlEditableContent. The UI shell is programmed with
MatBlazor (Material Design for Blazor).
This design was chosen because you can replace each component with your own component. If you don't want a Material Design editor, you can build your own UI shell. If you only want the logic, then the
HTMLBuilder is enough.
The code is completely based on AngleSharp. A .NET library representing HTML-documents.
The biggest challenge is the combination of Blazor binding combined with a
ContentEditable HTML element. At first, I used binding. The HTML generated by AngleSharp was bound to the HTML element via a
The problem is that the browser implements the changes in a
contenteditable element in a
Another problem was that the Editor Blazor component and the
HtmlEditableContent Blazor component have to communicate with each other. For example, the Editor wants to show changes in the cursor position. If you implement this link via Parameter bindings, Blazor will consider any cursor position change as a Parameter change, including rendering. You don't want that at all.
This was solved by putting a shared class between the
HtmlEditableContent component. The editor registers an editor interface in a
static dictionary and the
EditableContent registers an
Htmlbuilder interface in another
static dictionary. The
dictionary will be shared between the two components. Both the
Editor and the
Content component have an
ID property (
Guid) and it is shared (via a parameter). Because they have the same key, they can request each other's interfaces in the shared libraries, without any renderings taking place. It is not ideal, but it works.
A Closer Look at the HtmlEditableContent
If the .NET side has to perform an operation, it asks the browser for the positions and the content (
Using the Code
Warning: All projects are experimental. The intention is only to demonstrate how to build an
HtmlEditor in Blazor. For example, I haven't taken the time to fully familiarize myself with AngleSharp, nor did I take the time to program a fully featured HTML-editor. Also, I have not tested everything in all browsers. That takes a lot more time. My main concern is the challenges encountered in building a Blazor HTML Editor.
The code is very easy to use.
BlockStyling parameters, you pass styles like
H2. There is also the possibility to pass
HtmlEditors use defaults if you don't provide them.
Study the code, play with it yourself, make improvements and extensions, make suggestions, improve the UI and so on. Despite all the difficulties, it remains a pleasure to work with Blazor.
Unzip the zip file. Execute:
Change active directory to
npm run build:debug
- 27th April, 2020: Initial version
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.