{"id":14986830,"url":"https://github.com/blazored/texteditor","last_synced_at":"2025-05-14T18:05:21.999Z","repository":{"id":36408309,"uuid":"223770798","full_name":"Blazored/TextEditor","owner":"Blazored","description":"Rich text editor for Blazor applications - Uses Quill JS","archived":false,"fork":false,"pushed_at":"2025-04-11T20:43:16.000Z","size":9822,"stargazers_count":301,"open_issues_count":0,"forks_count":66,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-05-14T18:05:15.564Z","etag":null,"topics":["blazor","blazor-applications","blazor-client","blazor-server","blazored","csharp","quilljs","rich-text-editor","rich-text-html-editor","richeditor"],"latest_commit_sha":null,"homepage":"https://blazored.github.io/TextEditor/","language":"HTML","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/Blazored.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,"zenodo":null}},"created_at":"2019-11-24T16:02:18.000Z","updated_at":"2025-05-12T06:15:21.000Z","dependencies_parsed_at":"2024-01-14T02:36:44.529Z","dependency_job_id":"3c4f762b-a563-4ab4-9c3d-e01960c5597e","html_url":"https://github.com/Blazored/TextEditor","commit_stats":{"total_commits":34,"total_committers":5,"mean_commits":6.8,"dds":"0.23529411764705888","last_synced_commit":"69c8f842f62589ed65664f6df4541b9383284dfa"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazored%2FTextEditor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazored%2FTextEditor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazored%2FTextEditor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Blazored%2FTextEditor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Blazored","download_url":"https://codeload.github.com/Blazored/TextEditor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198514,"owners_count":22030965,"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":["blazor","blazor-applications","blazor-client","blazor-server","blazored","csharp","quilljs","rich-text-editor","rich-text-html-editor","richeditor"],"created_at":"2024-09-24T14:13:37.132Z","updated_at":"2025-05-14T18:05:16.990Z","avatar_url":"https://github.com/Blazored.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blazored TextEditor\n\n\u003c!-- ![Blazored Icon](https://avatars.githubusercontent.com/u/39194025?s=200\u0026v=4 \"Blazored Icon\") --\u003e\n\n[![Blazor](https://img.shields.io/badge/blazor-5C2D91.svg?style=for-the-badge\u0026logo=blazor\u0026logoColor=white)](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) [![C#](https://img.shields.io/badge/c%23-239120.svg?style=for-the-badge\u0026logo=c-sharp\u0026logoColor=white)](https://learn.microsoft.com/en-us/dotnet/csharp/)\n\n[![Build \u0026 Test Main](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml)\n[![pages-build-deployment](https://github.com/Blazored/TextEditor/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/pages/pages-build-deployment)\n[![Build \u0026 Test PR](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml)\n[![CodeQL](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml)\n[![Release Drafter](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml/badge.svg)](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml)\n\n\u003e Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ \"Quill JS.com\")\n\n![HTML Example](docs/images/HTMLExample.png \"HTML Example]\")\n\n## Sample Applications\n\nThe [TextEditorDemo](samples/TextEditorDemo) has deployed via GitHub Pages:\n\n- https://blazored.github.io/TextEditor/\n\nYou can also see it in action with:\n\n* [Simple blogging application written in Microsoft Server Side Blazor](https://github.com/ADefWebserver/Blazor-Blogs \"Blazor Blogs\") - [Contains an example of uploading images]\n\n## Helpful Articles\n\n* [Creating Reusable Custom Blazor Controls](https://blazorhelpwebsite.com/ViewBlogPost/11 \"BlazorHelpWebsite.com\")\n* [Creating A Rich Text Editor In Blazor Using Quill](https://blazorhelpwebsite.com/ViewBlogPost/12 \"BlazorHelpWebsite.com\")\n\n## Installing\n\n[![NuGet Version](https://img.shields.io/nuget/v/blazored.TextEditor.svg?logo=nuget \"NuGet Version\")](https://www.nuget.org/packages/Blazored.TextEditor/)\n[![NuGet Downloads](https://img.shields.io/nuget/dt/Blazored.TextEditor?logo=nuget \"NuGet Downloads\")](https://www.nuget.org/packages/Blazored.TextEditor/)\n\nYou can install from NuGet using the following command:\n\n`Install-Package Blazored.TextEditor`\n\nOr via the Visual Studio package manger.\n\n## Setup\n\nBlazor Server applications will need to include the following CSS and JS files in their `Pages\\_Host.cshtml` (or `Pages/_Layout.cshtml` if using .Net 6).\n\nIn the `head` tag add the following CSS.\n\n```html\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css\" rel=\"stylesheet\"\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.bubble.css\" rel=\"stylesheet\"\u003e\n```\n\nThen add the JS script at the bottom of the page using the following script tag.\n\n```html\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"_content/Blazored.TextEditor/quill-blot-formatter.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"_content/Blazored.TextEditor/Blazored-BlazorQuill.js\"\u003e\u003c/script\u003e\n```\n\n**NOTE** If you're using Blazor WebAssembly then these need to be added to your `wwwroot\\index.html`.\n\nYou can add the following using statement to your main `_Imports.razor` to make referencing the component a bit easier.\n\n```cs\n@using Blazored.TextEditor\n```\n\n## Usage\n\nBelow is a list of all the options available on the Text Editor.\n\n**Templates**\n\n- `ToolbarContent` (optional) - Allows the user to define the Toolbar (above the editor control, or in-line when using the bubble theme, and a user highlights text in the editor).\n- `EditorContent` (optional) - Allows the user to define the initial content\n\n**Parameters**\n\n- `ReadOnly` (Optional - Default: `false`) - Determines if the editor will load in read-only mode. This mode can be toggled.\n- `Placeholder` (Optional - Default: `Compose an epic...`) - The text to show when editor is empty.\n- `Theme` (Optional - Default: `snow`) - Use `snow` to show the Toolbar on top of the editor, and `bubble` for inline editing.\n- `DebugLevel` (Optional - Default: `info`) - Determines the level of debug information returned to the web browser console window. Options are `error`, `warn`, `log`, or `info`.\n- `Syntax` (Optional - Default: `false`) - The Syntax Module enhances the Code Block format by automatically detecting and applying syntax highlighting.\n\n**Methods**\n\n- `GetText` - Gets the content of the editor as Text.\n- `GetHTML` - Gets the content of the editor as HTML.\n- `GetHTMLAsStream` - Gets the content of the editor as HTML stream (requires .NET 6.0 or later).\n- `GetContent` - Gets the content of the editor in the native Quill JSON Delta format.\n- `LoadContent` (`json`) - Allows the content of the editor to be programmatically set.\n- `LoadHTMLContent` (`string`) - Allows the content of the editor to be programmatically set.\n- `InsertImage` (`string`) - Inserts an image at the current point in the editor.\n- `InsertText` (`string`) - Inserts text at the current point in the editor.\n\n## Basic Example\n\n(see code in the [`Index.razor` page](https://github.com/Blazored/TextEditor/blob/main/samples/BlazorServerSide/Pages/Index.razor) in the repo for more examples)\n\n\u003cdetails\u003e\n\u003csummary\u003eCode\u003c/summary\u003e\n\n```cs\n@using Blazored.TextEditor\n\n\u003cBlazoredTextEditor @ref=\"@QuillHtml\"\u003e\n    \u003cToolbarContent\u003e\n        \u003cselect class=\"ql-header\"\u003e\n            \u003coption selected=\"\"\u003e\u003c/option\u003e\n            \u003coption value=\"1\"\u003e\u003c/option\u003e\n            \u003coption value=\"2\"\u003e\u003c/option\u003e\n            \u003coption value=\"3\"\u003e\u003c/option\u003e\n            \u003coption value=\"4\"\u003e\u003c/option\u003e\n            \u003coption value=\"5\"\u003e\u003c/option\u003e\n        \u003c/select\u003e\n        \u003cspan class=\"ql-formats\"\u003e\n            \u003cbutton class=\"ql-bold\"\u003e\u003c/button\u003e\n            \u003cbutton class=\"ql-italic\"\u003e\u003c/button\u003e\n            \u003cbutton class=\"ql-underline\"\u003e\u003c/button\u003e\n            \u003cbutton class=\"ql-strike\"\u003e\u003c/button\u003e\n        \u003c/span\u003e\n        \u003cspan class=\"ql-formats\"\u003e\n            \u003cselect class=\"ql-color\"\u003e\u003c/select\u003e\n            \u003cselect class=\"ql-background\"\u003e\u003c/select\u003e\n        \u003c/span\u003e\n        \u003cspan class=\"ql-formats\"\u003e\n            \u003cbutton class=\"ql-list\" value=\"ordered\"\u003e\u003c/button\u003e\n            \u003cbutton class=\"ql-list\" value=\"bullet\"\u003e\u003c/button\u003e\n        \u003c/span\u003e\n        \u003cspan class=\"ql-formats\"\u003e\n            \u003cbutton class=\"ql-link\"\u003e\u003c/button\u003e\n        \u003c/span\u003e\n    \u003c/ToolbarContent\u003e\n    \u003cEditorContent\u003e\n        \u003ch4\u003eThis Toolbar works with HTML\u003c/h4\u003e\n        \u003ca href=\"http://BlazorHelpWebsite.com\"\u003e\n        BlazorHelpWebsite.com\u003c/a\u003e\n    \u003c/EditorContent\u003e\n\u003c/BlazoredTextEditor\u003e\n\u003cbr /\u003e\n\u003cbutton class=\"btn btn-primary\" \n        @onclick=\"GetHTML\"\u003eGet HTML\u003c/button\u003e\n\u003cbutton class=\"btn btn-primary\"\n        @onclick=\"SetHTML\"\u003eSet HTML\u003c/button\u003e\n\u003cbr /\u003e\n\u003cdiv\u003e\n    \u003cbr /\u003e\n    @((MarkupString)QuillHTMLContent)\n    @QuillHTMLContent\n\u003c/div\u003e\n\u003cbr /\u003e\n\n@code {\n\nBlazoredTextEditor QuillHtml;\nstring QuillHTMLContent;\n\n    public async Task GetHTML()\n    {\n        QuillHTMLContent = await this.QuillHtml.GetHTML();\n    }\n\n    public async Task SetHTML()\n    {\n        string QuillContent =\n            @\"\u003ca href='http://BlazorHelpWebsite.com/'\u003e\" +\n            \"\u003cimg src='images/BlazorHelpWebsite.gif' /\u003e\u003c/a\u003e\";\n\n        await this.QuillHtml.LoadHTMLContent(QuillContent);\n    }\n}\n```\n\n\u003c/details\u003e\n\n### Alternative Using of the BlazoredTextEditor Component\n\nDepending on our use case, we may want to add some styling to the _Toolbar_ or _Editor_. We can also place the _Toolbar_ below the _Editor_ by setting the `BottomToolbar` property to `\"true\"` in the **BlazoredTextEditor** component:\n\n\u003cdetails\u003e\n\u003csummary\u003eCode\u003c/summary\u003e\n\n```csharp\n\u003cstyle\u003e\n    .rounded {\n        border-radius: 8px;\n    }\n    .colored-border {\n        border: 4px solid red !important;\n    }\n\u003c/style\u003e\n\n\u003ch1\u003eBlazored.TextEditor Usage Examples\u003c/h1\u003e\n\n\u003ch3\u003eBasic Example\u003c/h3\u003e\n\u003cBlazoredTextEditor\n    @ref=\"@richEditor\"\u003e\n    \u003cToolbarContent\u003e\n        @((MarkupString) toolbar)\n    \u003c/ToolbarContent\u003e\n    \u003cEditorContent\u003e\n        @((MarkupString) body)\n    \u003c/EditorContent\u003e\n\u003c/BlazoredTextEditor\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003ch3\u003eShow the Toolbar Below the Editor\u003c/h3\u003e\n\u003cBlazoredTextEditor\n    BottomToolbar=\"true\"\n    @ref=\"@richEditor\"\u003e\n    \u003cToolbarContent\u003e\n        @((MarkupString) toolbar)\n    \u003c/ToolbarContent\u003e\n    \u003cEditorContent\u003e\n        @((MarkupString) body)\n    \u003c/EditorContent\u003e\n\u003c/BlazoredTextEditor\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003ch3\u003eStyled Toolbar\u003c/h3\u003e\n\u003cBlazoredTextEditor\n    @ref=\"@richEditor\"\n    ToolbarCSSClass=\"rounded colored-border\"\n    ToolbarCssStyle=\"background: lightpink\"\u003e\n    \u003cToolbarContent\u003e\n        @((MarkupString) toolbar)\n    \u003c/ToolbarContent\u003e\n    \u003cEditorContent\u003e\n        @((MarkupString) body)\n    \u003c/EditorContent\u003e\n\u003c/BlazoredTextEditor\u003e\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n\u003ch3\u003eStyled Editor\u003c/h3\u003e\n\u003cBlazoredTextEditor\n    EditorCSSClass=\"rounded colored-border\"\n    EditorCssStyle=\"padding: 10px; background: lightpink\"\n    @ref=\"@richEditor\"\u003e\n    \u003cToolbarContent\u003e\n        @((MarkupString) toolbar)\n    \u003c/ToolbarContent\u003e\n    \u003cEditorContent\u003e\n        @((MarkupString) body)\n    \u003c/EditorContent\u003e\n\u003c/BlazoredTextEditor\u003e\n\n@code\n{\n    BlazoredTextEditor richEditor = default!;\n    string toolbar = \"\"\"\"...markup here...\"\"\"\";\n    string body = \"\"\"\"...markup here...\"\"\"\";\n\n    protected override void OnInitialized()\n    {\n        toolbar = \"\"\"\"\n            \u003cselect class=\"ql-header\"\u003e\n                \u003coption selected=\"\"\u003e\u003c/option\u003e\n                \u003coption value=\"1\"\u003e\u003c/option\u003e\n                \u003coption value=\"2\"\u003e\u003c/option\u003e\n                \u003coption value=\"3\"\u003e\u003c/option\u003e\n                \u003coption value=\"4\"\u003e\u003c/option\u003e\n                \u003coption value=\"5\"\u003e\u003c/option\u003e\n            \u003c/select\u003e\n            \u003cspan class=\"ql-formats\"\u003e\n                \u003cbutton class=\"ql-bold\"\u003e\u003c/button\u003e\n                \u003cbutton class=\"ql-italic\"\u003e\u003c/button\u003e\n                \u003cbutton class=\"ql-underline\"\u003e\u003c/button\u003e\n                \u003cbutton class=\"ql-strike\"\u003e\u003c/button\u003e\n            \u003c/span\u003e\n            \u003cspan class=\"ql-formats\"\u003e\n                \u003cselect class=\"ql-color\"\u003e\u003c/select\u003e\n                \u003cselect class=\"ql-background\"\u003e\u003c/select\u003e\n            \u003c/span\u003e\n            \u003cspan class=\"ql-formats\"\u003e\n                \u003cbutton class=\"ql-list\" value=\"ordered\"\u003e\u003c/button\u003e\n                \u003cbutton class=\"ql-list\" value=\"bullet\"\u003e\u003c/button\u003e\n            \u003c/span\u003e\n            \u003cspan class=\"ql-formats\"\u003e\n                \u003cbutton class=\"ql-link\"\u003e\u003c/button\u003e\n            \u003c/span\u003e\n            \"\"\"\";\n\n        body = \"\"\"\"\n            \u003ch4\u003eThis Toolbar works with HTML\u003c/h4\u003e\n            \u003ca href=\"https://BlazorHelpWebsite.com\"\u003eBlazorHelpWebsite.com\u003c/a\u003e\n            \"\"\"\";\n    }\n}\n```\n\n\u003c/details\u003e\n\n## Screenshots\n\n![examples_screenshot.png](samples%2FTextEditorDemo%2Fwwwroot%2Fexamples_screenshot.png)\n\n### Rich Text Screenshot\n\n![Delta Example](docs/images/DeltaExample.png \"Delta Example\")\n\n### Read Only Screenshot\n\n![Inline Editing Example](docs/images/InlineEditingExample.png \"Inline Editing Example\")\n\n## Adding Syntax Highlighting\n\nSee [Syntax Highlighter Example](docs/SyntaxHighlighterExample.md) docs for more information.\n\n![Syntax Highlighter Example](docs/images/SyntaxHighlighterExample.png \"Syntax Highlighter Example\")\n\n---\n\n# Blazored TextEditor Forks\n\n* [WYSIWYGTextEditor](https://github.com/somegenericdev/WYSIWYGTextEditor)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazored%2Ftexteditor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblazored%2Ftexteditor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblazored%2Ftexteditor/lists"}