I'm using .NET 9 with Blazor Server. I have installed Blazored Texteditor.
In App.razor within the head section I have added:
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.bubble.css" rel="stylesheet"><link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet">and in the body section:
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script><script src="_content/Blazored.TextEditor/quill-blot-formatter.min.js"></script><script src="_content/Blazored.TextEditor/Blazored-BlazorQuill.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>On my razor page, I have:
<BlazoredTextEditor @ref="textEditor" Syntax="true" Placeholder="Compose your content here..." Theme="snow"><ToolbarContent><span class="ql-formats"><button class="ql-code-block"></button><button class="ql-bold"></button><button class="ql-italic"></button><button class="ql-link"></button> </span></ToolbarContent><EditorContent></EditorContent></BlazoredTextEditor>In my code behind I have this:
private BlazoredTextEditor textEditor;private string editorContent;private async Task GetEditorContent(){ editorContent = await textEditor.GetHTML(); Console.WriteLine($"Editor Content: {editorContent}");}private async Task SetEditorContent(){ await textEditor.LoadHTMLContent("<p>This is preloaded content!</p>");}When I run the code, all I see is an outline where the buttons should be. When I look at the developer tools, I can see the links and scripts are referenced in the page.