https://github.com/drualcman/blazorbasics.richtexteditor
A simple Rich Text Editor for Blazor Server or Blazor WebAssembly applications.
https://github.com/drualcman/blazorbasics.richtexteditor
blazor blazor-server blazor-webassembly rich-text-editor
Last synced: 8 months ago
JSON representation
A simple Rich Text Editor for Blazor Server or Blazor WebAssembly applications.
- Host: GitHub
- URL: https://github.com/drualcman/blazorbasics.richtexteditor
- Owner: drualcman
- License: mit
- Created: 2023-07-01T02:45:25.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2025-10-22T02:57:36.000Z (8 months ago)
- Last Synced: 2025-10-22T04:34:27.752Z (8 months ago)
- Topics: blazor, blazor-server, blazor-webassembly, rich-text-editor
- Language: JavaScript
- Homepage:
- Size: 122 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
[](https://www.nuget.org/packages/BlazorBasics.RichTextEditor)
[](https://www.nuget.org/packages/BlazorBasics.RichTextEditor)
# Description
A simple Rich Text Editor for Blazor Server or Blazor WebAssembly applications. This rich text editor is based in [Quill](https://quilljs.com/) JavaScript.
# How to use
Nugget installation
```PM> Install-Package BlazorBasics.RichTextEditor```
Or clone the [repository](https://github.com/drualcman/BlazorBasics.RichTextEditor) and add the project to your solution.
Add the component where you want to show rich text editor like this example:
``` RAZOR
@code{
MarkupString HtmlMarkupString =
new MarkupString("
A long time ago in a galaxi far, far away...
");
void SaveHtml(string html){
//process your data
}
}
```
## Options
* Show/Hide Save button into the menu
* Disable paste images if you don't like to allow base64 image insert into the document
* Show/Hide Images button to allow or not user can insert images
* You can use your API to upload images
*
## Upload Images to the API
You will receive a object from the editor like
``` CSHARP
public class FileUpload
{
public string FileName { get; set; }
public byte[] FileBytes { get; set; }
public FileUpload(string fileName, byte[] fileBytes)
{
FileName = fileName;
FileBytes = fileBytes;
}
}
```
Then need a Task to return a string with the URL about where is located the image. If don't return a url and return string.Empty editor add the image into de document like a image/base64 but you also can manage the image, to register in a database for example.
``` RAZOR
@code{
MarkupString HtmlMarkupString =
new MarkupString("
A long time ago in a galaxi far, far away...
");
void SaveHtml(string html){
//process your data
}
async Task UploadFile(FileUpload file)
{
string url = await YourApiToUploadFiles.SaveFile(file);
return url;
}
}
```
## Disable upload and paste images
``` RAZOR
@code{
MarkupString HtmlMarkupString =
new MarkupString("
A long time ago in a galaxi far, far away...
");
void SaveHtml(string html){
//process your data
}
}
```
## If you want to use a external save button
If you want to use external save button it's much better use the property HideSaveButton=true to avoid user can see 2 save buttons, into the editor and outside the editor
``` RAZOR
Save
@code{
RichTextEditorComponent Editor;
MarkupString HtmlMarkupString =
new MarkupString("
A long time ago in a galaxi far, far away...
");
string Html;
void SaveHtml(string html){
Html = html;
}
async Task Save(){
await Editor.GetContent();
//process your data
}
}
```