Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blazored/texteditor
Rich text editor for Blazor applications - Uses Quill JS
https://github.com/blazored/texteditor
blazor blazor-applications blazor-client blazor-server blazored csharp quilljs rich-text-editor rich-text-html-editor richeditor
Last synced: 3 days ago
JSON representation
Rich text editor for Blazor applications - Uses Quill JS
- Host: GitHub
- URL: https://github.com/blazored/texteditor
- Owner: Blazored
- License: mit
- Created: 2019-11-24T16:02:18.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2025-01-03T20:28:52.000Z (26 days ago)
- Last Synced: 2025-01-20T15:13:45.404Z (10 days ago)
- Topics: blazor, blazor-applications, blazor-client, blazor-server, blazored, csharp, quilljs, rich-text-editor, rich-text-html-editor, richeditor
- Language: HTML
- Homepage: https://blazored.github.io/TextEditor/
- Size: 8.6 MB
- Stars: 284
- Watchers: 8
- Forks: 61
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blazored TextEditor
[](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) [](https://learn.microsoft.com/en-us/dotnet/csharp/)
[](https://github.com/Blazored/TextEditor/actions/workflows/ci-main.yml)
[](https://github.com/Blazored/TextEditor/actions/workflows/pages/pages-build-deployment)
[](https://github.com/Blazored/TextEditor/actions/workflows/ci-pr.yml)
[](https://github.com/Blazored/TextEditor/actions/workflows/codeql-analysis.yml)
[](https://github.com/Blazored/TextEditor/actions/workflows/release-drafter.yml)
> Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com")
## Sample Applications
The [TextEditorDemo](samples/TextEditorDemo) has deployed via GitHub Pages:
- https://blazored.github.io/TextEditor/
You can also see it in action with:
* [Simple blogging application written in Microsoft Server Side Blazor](https://github.com/ADefWebserver/Blazor-Blogs "Blazor Blogs") - [Contains an example of uploading images]
## Helpful Articles
* [Creating Reusable Custom Blazor Controls](https://blazorhelpwebsite.com/ViewBlogPost/11 "BlazorHelpWebsite.com")
* [Creating A Rich Text Editor In Blazor Using Quill](https://blazorhelpwebsite.com/ViewBlogPost/12 "BlazorHelpWebsite.com")
## Installing
[](https://www.nuget.org/packages/Blazored.TextEditor/)
[](https://www.nuget.org/packages/Blazored.TextEditor/)
You can install from NuGet using the following command:
`Install-Package Blazored.TextEditor`
Or via the Visual Studio package manger.
## Setup
Blazor 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).
In the `head` tag add the following CSS.
```html
```
Then add the JS script at the bottom of the page using the following script tag.
```html
```
**NOTE** If you're using Blazor WebAssembly then these need to be added to your `wwwroot\index.html`.
You can add the following using statement to your main `_Imports.razor` to make referencing the component a bit easier.
```cs
@using Blazored.TextEditor
```
## Usage
Below is a list of all the options available on the Text Editor.
**Templates**
- `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).
- `EditorContent` (optional) - Allows the user to define the initial content
**Parameters**
- `ReadOnly` (Optional - Default: `false`) - Determines if the editor will load in read-only mode. This mode can be toggled.
- `Placeholder` (Optional - Default: `Compose an epic...`) - The text to show when editor is empty.
- `Theme` (Optional - Default: `snow`) - Use `snow` to show the Toolbar on top of the editor, and `bubble` for inline editing.
- `DebugLevel` (Optional - Default: `info`) - Determines the level of debug information returned to the web browser console window. Options are `error`, `warn`, `log`, or `info`.
- `Syntax` (Optional - Default: `false`) - The Syntax Module enhances the Code Block format by automatically detecting and applying syntax highlighting.
**Methods**
- `GetText` - Gets the content of the editor as Text.
- `GetHTML` - Gets the content of the editor as HTML.
- `GetHTMLAsStream` - Gets the content of the editor as HTML stream (requires .NET 6.0 or later).
- `GetContent` - Gets the content of the editor in the native Quill JSON Delta format.
- `LoadContent` (`json`) - Allows the content of the editor to be programmatically set.
- `LoadHTMLContent` (`string`) - Allows the content of the editor to be programmatically set.
- `InsertImage` (`string`) - Inserts an image at the current point in the editor.
- `InsertText` (`string`) - Inserts text at the current point in the editor.
## Basic Example
(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)
Code
```cs
@using Blazored.TextEditor
This Toolbar works with HTML
BlazorHelpWebsite.com
Get HTML
Set HTML
@((MarkupString)QuillHTMLContent)
@QuillHTMLContent
@code {
BlazoredTextEditor QuillHtml;
string QuillHTMLContent;
public async Task GetHTML()
{
QuillHTMLContent = await this.QuillHtml.GetHTML();
}
public async Task SetHTML()
{
string QuillContent =
@"" +
"
";
await this.QuillHtml.LoadHTMLContent(QuillContent);
}
}
```
### Alternative Using of the BlazoredTextEditor Component
Depending 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:
Code
```csharp
.rounded {
border-radius: 8px;
}
.colored-border {
border: 4px solid red !important;
}
Blazored.TextEditor Usage Examples
Basic Example
@((MarkupString) toolbar)
@((MarkupString) body)
Show the Toolbar Below the Editor
@((MarkupString) toolbar)
@((MarkupString) body)
Styled Toolbar
@((MarkupString) toolbar)
@((MarkupString) body)
Styled Editor
@((MarkupString) toolbar)
@((MarkupString) body)
@code
{
BlazoredTextEditor richEditor = default!;
string toolbar = """"...markup here..."""";
string body = """"...markup here..."""";
protected override void OnInitialized()
{
toolbar = """"
"""";
body = """"
This Toolbar works with HTML
BlazorHelpWebsite.com
"""";
}
}
```
## Screenshots
### Rich Text Screenshot
### Read Only Screenshot
## Adding Syntax Highlighting
See [Syntax Highlighter Example](docs/SyntaxHighlighterExample.md) docs for more information.
---
# Blazored TextEditor Forks
* [WYSIWYGTextEditor](https://github.com/somegenericdev/WYSIWYGTextEditor)