
Product
Socket Now Protects the Chrome Extension Ecosystem
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
Blazorized.HtmlTextEditor
Advanced tools
This client library is a Blazor component wrapper around QuillJS.
Html Text Editor for Blazor applications - Uses Quill JS This project merges the best parts of Blazored.TextEditor and WYSIWYGTextEditor into one version.
You can install from NuGet using the following command:
Install-Package Blazorized.HtmlTextEditor
Or via the Visual Studio package manger.
Blazor Server applications will need to include the following CSS and JS files in their Pages\_Host.cshtml
(or Pages/_Layout.cshtml
if using .Net 6).
In the head
tag add the following CSS.
<link href="_content/Blazorized.HtmlTextEditor/blazor-quill.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
Then add the JS script at the bottom of the page using the following script tag.
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="_content/Blazorized.HtmlTextEditor/quill-blot-formatter.js"></script>
<script src="_content/Blazorized.HtmlTextEditor/blazor-quill.js"></script>
NOTE If you're using Blazor WebAssembly then these need to be added to your wwwroot\index.html
.
You can add the following using statement to your main _Imports.razor
to make referencing the component a bit easier.
@using Blazorized.HtmlTextEditor
Below is a list of all the options available on the Text Editor.
Templates
ToolbarContent
(optional) - Allows the user to define the Toolbar (above the editor control, or in-line when using the bubble theme, and a user highlights text in the editor).EditorContent
(optional) - Allows the user to define the initial contentParameters
ReadOnly
(Optional - Default: false
) - Determines if the editor will load in read-only mode. This mode can be toggled.Placeholder
(Optional - Default: Compose an epic...
) - The text to show when editor is empty.Theme
(Optional - Default: snow
) - Use snow
to show the Toolbar on top of the editor, and bubble
for inline editing.DebugLevel
(Optional - Default: info
) - Determines the level of debug information returned to the web browser console window. Options are error
, warn
, log
, or info
.Methods
GetText
- Gets the content of the editor as Text.GetHtml
- Gets the content of the editor as HTML.GetContent
- Gets the content of the editor in the native Quill JSON Delta format.LoadContent
(json
) - Allows the content of the editor to be programmatically set.LoadHtmlContent
(string
) - Allows the content of the editor to be programmatically set.InsertHtml
(string
) - Inserts HTML at the current point in the editor.InsertImage
(string
) - Inserts an image at the current point in the editor.InsertText
(string
) - Inserts text at the current point in the editor.(see code in the Index.razor page in the repo for more examples)
@using Blazorized.HtmlTextEditor
<HtmlTextEditor @ref="@QuillHtml">
<ToolbarContent>
<select class="ql-header">
<option selected=""></option>
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
</select>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<button class="ql-list" value="bullet"></button>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
</span>
</ToolbarContent>
<EditorContent>
<h4>This Toolbar works with HTML</h4>
<a href="http://BlazorHelpWebsite.com">
BlazorHelpWebsite.com</a>
</EditorContent>
</HtmlTextEditor>
<br />
<button class="btn btn-primary"
@onclick="GetHtml">Get HTML</button>
<button class="btn btn-primary"
@onclick="SetHTML">Set HTML</button>
<br />
<div>
<br />
@((MarkupString)QuillHTMLContent)
@QuillHTMLContent
</div>
<br />
@code {
HtmlTextEditor QuillHtml;
string QuillHTMLContent;
public async void GetHtml()
{
QuillHTMLContent = await this.QuillHtml.GetHtml();
StateHasChanged();
}
public async void SetHTML()
{
string QuillContent =
@"<a href='http://BlazorHelpWebsite.com/'>" +
"<img src='images/BlazorHelpWebsite.gif' /></a>";
await this.QuillHtml.LoadHtmlContent(QuillContent);
StateHasChanged();
}
}
FAQs
This client library is a Blazor component wrapper around QuillJS.
We found that blazorized.htmltexteditor demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.
Product
Add secure dependency scanning to Claude Desktop with Socket MCP, a one-click extension that keeps your coding conversations safe from malicious packages.
Product
Socket now supports Scala and Kotlin, bringing AI-powered threat detection to JVM projects with easy manifest generation and fast, accurate scans.