{"id":25077471,"url":"https://github.com/erinnmclaughlin/mudblazor.htmleditor","last_synced_at":"2025-04-05T09:05:14.517Z","repository":{"id":205698204,"uuid":"714821111","full_name":"erinnmclaughlin/MudBlazor.HtmlEditor","owner":"erinnmclaughlin","description":"A rich text editor component for MudBlazor","archived":false,"fork":false,"pushed_at":"2024-12-25T12:42:14.000Z","size":9373,"stargazers_count":45,"open_issues_count":7,"forks_count":9,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-29T04:35:20.781Z","etag":null,"topics":["mudblazor"],"latest_commit_sha":null,"homepage":"https://erinnmclaughlin.github.io/MudBlazor.HtmlEditor/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/erinnmclaughlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-05T22:34:40.000Z","updated_at":"2025-03-06T07:19:47.000Z","dependencies_parsed_at":"2023-11-06T03:23:52.191Z","dependency_job_id":"6a01a304-9f0f-4454-b2e5-2c3b6fda1bb5","html_url":"https://github.com/erinnmclaughlin/MudBlazor.HtmlEditor","commit_stats":null,"previous_names":["erinnmclaughlin/mudblazor.htmleditor"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erinnmclaughlin%2FMudBlazor.HtmlEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erinnmclaughlin%2FMudBlazor.HtmlEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erinnmclaughlin%2FMudBlazor.HtmlEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/erinnmclaughlin%2FMudBlazor.HtmlEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/erinnmclaughlin","download_url":"https://codeload.github.com/erinnmclaughlin/MudBlazor.HtmlEditor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247312077,"owners_count":20918344,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mudblazor"],"created_at":"2025-02-07T02:34:35.664Z","updated_at":"2025-04-05T09:05:14.484Z","avatar_url":"https://github.com/erinnmclaughlin.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tizzani.MudBlazor.HtmlEditor\n\nA customizable HTML editor component for [MudBlazor](https://mudblazor.com/), powered by [QuillJS](https://quilljs.com/).\n\n![NuGet Version](https://img.shields.io/nuget/v/Tizzani.MudBlazor.HtmlEditor)\n![NuGet Downloads](https://img.shields.io/nuget/dt/Tizzani.MudBlazor.HtmlEditor)\n![Last Commit](https://img.shields.io/github/last-commit/erinnmclaughlin/MudBlazor.HtmlEditor)\n![License](https://img.shields.io/github/license/erinnmclaughlin/MudBlazor.HtmlEditor)\n\n![image](https://raw.githubusercontent.com/erinnmclaughlin/MudBlazor.HtmlEditor/refs/heads/main/assets/light_mode.png)\n\nWorks in dark mode, too!\n\n![image](https://raw.githubusercontent.com/erinnmclaughlin/MudBlazor.HtmlEditor/refs/heads/main/assets/dark_mode.png)\n\n## Installation\n\nDownload the [latest release](https://www.nuget.org/packages/Tizzani.MudBlazor.HtmlEditor) from NuGet:\n\n```cmd\ndotnet add package Tizzani.MudBlazor.HtmlEditor\n```\n\nAdd 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):\n\n```html\n\u003c!-- Add to document \u003chead\u003e --\u003e\n\u003clink href=\"_content/Tizzani.MudBlazor.HtmlEditor/MudHtmlEditor.css\" rel=\"stylesheet\" /\u003e\n\n\u003c!-- Add to document \u003cbody\u003e --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"_content/Tizzani.MudBlazor.HtmlEditor/quill-blot-formatter.min.js\"\u003e\u003c/script\u003e \u003c!-- optional; for image resize --\u003e\n```\n\nFinally, add the following to your `_Imports.razor`:\n\n```razor\n@using Tizzani.MudBlazor.HtmlEditor\n```\n\n## Configuring Toolbar Options (available since v2.1)\nThere are several options available for customizing the HTML editor toolbar.\n\nTo customize options for a specific editor instance, define a `\u003cMudHtmlToolbarOptions\u003e` inside the `\u003cMudHtmlEditor\u003e`:\n\n```razor\n\u003cMudHtmlEditor\u003e\n  \u003cMudHtmlToolbarOptions InsertImage=\"false\" /\u003e \u003c!-- This will exclude the \"insert image\" toolbar option --\u003e\n\u003c/MudHtmlEditor\u003e\n```\n\nFor all available options, see [here](./src/Tizzani.MudBlazor.HtmlEditor/MudHtmlToolbarOptions.razor.cs).\n\n### Configuring Default Options\nTo configure default options for all instances of the HTML editor, you can wrap your razor content with `\u003cCascadingMudHtmlToolbarOptions\u003e`.\n\n#### App.razor or Routes.razor\n```razor\n\u003cCascadingMudHtmlToolbarOptions InsertImage=\"false\"\u003e\n  \u003cRouter AppAssembly=\"@typeof(Program).Assembly\"\u003e\n    \u003c!-- etc. --\u003e\n  \u003c/Router\u003e\n\u003c/CascadingMudHtmlToolbarOptions\u003e\n```\n\nChild components will inherit the default options, unless they override them with their own `\u003cMudHtmlToolbarOptions\u003e` instance.\n\n### Advanced Customization\nFor more advanced customization, you can define your own toolbar options inside of an individual `\u003cMudHtmlEditor\u003e` component:\n\n```razor\n\u003cMudHtmlEditor\u003e\n  \u003cspan class=\"ql-formats\"\u003e\n    \u003cbutton class=\"ql-bold\" type=\"button\"\u003e\u003c/button\u003e\n    \u003cbutton class=\"ql-italic\" type=\"button\"\u003e\u003c/button\u003e\n    \u003cbutton class=\"ql-underline\" type=\"button\"\u003e\u003c/button\u003e\n    \u003cbutton class=\"ql-strike\" type=\"button\"\u003e\u003c/button\u003e\n  \u003c/span\u003e\n\u003c/MudHtmlEditor\u003e\n```\n\nSee the [QuillJS documentation](https://quilljs.com/docs/modules/toolbar/) for more information on customizing the toolbar.\n\n## Migrating from v1.0 to v2.0\n* Remove the `services.AddMudBlazorHtmlEditor();` call from your `Startup.cs` or `Program.cs` file.\n* Remove the `\u003cscript src=\"_content/Tizzani.MudBlazor.HtmlEditor/HtmlEditor.js\"\u003e` tag from the document body. The required JS is now included by default.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferinnmclaughlin%2Fmudblazor.htmleditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ferinnmclaughlin%2Fmudblazor.htmleditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ferinnmclaughlin%2Fmudblazor.htmleditor/lists"}