RTBlazorfied 1.0.120

There is a newer version of this package available.
See the version list below for details.
dotnet add package RTBlazorfied --version 1.0.120                
NuGet\Install-Package RTBlazorfied -Version 1.0.120                
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.120" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add RTBlazorfied --version 1.0.120                
#r "nuget: RTBlazorfied, 1.0.120"                
#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.120

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

RT Blazorfied

Author: Ryan Kueter
Updated: July, 2024

About

RT Blazorfied 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 also uses Google's Font Icons. It does not reference the icon library. However, it does embed .svg versions of those icons so they are customizable.

Targets:

  • .NET 8

Adding a Rich Textbox

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" Html="@Html" Height="500px" Width="1000px" />

The element reference can be used to get the html or plaintext for saving.

private RTBlazorfied box { get; set; } = new();
private string? html { get; set; }
private string? plaintext { get; set; }

private async Task GetHtml() => 
    html = await box.GetHtmlAsync();

private async Task GetPlainText() => 
    plaintext = await box.GetPlainTextAsync();

The element reference also provides a method for restoring the text to the beginning:

box.Reinitialize();

Configure the Options

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

<RTBlazorfied Html="@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 = "#FF0000";
        o.BorderWidth = "1px";
        o.BorderStyle = "solid";
        o.BorderRadius = "10px 0px";
        o.DropdownBackgroundColor = "#333333";
        o.DropdownTextColor = "#FFFFFF";
        o.DropdownBackgroundColorHover = "#777777";
        o.DropdownTextColorHover = "#FFFFAA";
    });
    o.ModalStyles(o =>
    {
        o.BackgroundColor = "#333333";
        o.TextColor = "#FFFFAA";
        o.TextboxBackgroundColor = "#333333";
        o.TextboxTextColor = "#FFFFAA";
        o.TextboxBorderColor = "#FFFFAA";
        o.CheckboxAccentColor = "#FFFFAA";
    });
    o.ButtonStyles(o =>
    {
        o.TextColor = "#ff0000";
        o.TextSize = "30px";
        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.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 = "#333";
    });
    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.Undo = true;
        o.Redo = true;
        o.Quote = true;
        o.CodeBlock = true;
        o.EmbedMedia = true;
    });
});

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

Added an embed media button and small bug fixes to improve the usability of the editor.