RTBlazorfied 1.0.254

dotnet add package RTBlazorfied --version 1.0.254                
NuGet\Install-Package RTBlazorfied -Version 1.0.254                
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="RTBlazorfied" Version="1.0.254" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add RTBlazorfied --version 1.0.254                
#r "nuget: RTBlazorfied, 1.0.254"                
#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 RTBlazorfied as a Cake Addin
#addin nuget:?package=RTBlazorfied&version=1.0.254

// Install RTBlazorfied as a Cake Tool
#tool nuget:?package=RTBlazorfied&version=1.0.254                

RT Blazorfied

Author: Ryan Kueter
Updated: December, 2024

About

RT Blazorfied HTML Editor is a free .NET library available from the NuGet Package Manager that allows Blazor developers to easily add a rich text box / html editor to their Blazor application. The editor uses Google's Font Icons. It doesn't reference the icon library. However, it does embed .svg versions of those icons so they are customizable. It also uses the shadow DOM to isolate the HTML from inheriting the existing page styles. Because of that, it provides a preview window for the user to view the live page if the style sheets are applied to the host application. Users are also able to add CSS classes to many components allowing them to customize their appearance.

Targets:

  • .NET 8 - .NET 9

Features:

  • Shortcut Keys
  • Button Visibility
  • Copy and Taste Content and Tables
  • Highly Customized Appearance
  • Lists
  • Links
  • Tables
  • Colors and Highlighting
  • Images
  • Video
  • Audio
  • PDF Documents
  • HTML Pages
  • Code Blocks
  • Block Quotes

Adding the HTML Editor

Add the JavaScript Reference

Add the following reference to the end of your index.html file:

<script src="_content/RTBlazorfied/js/RTBlazorfied.js"></script>

Add the Element

In this example, the @Html is the html string. This height and width will override those specified in the configuration options.

@using RichTextBlazorfied

<RTBlazorfied @ref="box" @bind-Value="@Html" Height="500px" Width="1000px" />

The element reference provides another way to get the html or plaintext:

private RTBlazorfied? box { get; set; }

private async Task<string?> GetHtml() =>
        await box!.GetHtmlAsync();

private async Task<string?> GetPlainText() =>
        await box!.GetPlainTextAsync();

Configure the Options

RTBlazorfied was designed to allow developers to highly customize the appearance of the rich textbox with the following configuration options:

<RTBlazorfied @bind-Value="@Html" Options="@GetOptions()" />

CSS variables, e.g., var(--my-variable) are interchangeable with these styles. And omitting the ButtonVisibility options will display all the buttons.

