https://github.com/ling921/tui.editor.blazor
A Blazor component that provides a Markdown editor based on the ToastUI Editor library.
https://github.com/ling921/tui.editor.blazor
blazor editor tuieditor webassembly
Last synced: 6 months ago
JSON representation
A Blazor component that provides a Markdown editor based on the ToastUI Editor library.
- Host: GitHub
- URL: https://github.com/ling921/tui.editor.blazor
- Owner: ling921
- License: mit
- Created: 2023-07-07T09:29:38.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2024-12-11T09:56:03.000Z (over 1 year ago)
- Last Synced: 2025-08-16T17:14:51.923Z (11 months ago)
- Topics: blazor, editor, tuieditor, webassembly
- Language: JavaScript
- Homepage:
- Size: 565 KB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ToastUI Editor Blazor [](https://www.nuget.org/packages/ToastUIEditor/)
`tui.editor.blazor` is a Blazor component that provides a Markdown editor based on the [tui.editor](https://github.com/nhn/tui.editor) library.
## Installation
Install the package using following command:
``` Package Manager
Install-Package ToastUIEditor
```
or
``` powershell
dotnet add package ToastUIEditor
```
or just use nuget package manager.
## Usage
1. Add the following import statement to your `_Imports.razor` file
``` razor
@using ToastUI
```
2. Use the `Editor` component in your Blazor page or component
``` razor
```
- `@bind-Value`: Binds the editor's content to a string property in your Blazor component.
- `Options`: Sets the configuration options for the editor. Refer to the `EditorOptions` class for available options.
3. Use the `Viewer` component in your Blazor page or component
``` razor
```
- `Value`: Sets the content to be displayed in the viewer. It will update automatically when `content` changes.
4. Handle the available events by specifying event callbacks
``` razor
```
These events are the same as the native public events, and the parameters are detailed in the code comments.
5. Access the `Editor` or `Viewer` instance to invoke methods
``` razor
Preview
@code {
Editor editorRef = default!;
Viewer viewerRef = default!;
Viewer viewerRef2 = default!;
string markdown = string.Empty;
async Task HandlePreview()
{
var markdown = await editorRef.GetMarkdown();
await viewerRef2.SetMarkdown(markdown);
}
}
```
Most of all native methods have been implemented. Refer to the Editor class for available methods.
6. Add custom language
- Use `Editor.SetLanguage` static method to add custom language.
- Use `Editor.SetDefaultLanguage` static method to set default language, it will be used when no language is set in `EditorOptions`.
> Note: Please make sure Editor.SetLanguage and Editor.SetDefaultLanguage are called before `Editor` component is rendered.
7. Widget rules
Due to `BlazorServer` mode not supporting JavaScript call .NET method synchronously, the widget rules only support in `BlazorWebAssembly` mode.
## Implemented Features
- [x] `Editor` and `Viewer` basic usage
- [x] `Editor` and `Viewer` events
- [x] Language setting and custom language
- [x] `Editor` and `Viewer` instance methods
- [ ] Toolbar with custom button
- [ ] Add command and execute command
- [x] Add widget and set widget rules (only support in `BlazorWebAssembly` mode)
- [x] Link attributes
- [ ] Custom markdown renderer
- [ ] Custom HTML renderer
- [ ] Custom HTML Sanitizer
## License
This software is licensed under the [MIT License](LICENSE)