Blazorized.HtmlTextEditor 2.1.0

dotnet add package Blazorized.HtmlTextEditor --version 2.1.0                
NuGet\Install-Package Blazorized.HtmlTextEditor -Version 2.1.0                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Blazorized.HtmlTextEditor" Version="2.1.0" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Blazorized.HtmlTextEditor --version 2.1.0                
#r "nuget: Blazorized.HtmlTextEditor, 2.1.0"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// 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.

Screenshot

Sample Applications

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) - 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.

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 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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

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 10,302 12/27/2022

Added Insert Html support