public Action<IRTBlazorfiedOptions> GetOptions() => (o =>
{
    o.ToolbarStyles(o =>
    {
        o.BackgroundColor = "#00FF00";
        o.BorderColor = "var(--border-color)";
        o.BorderWidth = "1px";
        o.BorderStyle = "solid";
        o.BorderRadius = "10px 0px";
        o.DropdownBackgroundColor = "var(--background-color)";
        o.DropdownTextColor = "#FFFFFF";
        o.DropdownBackgroundColorHover = "#777777";
        o.DropdownTextColorHover = "#FFFFAA";
    });
    o.ModalStyles(o =>
    {
        o.RemoveCSSClassInputs();
        o.BackgroundColor = "#333333";
        o.TextColor = "#FFFFAA";
        o.TextSize = "20px";
        o.TextFont = "Comic Sans MS";
        o.TextboxBackgroundColor = "#333333"; // Texbox refers to inputs
        o.TextboxTextColor = "#FFFFAA";
        o.TextboxBorderColor = "#FFFFAA";
        o.CheckboxAccentColor = "#FFFFAA";
    });
    o.ButtonStyles(o =>
    {
        o.TextColor = "#ff0000";
        o.TextSize = "30px";
        o.TextFont = "Comic Sans MS";
        o.BackgroundColor = "#0000FF";
        o.BackgroundColorHover = "inherit";
        o.BackgroundColorSelected = "inherit";
        o.BorderColor = "#FFF000";
        o.BorderColorHover = "#FF0000";
        o.BorderColorSelected = "#0000FF";
        o.BorderStyle = "solid";
        o.BorderRadius = "0px";
        o.BorderWidth = "1px";
    });
    o.EditorStyles(o =>
    {
        o.RemoveResizeHandle();
        o.Width = "500px";
        o.Height = "700px";
        o.BorderRadius = "10px";
        o.BoxShadow = "3px 3px 5px 6px #ccc";
        o.BorderStyle = "dotted";
        o.BorderWidth = "10px";
        o.BorderColor = "#FF0000";
    });
    o.ContentStyles(o =>
    {
        o.ContentBoxShadow = "inset 0 0 7px #eee";
        o.BackgroundColor = "#FFFF99";
        o.TextColor = "#FFFFAA";
        o.TextSize = "30px";
        o.TextFont = "Comic Sans MS";
    });
    o.ScrollbarStyles(o =>
    {
        o.Width = "5px";
        o.Opacity = "0.5";
        o.ThumbBackground = "#0000FF";
        o.ThumbBackgroundHover = "#00FFFF";
        o.BackgroundColor = "transparent";
        o.ThumbBorderRadius = "10px";
    });
    o.ButtonVisibility(o =>
    {
        o.ClearAll();
        o.Size = true;
        o.Font = true;
        o.Format = true;
        o.Bold = true;
        o.Italic = true;
        o.Underline = true;
        o.Strikethrough = true;
        o.Subscript = true;
        o.Superscript = true;
        o.TextColor = true;
        o.AlignLeft = true;
        o.AlignCenter = true;
        o.AlignRight = true;
        o.AlignJustify = true;
        o.Copy = true;
        o.Cut = true;
        o.Delete = true;
        o.SelectAll = true;
        o.Image = true;
        o.Link = true;
        o.OrderedList = true;
        o.UnorderedList = true;
        o.Indent = true;
        o.Undo = true;
        o.Redo = true;
        o.Quote = true;
        o.CodeBlock = true;
        o.EmbedMedia = true;
        o.ImageUpload = true;
        o.HtmlView = true;
        o.Preview = true;

        // Dividers
        o.TextStylesDivider = false;
        o.FormatDivider = false;
        o.TextColorDivider = false;
        o.AlignDivider = false;
        o.ActionDivider = false;
        o.ListDivider = false;
        o.MediaDivider = false;
        o.HistoryDivider = false;
    });
});

Shortcut Keys

Bold: Ctrl + B
Italic: Ctrl + I
Underline: Ctrl + U
Strikethrough: Ctrl + D
Subscript: Ctrl + =
Superscript: Ctrl + Shift + [+]
Text Color: Ctrl + Shift + C
Text Background Color: Ctrl + shift + B
Align Left: Ctrl + L
Align Center: Ctrl + E
Align Right: Ctrl + R
Align Justify: Ctrl + J
Cut: Ctrl + X
Copy: Ctrl + C
Paste: Ctrl + V
Select All: Ctrl + A
Ordered List: Ctrl + Shift + O
Unordered List: Ctrl + Shift + U
Increase Indent: Tab
Decrease Indent: Shift + Tab
Insert Link: Ctrl + Shift + K
Insert Image: Ctrl + Shift + I
Insert Quote: Ctrl + Shift + Q
Insert Media: Ctrl + Shift + M
Insert Table: Ctrl + Shift + L
Insert Code Block: Ctrl + Shift + [*]
Undo: Ctrl + Z
Redo: Ctrl + Y
Format: Ctrl + Shift + [D, P, 1, 2, 3, and so on]
Size: Ctrl + Shift + [<, >]
Toggle Code and HTML: Ctrl + Shift + A

Contributions

This project is being developed for free by me, Ryan Kueter, in my spare time. So, if you would like to contribute, please submit your ideas on the Github project page.

