Eine wiederverwendbare Blazor-Klassenbibliothek für Quill.js
$ dotnet add package uxBlazorQuillEditorBlazor Quill Editor Class Library

Dies ist ein Beispielprojekt f�r einen einfachen Blog mit Blazor Server. Es nutzt:
Quill Editor f�r die Texteingabe (mit Bild-Upload / Drag & Drop / Paste Support)
API-Backend zum Speichern und Laden von Blogposts
Per default ist in der quill.initialize.js die Option Base64 auf true eingestellt, so das die Bilder als Base64 eingebettet werden. Wenn ihr einen File-Upload m�chtet, solltet ihr den Pfad entsprechend eurer Struktur einstellen. Der Default Pfad zeigt auf : /api/upload. Ggf. sollte auch eine Authentifizierung implementieren werden.
Kopiert die Klassenbibliothek in eurer Projekt und f�gt den QuillEditor zu eurer Projektmappe und eurem Projekt hinzu.
Wenn ihr die Base64 Einstellung beibehaltet, solltet ihr die MaximumReceiveMessageSize entspechend erh�hen:
Programm.cs
builder.Services.AddServerSideBlazor()
// Die default Receive Size ist 32KB. Das f�hrt zu Problemen beim speichern der
// Eintr�ge wenn Bilder als Base64 enthalten sind!
.AddHubOptions(options =>
{
options.MaximumReceiveMessageSize = 10 * 1024 * 1024; // 10 MB
});
Imports
@using QuillEditor
YourAdminPage.razor
<QuillEditorBox @ref="editor" MaxImageWidth="400" MaxImageHeight="400" Initialized="OnChildInitialized" ContentChanged="Preview"/>
MaxImageWidth und MaxImageHeight sind Optional. Hiermit wird direkt beim Einf�gen die Bildgr��e auf die jeweilige Maximalangabe skaliert, so dass die Images tats�chlich auch in der Dateigr��e sich verkleinern.
Initialized wird aufgerufen nachdem die Komponente in AfterRender/FirstRender per Javascript erzeugt wurde.
ContextChanged wird bei Text-Changed aufgerufen.
Damit die Classes die Quill im HTML zur�ckgibt auch auf eurer Ausgabeseite �bernommen werden, muss sich der HTML Content in folgender Struktur befinden:
_Host.cshtml
<link href="./_content/uxBlazorQuillEditor/css/quilleditor.css" rel="stylesheet" />
YourBlogPage.razor
<div class="ql-snow">
<!-- Um den Stylesheet von quill zu �bernehmen!! -->
<div class="ql-editor">
<!-- Um den Stylesheet von quill zu �bernehmen!! -->
@((MarkupString)post.HtmlContent)
</div>
</div>
Quill Resize Module v2.0.3
File: quill.resize.js
File: quill.resize.css
Quill Module v2.0.3
File: quill.js
File: quill.snow.css