RTBlazorfied 1.0.130

There is a newer version of this package available.
See the version list below for details.
dotnet add package RTBlazorfied --version 1.0.130
                    
NuGet\Install-Package RTBlazorfied -Version 1.0.130
                    
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.130" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="RTBlazorfied" Version="1.0.130" />
                    
Directory.Packages.props
<PackageReference Include="RTBlazorfied" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add RTBlazorfied --version 1.0.130
                    
#r "nuget: RTBlazorfied, 1.0.130"
                    
#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.
#addin nuget:?package=RTBlazorfied&version=1.0.130
                    
Install as a Cake Addin
#tool nuget:?package=RTBlazorfied&version=1.0.130
                    
Install as a Cake Tool

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

Improved the color picker and small bug fixes to improve the usability of the editor.