Product Compatible and additional computed target framework versions.
.NET net8.0 is compatible.  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.  net9.0 is compatible. 
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
1.0.254 80 12/5/2024
1.0.253 188 8/18/2024
1.0.252 122 8/18/2024
1.0.251 123 8/18/2024
1.0.250 119 8/18/2024
1.0.249 133 8/18/2024
1.0.248 116 8/18/2024
1.0.247 120 8/15/2024
1.0.246 110 8/15/2024
1.0.245 120 8/14/2024
1.0.244 109 8/14/2024
1.0.243 134 8/13/2024
1.0.242 121 8/13/2024
1.0.241 112 8/13/2024
1.0.240 123 8/13/2024
1.0.239 82 8/4/2024
1.0.238 84 8/4/2024
1.0.237 74 8/3/2024
1.0.236 77 8/3/2024
1.0.235 76 8/3/2024
1.0.234 80 8/2/2024
1.0.233 92 8/2/2024
1.0.232 80 8/1/2024
1.0.231 89 8/1/2024
1.0.230 82 8/1/2024
1.0.229 80 7/31/2024
1.0.228 67 7/31/2024
1.0.227 69 7/31/2024
1.0.226 73 7/30/2024
1.0.225 68 7/30/2024
1.0.224 67 7/30/2024
1.0.223 54 7/29/2024
1.0.222 57 7/29/2024
1.0.221 54 7/29/2024
1.0.220 68 7/29/2024
1.0.219 71 7/29/2024
1.0.218 63 7/29/2024
1.0.217 71 7/28/2024
1.0.215 68 7/28/2024
1.0.214 64 7/28/2024
1.0.213 71 7/27/2024
1.0.212 75 7/26/2024
1.0.211 82 7/26/2024
1.0.210 81 7/26/2024
1.0.209 77 7/26/2024
1.0.208 73 7/26/2024
1.0.207 79 7/25/2024
1.0.206 73 7/25/2024
1.0.205 71 7/25/2024
1.0.204 63 7/25/2024
1.0.203 81 7/25/2024
1.0.202 73 7/25/2024
1.0.201 75 7/25/2024
1.0.200 76 7/25/2024
1.0.199 78 7/25/2024
1.0.198 78 7/24/2024
1.0.197 77 7/24/2024
1.0.196 73 7/24/2024
1.0.195 67 7/24/2024
1.0.194 77 7/24/2024
1.0.192 59 7/24/2024
1.0.191 90 7/23/2024
1.0.190 99 7/23/2024
1.0.189 100 7/23/2024
1.0.188 92 7/23/2024
1.0.187 86 7/23/2024
1.0.186 92 7/23/2024
1.0.185 91 7/22/2024
1.0.184 94 7/22/2024
1.0.183 108 7/22/2024
1.0.182 105 7/21/2024
1.0.181 104 7/21/2024
1.0.180 112 7/21/2024
1.0.179 116 7/21/2024
1.0.178 100 7/21/2024
1.0.177 105 7/21/2024
1.0.176 110 7/21/2024
1.0.175 123 7/21/2024
1.0.174 119 7/20/2024
1.0.173 114 7/20/2024
1.0.172 104 7/19/2024
1.0.171 103 7/19/2024
1.0.170 104 7/19/2024
1.0.169 112 7/18/2024
1.0.168 99 7/18/2024
1.0.167 92 7/18/2024
1.0.166 119 7/18/2024
1.0.165 98 7/18/2024
1.0.164 98 7/18/2024
1.0.163 107 7/18/2024
1.0.162 98 7/17/2024
1.0.161 109 7/17/2024
1.0.160 107 7/17/2024
1.0.159 101 7/17/2024
1.0.158 80 7/17/2024
1.0.157 93 7/17/2024
1.0.156 112 7/16/2024
1.0.155 95 7/16/2024
1.0.154 98 7/16/2024
1.0.153 95 7/16/2024
1.0.152 88 7/16/2024
1.0.151 97 7/16/2024
1.0.150 102 7/16/2024
1.0.149 96 7/15/2024
1.0.148 98 7/14/2024
1.0.147 99 7/14/2024
1.0.146 102 7/13/2024
1.0.145 98 7/13/2024
1.0.144 109 7/13/2024
1.0.143 102 7/13/2024
1.0.142 94 7/13/2024
1.0.141 99 7/13/2024
1.0.140 96 7/13/2024
1.0.139 97 7/13/2024
1.0.138 98 7/12/2024
1.0.137 95 7/11/2024
1.0.136 99 7/11/2024
1.0.135 105 7/11/2024
1.0.134 95 7/11/2024
1.0.133 97 7/10/2024
1.0.131 99 7/9/2024
1.0.130 100 7/7/2024
1.0.129 103 7/7/2024
1.0.128 91 7/7/2024
1.0.127 96 7/7/2024
1.0.126 105 7/7/2024
1.0.125 95 7/6/2024
1.0.124 98 7/6/2024
1.0.123 106 7/5/2024
1.0.122 102 7/5/2024
1.0.121 99 7/5/2024
1.0.120 95 7/5/2024
1.0.119 104 7/5/2024
1.0.118 102 7/5/2024
1.0.117 94 7/5/2024
1.0.116 104 7/5/2024
1.0.115 94 7/5/2024
1.0.114 91 7/5/2024
1.0.113 105 7/5/2024
1.0.112 97 7/5/2024
1.0.111 109 7/4/2024
1.0.110 120 7/4/2024
1.0.109 100 7/4/2024
1.0.108 96 7/4/2024
1.0.107 113 7/4/2024
1.0.106 108 7/4/2024
1.0.105 107 7/4/2024
1.0.104 110 7/4/2024
1.0.103 102 7/4/2024
1.0.102 98 7/4/2024
1.0.101 97 7/4/2024
1.0.100 106 7/3/2024
1.0.99 103 7/3/2024
1.0.98 114 7/3/2024
1.0.97 92 7/3/2024
1.0.96 108 7/3/2024
1.0.95 98 7/3/2024
1.0.94 92 7/3/2024
1.0.93 134 7/3/2024
1.0.92 102 7/3/2024
1.0.91 118 7/3/2024
1.0.90 105 7/2/2024
1.0.89 110 7/2/2024
1.0.88 107 7/2/2024
1.0.87 98 7/2/2024
1.0.86 100 7/2/2024
1.0.85 101 7/2/2024
1.0.84 106 7/2/2024
1.0.83 111 7/2/2024
1.0.82 110 7/2/2024
1.0.81 106 7/1/2024
1.0.80 109 7/1/2024
1.0.79 102 7/1/2024
1.0.78 114 6/30/2024
1.0.77 109 6/30/2024
1.0.76 107 6/30/2024
1.0.75 127 6/30/2024
1.0.74 123 6/28/2024
1.0.73 107 6/28/2024
1.0.72 102 6/28/2024
1.0.71 109 6/28/2024
1.0.70 99 6/27/2024
1.0.69 99 6/26/2024
1.0.68 107 6/26/2024
1.0.67 113 6/22/2024
1.0.66 115 6/22/2024
1.0.65 115 6/21/2024
1.0.64 114 6/20/2024
1.0.63 107 6/19/2024
1.0.62 106 6/19/2024
1.0.61 120 6/19/2024
1.0.60 112 6/18/2024
1.0.59 104 6/17/2024
1.0.58 95 6/17/2024
1.0.57 101 6/17/2024
1.0.56 96 6/17/2024
1.0.55 97 6/17/2024
1.0.54 100 6/17/2024
1.0.53 104 6/17/2024
1.0.52 95 6/17/2024
1.0.51 106 6/17/2024
1.0.50 105 6/17/2024
1.0.49 100 6/17/2024
1.0.48 105 6/17/2024
1.0.47 104 6/17/2024
1.0.46 100 6/16/2024
1.0.45 96 6/16/2024
1.0.44 112 6/16/2024
1.0.43 105 6/16/2024
1.0.42 102 6/16/2024
1.0.41 106 6/16/2024
1.0.40 105 6/16/2024
1.0.39 112 6/16/2024
1.0.38 125 6/16/2024
1.0.37 120 6/16/2024
1.0.36 109 6/14/2024
1.0.35 97 6/13/2024
1.0.34 106 6/13/2024
1.0.33 98 6/13/2024
1.0.32 98 6/13/2024
1.0.31 97 6/12/2024
1.0.30 98 6/12/2024
1.0.29 99 6/12/2024
1.0.28 97 6/11/2024
1.0.27 101 6/11/2024
1.0.26 98 6/10/2024
1.0.25 94 6/10/2024
1.0.24 98 6/10/2024
1.0.23 102 6/10/2024
1.0.22 109 6/10/2024
1.0.21 104 6/8/2024
1.0.20 111 6/8/2024
1.0.19 110 6/8/2024
1.0.18 114 6/8/2024
1.0.17 109 6/8/2024
1.0.16 102 6/7/2024
1.0.15 105 6/7/2024
1.0.14 112 6/7/2024
1.0.13 104 6/7/2024
1.0.12 104 6/7/2024
1.0.11 105 6/7/2024
1.0.9 114 6/6/2024
1.0.8 119 6/6/2024
1.0.7 108 6/6/2024
1.0.6 104 6/6/2024
1.0.5 113 6/6/2024
1.0.4 112 6/6/2024
1.0.3 115 6/6/2024
1.0.2 107 6/6/2024
1.0.1 112 6/6/2024

Added a .NET 9 target.