RTBlazorfied 1.0.118

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

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

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.149 24 7/15/2024
1.0.148 28 7/14/2024
1.0.147 26 7/14/2024
1.0.146 34 7/13/2024
1.0.145 32 7/13/2024
1.0.144 40 7/13/2024
1.0.143 36 7/13/2024
1.0.142 28 7/13/2024
1.0.141 33 7/13/2024
1.0.140 34 7/13/2024
1.0.139 30 7/13/2024
1.0.138 34 7/12/2024
1.0.137 30 7/11/2024
1.0.136 33 7/11/2024
1.0.135 33 7/11/2024
1.0.134 33 7/11/2024
1.0.133 36 7/10/2024
1.0.131 35 7/9/2024
1.0.130 67 7/7/2024
1.0.129 64 7/7/2024
1.0.128 61 7/7/2024
1.0.127 59 7/7/2024
1.0.126 73 7/7/2024
1.0.125 60 7/6/2024
1.0.124 66 7/6/2024
1.0.123 72 7/5/2024
1.0.122 69 7/5/2024
1.0.121 64 7/5/2024
1.0.120 60 7/5/2024
1.0.119 66 7/5/2024
1.0.118 64 7/5/2024
1.0.117 59 7/5/2024
1.0.116 54 7/5/2024
1.0.115 63 7/5/2024
1.0.114 61 7/5/2024
1.0.113 59 7/5/2024
1.0.112 62 7/5/2024
1.0.111 78 7/4/2024
1.0.110 66 7/4/2024
1.0.109 66 7/4/2024
1.0.108 67 7/4/2024
1.0.107 77 7/4/2024
1.0.106 77 7/4/2024
1.0.105 74 7/4/2024
1.0.104 70 7/4/2024
1.0.103 67 7/4/2024
1.0.102 69 7/4/2024
1.0.101 64 7/4/2024
1.0.100 74 7/3/2024
1.0.99 69 7/3/2024
1.0.98 75 7/3/2024
1.0.97 59 7/3/2024
1.0.96 80 7/3/2024
1.0.95 67 7/3/2024
1.0.94 63 7/3/2024
1.0.93 79 7/3/2024
1.0.92 75 7/3/2024
1.0.91 88 7/3/2024
1.0.90 74 7/2/2024
1.0.89 75 7/2/2024
1.0.88 63 7/2/2024
1.0.87 68 7/2/2024
1.0.86 64 7/2/2024
1.0.85 65 7/2/2024
1.0.84 77 7/2/2024
1.0.83 80 7/2/2024
1.0.82 78 7/2/2024
1.0.81 73 7/1/2024
1.0.80 74 7/1/2024
1.0.79 69 7/1/2024
1.0.78 82 6/30/2024
1.0.77 73 6/30/2024
1.0.76 73 6/30/2024
1.0.75 77 6/30/2024
1.0.74 86 6/28/2024
1.0.73 80 6/28/2024
1.0.72 76 6/28/2024
1.0.71 79 6/28/2024
1.0.70 69 6/27/2024
1.0.69 68 6/26/2024
1.0.68 80 6/26/2024
1.0.67 84 6/22/2024
1.0.66 84 6/22/2024
1.0.65 86 6/21/2024
1.0.64 78 6/20/2024
1.0.63 80 6/19/2024
1.0.62 75 6/19/2024
1.0.61 86 6/19/2024
1.0.60 78 6/18/2024
1.0.59 73 6/17/2024
1.0.58 69 6/17/2024
1.0.57 69 6/17/2024
1.0.56 67 6/17/2024
1.0.55 73 6/17/2024
1.0.54 69 6/17/2024
1.0.53 70 6/17/2024
1.0.52 68 6/17/2024
1.0.51 79 6/17/2024
1.0.50 74 6/17/2024
1.0.49 70 6/17/2024
1.0.48 80 6/17/2024
1.0.47 76 6/17/2024
1.0.46 74 6/16/2024
1.0.45 67 6/16/2024
1.0.44 81 6/16/2024
1.0.43 74 6/16/2024
1.0.42 77 6/16/2024
1.0.41 76 6/16/2024
1.0.40 76 6/16/2024
1.0.39 79 6/16/2024
1.0.38 87 6/16/2024
1.0.37 91 6/16/2024
1.0.36 79 6/14/2024
1.0.35 67 6/13/2024
1.0.34 70 6/13/2024
1.0.33 69 6/13/2024
1.0.32 66 6/13/2024
1.0.31 66 6/12/2024
1.0.30 63 6/12/2024
1.0.29 70 6/12/2024
1.0.28 65 6/11/2024
1.0.27 62 6/11/2024
1.0.26 62 6/10/2024
1.0.25 57 6/10/2024
1.0.24 63 6/10/2024
1.0.23 74 6/10/2024
1.0.22 77 6/10/2024
1.0.21 76 6/8/2024
1.0.20 72 6/8/2024
1.0.19 73 6/8/2024
1.0.18 78 6/8/2024
1.0.17 75 6/8/2024
1.0.16 72 6/7/2024
1.0.15 74 6/7/2024
1.0.14 82 6/7/2024
1.0.13 75 6/7/2024
1.0.12 77 6/7/2024
1.0.11 74 6/7/2024
1.0.9 82 6/6/2024
1.0.8 76 6/6/2024
1.0.7 80 6/6/2024
1.0.6 73 6/6/2024
1.0.5 80 6/6/2024
1.0.4 80 6/6/2024
1.0.3 78 6/6/2024
1.0.2 80 6/6/2024
1.0.1 79 6/6/2024

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