Blazored.TextEditor 1.0.0

The ID prefix of this package has been reserved for one of the owners of this package by NuGet.org. Prefix Reserved
There is a newer version of this package available.
See the version list below for details.
dotnet add package Blazored.TextEditor --version 1.0.0
NuGet\Install-Package Blazored.TextEditor -Version 1.0.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="Blazored.TextEditor" Version="1.0.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Blazored.TextEditor --version 1.0.0
#r "nuget: Blazored.TextEditor, 1.0.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 Blazored.TextEditor as a Cake Addin
#addin nuget:?package=Blazored.TextEditor&version=1.0.0

// Install Blazored.TextEditor as a Cake Tool
#tool nuget:?package=Blazored.TextEditor&version=1.0.0

Blazored TextEditor

Rich text editor for Blazor applications - Uses Quill JS

Screenshot

Helpful Articles

Installing

You can install from NuGet using the following command:

Install-Package Blazored.TextEditor

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.

In the head tag add the following CSS.

    <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/Blazored.TextEditor/Blazored-BlazorQuill.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 Blazored.TextEditor

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

Basic Example

(see code in the Index.razor page in the repo for more examples)

@using Blazored.TextEditor

<BlazoredTextEditor @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>
</BlazoredTextEditor>
<br />
<button class="btn btn-primary" 
        @onclick="GetHTML">Get HTML</button>
<br />
<div>
    <br />
    @((MarkupString)QuillHTMLContent)
    @QuillHTMLContent
</div>
<br />

@code {

BlazoredTextEditor QuillHtml;
string QuillHTMLContent;

    public async void GetHTML()
    {
        QuillHTMLContent = await this.QuillHtml.GetHTML();
        StateHasChanged();
    }
}

Rich Text Screenshot

Screenshot

Read Only Screenshot

Screenshot

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  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 was computed.  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. 
.NET Core netcoreapp2.0 was computed.  netcoreapp2.1 was computed.  netcoreapp2.2 was computed.  netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 is compatible.  netstandard2.1 was computed. 
.NET Framework net461 was computed.  net462 was computed.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen40 was computed.  tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (7)

Showing the top 5 NuGet packages that depend on Blazored.TextEditor:

Package Downloads
Cosmos.Common.AspNetCore.Blazor

Cosmos (Corporate Software Modular System) Blazor component library.

MRA.BlazorComponents

Package Description

mdimai666.Blast.AppFront.Shared

Shared project using Blast client apps

BlazingApple.Forums.Components

BlazingApple is a collection of business objects and corresponding components to speed application development. BlazingApple.Components provides a set of core components to easily create beautiful applications

mdimai666.Blast.AppFront.Main

Shared project using Blast client apps with UI framework

GitHub repositories (2)

Showing the top 2 popular GitHub repositories that depend on Blazored.TextEditor:

Repository Stars
enkodellc/blazorboilerplate
Blazor Boilerplate / Starter Template with MudBlazor
ADefWebserver/Blazor-Blogs
Simple blogging application written in Microsoft Server Side Blazor
Version Downloads Last updated
1.1.0 75,321 7/13/2023
1.0.8 148,135 5/5/2022
1.0.7 74,019 10/22/2021
1.0.4 3,527 10/6/2021
1.0.3 122,478 12/15/2019
1.0.2 1,234 12/13/2019
1.0.1 1,255 12/3/2019
1.0.0 1,254 11/26/2019