WYSIWYG - in Asp .Net Core integrieren

Stefan Ober

Früher oder später kommt es bei mir in so gut wie jedem Asp.Net Core Projekt vor, dass die Anforderung auftaucht über die Webanwendung auch E-Mails versenden zu können mit verschiedensten Benachrichtigungen. Natürlich könnte man jetzt das Template für die E-Mail fest im Quellcode hinterlegen oder ganz einfach Plain Text schicken, aber so eine HTML formatierte E-Mail sieht halt meist besser aus und dann sollte der Anwender diese auch bearbeiten können. Ne Textbox ist schnell erstellt aber im manuellen sehr mühsam ein schönes HTML-Gerüst zu bauen. Hier kommt dann der WYSIWYG (What You See Is What You Get) Editor zum Einsatz der eine einfache Möglichkeit bietet dieses angenehm für den User zu editieren. Auf dem Markt gibt es verschiedene dieser Editoren, meine Wahl fiel auf den https://ckeditor.com/ . Auf der Website gibt es einen Online Builder der im Baukasten System den Editor nach eigenen Wünschen erstellt und als Download zur Verfügung stellt.

Wenn man die benötigten Files heruntergeladen hat, stellt sich jetzt die Frage wie man das am besten in das Projekt integriert. Am einfachsten ist es die heruntergeladene Zip Datei in folgende Struktur zu entpacken.

Um das ganze jetzt in der View zu integrieren fügt man hier an der Stelle erstmal eine normale TextArea ein mit einer Id. 

<textarea asp-for="HtmlBody" class="ck-editor" style="height:fit-content" id="MailBody" ></textarea>

Diese Id kann man mit Javascript ersetzen durch den Editor:

@section Scripts {
    @{
        await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script src="~/assets/vendor/ckeditor5/build/ckeditor.js"></script>

    <script type="text/javascript">


        const windowwidth = window.innerWidth;
        const editorwidth = windowwidth ;
        document.querySelector("#MailBody").style.width = `${editorwidth}px`;

        ClassicEditor
            .create(document.querySelector('#MailBody'))
            .then(editor => {
                console.log('Editor was initialized', editor);
            })
            .catch(error => {
                console.error('Error initializing editor', error);
            });
    </script>
}

Und schon hat man einen wunderbaren Editor in der View integriert. Und bietet dem Anwender einfache Möglichkeiten zur Formatierung an.