diff --git a/README.md b/README.md index 47b38f8..f790d96 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,20 @@ -# Tizzani.MudBlazor.HtmlEditor +

Tizzani.MudBlazor.HtmlEditor

-A customizable HTML editor component for [MudBlazor](https://mudblazor.com/), powered by [QuillJS](https://quilljs.com/). +

+ A customizable HTML editor component for MudBlazor, powered by QuillJS.

+ +

+ NuGet Version + NuGet Downloads + GitHub last commit + GitHub License +

+ +

+ Try out the demo! +

+ +
![image](https://github.com/erinnmclaughlin/MudBlazor.HtmlEditor/assets/22223146/90f50c6b-b287-4e99-8849-added7239521) @@ -8,30 +22,28 @@ Works in dark mode, too! ![image](https://github.com/erinnmclaughlin/MudBlazor.HtmlEditor/assets/22223146/7755c8ac-fd95-4dab-8b5b-5360f04302b2) -### Demo -Try out the [demo](https://erinnmclaughlin.github.io/MudBlazor.HtmlEditor/) on GitHub Pages! +## Installation -### Download from NuGet +Download the [latest release](https://www.nuget.org/packages/Tizzani.MudBlazor.HtmlEditor) from NuGet: ```cmd dotnet add package Tizzani.MudBlazor.HtmlEditor ``` -### Setup -Add the following to your main HTML file (e.g. `App.razor`, `index.html`, or `Page.cshtml` depending on your Blazor setup): +Add references to the required CSS and JS to your main HTML file (e.g. `App.razor`, `index.html`, or `Page.cshtml` depending on your Blazor setup): ```html + -``` -```html + ``` -Then add the following to your `_Imports.razor`: +Finally, add the following to your `_Imports.razor`: -```csharp +```razor @using Tizzani.MudBlazor.HtmlEditor ``` @@ -40,7 +52,7 @@ There are several options available for customizing the HTML editor toolbar. To customize options for a specific editor instance, define a `` inside the ``: -```html +```razor @@ -52,7 +64,7 @@ For all available options, see [here](./src/Tizzani.MudBlazor.HtmlEditor/MudHtml To configure default options for all instances of the HTML editor, you can wrap your razor content with ``. #### App.razor or Routes.razor -```html +```razor @@ -65,7 +77,7 @@ Child components will inherit the default options, unless they override them wit ### Advanced Customization For more advanced customization, you can define your own toolbar options inside of an individual `` component: -```html +```razor