Blazorized.HtmlTextEditor
2.1.0
dotnet add package Blazorized.HtmlTextEditor --version 2.1.0
NuGet\Install-Package Blazorized.HtmlTextEditor -Version 2.1.0
<PackageReference Include="Blazorized.HtmlTextEditor" Version="2.1.0" />
paket add Blazorized.HtmlTextEditor --version 2.1.0
#r "nuget: Blazorized.HtmlTextEditor, 2.1.0"
// Install Blazorized.HtmlTextEditor as a Cake Addin #addin nuget:?package=Blazorized.HtmlTextEditor&version=2.1.0 // Install Blazorized.HtmlTextEditor as a Cake Tool #tool nuget:?package=Blazorized.HtmlTextEditor&version=2.1.0
Blazored TextEditor
Html Text Editor for Blazor applications - Uses Quill JS This project merges the best parts of Blazored.TextEditor and WYSIWYGTextEditor into one version.
Sample Applications
- Simple Blazor WASM application - [Contains an example of uploading images and inserting html]
Helpful Articles
Installing
You can install from NuGet using the following command:
Install-Package Blazorized.HtmlTextEditor
Or via the Visual Studio package manger.
Setup
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
Usage
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 content
Parameters
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
) - Usesnow
to show the Toolbar on top of the editor, andbubble
for inline editing.DebugLevel
(Optional - Default:info
) - Determines the level of debug information returned to the web browser console window. Options areerror
,warn
,log
, orinfo
.
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.
Basic Example
(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();
}
}
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net6.0 is compatible. net6.0-android was computed. net6.0-ios was computed. net6.0-maccatalyst was computed. net6.0-macos was computed. net6.0-tvos was computed. net6.0-windows was computed. net7.0 is compatible. net7.0-android was computed. net7.0-ios was computed. net7.0-maccatalyst was computed. net7.0-macos was computed. net7.0-tvos was computed. net7.0-windows was computed. net8.0 was computed. net8.0-android was computed. net8.0-browser was computed. net8.0-ios was computed. net8.0-maccatalyst was computed. net8.0-macos was computed. net8.0-tvos was computed. net8.0-windows was computed. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.11)
-
net7.0
- Microsoft.AspNetCore.Components.Web (>= 7.0.1)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.
Version | Downloads | Last updated |
---|---|---|
2.1.0 | 9,910 | 12/27/2022 |
Added Insert Html support