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: 6 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: 2023-10-21T03:11:08.000Z (about 1 year ago)
- Last Synced: 2024-12-23T11:17:33.695Z (6 days ago)
- Topics: blazor, blazor-applications, blazor-client, blazor-server, blazored, csharp, quilljs, rich-text-editor, rich-text-html-editor, richeditor
- Language: HTML
- Homepage:
- Size: 610 KB
- Stars: 278
- Watchers: 10
- Forks: 62
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blazored TextEditor
Rich Text Editor for Blazor applications - Uses [Quill JS](https://quilljs.com/ "Quill JS.com")
### Sample Applications
* [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
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`.
**Methods**
- `GetText` - Gets the content of the editor as Text.
- `GetHTML` - Gets the content of the editor as HTML.
- `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)
```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 void GetHTML()
{
QuillHTMLContent = await this.QuillHtml.GetHTML();
StateHasChanged();
}
public async void SetHTML()
{
string QuillContent =
@"" +
"
";
await this.QuillHtml.LoadHTMLContent(QuillContent);
StateHasChanged();
}
}
```
### 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:
```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
"""";
}
}
```
### Rich Text Screenshot
### Read Only Screenshot
# Blazored TextEditor Forks
* [WYSIWYGTextEditor](https://github.com/somegenericdev/WYSIWYGTextEditor)