{"id":37035784,"url":"https://github.com/ling921/tui.editor.blazor","last_synced_at":"2026-01-14T04:14:11.455Z","repository":{"id":179409984,"uuid":"663434461","full_name":"ling921/tui.editor.blazor","owner":"ling921","description":"A Blazor component that provides a Markdown editor based on the ToastUI Editor library.","archived":false,"fork":false,"pushed_at":"2024-12-11T09:56:03.000Z","size":579,"stargazers_count":3,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-16T17:14:51.923Z","etag":null,"topics":["blazor","editor","tuieditor","webassembly"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ling921.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}},"created_at":"2023-07-07T09:29:38.000Z","updated_at":"2024-11-17T11:55:36.000Z","dependencies_parsed_at":"2023-12-12T12:26:18.502Z","dependency_job_id":"304045ab-1233-4255-ad64-e8c73ad9fc46","html_url":"https://github.com/ling921/tui.editor.blazor","commit_stats":null,"previous_names":["ling921/tui.editor.blazor"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/ling921/tui.editor.blazor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ling921%2Ftui.editor.blazor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ling921%2Ftui.editor.blazor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ling921%2Ftui.editor.blazor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ling921%2Ftui.editor.blazor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ling921","download_url":"https://codeload.github.com/ling921/tui.editor.blazor/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ling921%2Ftui.editor.blazor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28409225,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-14T01:52:23.358Z","status":"online","status_checked_at":"2026-01-14T02:00:06.678Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","editor","tuieditor","webassembly"],"created_at":"2026-01-14T04:14:10.929Z","updated_at":"2026-01-14T04:14:11.447Z","avatar_url":"https://github.com/ling921.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ToastUI Editor Blazor [![NuGet](https://img.shields.io/nuget/v/ToastUIEditor.svg)](https://www.nuget.org/packages/ToastUIEditor/)\n\n`tui.editor.blazor` is a Blazor component that provides a Markdown editor based on the [tui.editor](https://github.com/nhn/tui.editor) library.\n\n\n## Installation\n\nInstall the package using following command:\n\n``` Package Manager\nInstall-Package ToastUIEditor\n```\n\nor\n\n``` powershell\ndotnet add package ToastUIEditor\n```\n\nor just use nuget package manager.\n\n\n## Usage\n\n1. Add the following import statement to your `_Imports.razor` file\n\n``` razor\n@using ToastUI\n```\n\n\n2. Use the `Editor` component in your Blazor page or component\n\n``` razor\n\u003cEditor @bind-Value=\"content\" Options=\"@options\" /\u003e\n```\n\n- `@bind-Value`: Binds the editor's content to a string property in your Blazor component.\n- `Options`: Sets the configuration options for the editor. Refer to the `EditorOptions` class for available options.\n\n\n3. Use the `Viewer` component in your Blazor page or component\n\n``` razor\n\u003cViewer Value=\"@content\" /\u003e\n```\n\n- `Value`: Sets the content to be displayed in the viewer. It will update automatically when `content` changes.\n\n\n4. Handle the available events by specifying event callbacks\n\n``` razor\n\u003cEditor @bind-Value=\"content\"\n        Load=\"HandleLoad\"\n        Change=\"HandleChange\"\n        CaretChange=\"HandleCaretChange\"\n        Focus=\"HandleFocus\"\n        Blur=\"HandleBlur\"\n        KeyDown=\"HandleKeyDown\"\n        KeyUp=\"HandleKeyUp\"\n        BeforePreviewRender=\"HandleBeforePreviewRender\"\n        BeforeConvertWYSIWYGToMarkdown=\"HandleBeforeConvertWYSIWYGToMarkdown\" /\u003e\n\n\u003cViewer Value=\"content\"\n        Load=\"HandleLoad\"\n        UpdatePreview=\"HandleUpdatePreview\" /\u003e\n```\n\nThese events are the same as the native public events, and the parameters are detailed in the code comments.\n\n\n5. Access the `Editor` or `Viewer` instance to invoke methods\n\n``` razor\n\u003cEditor @ref=\"editorRef\" @bind-Value=\"markdown\" Options=\"@options\" /\u003e\n\n\u003cViewer @ref=\"viewerRef\" Value=\"markdown\" /\u003e\n\n\u003cbutton @onclick=\"HandlePreview\"\u003ePreview\u003c/button\u003e\n\n\u003cViewer @ref=\"viewerRef2\"/\u003e\n\n@code {\n    Editor editorRef = default!;\n    Viewer viewerRef = default!;\n    Viewer viewerRef2 = default!;\n    string markdown = string.Empty;\n    \n    async Task HandlePreview()\n    {\n        var markdown = await editorRef.GetMarkdown();\n        await viewerRef2.SetMarkdown(markdown);\n    }\n}\n```\n\nMost of all native methods have been implemented. Refer to the Editor class for available methods.\n\n\n6. Add custom language\n\n- Use `Editor.SetLanguage` static method to add custom language.\n- Use `Editor.SetDefaultLanguage` static method to set default language, it will be used when no language is set in `EditorOptions`.\n\n\u003e Note: Please make sure Editor.SetLanguage and Editor.SetDefaultLanguage are called before `Editor` component is rendered.\n\n\n7. Widget rules\n\nDue to `BlazorServer` mode not supporting JavaScript call .NET method synchronously, the widget rules only support in `BlazorWebAssembly` mode.\n\n\n## Implemented Features\n\n- [x] `Editor` and `Viewer` basic usage\n- [x] `Editor` and `Viewer` events\n- [x] Language setting and custom language\n- [x] `Editor` and `Viewer` instance methods\n- [ ] Toolbar with custom button\n- [ ] Add command and execute command\n- [x] Add widget and set widget rules (only support in `BlazorWebAssembly` mode)\n- [x] Link attributes\n- [ ] Custom markdown renderer\n- [ ] Custom HTML renderer\n- [ ] Custom HTML Sanitizer\n\n\n## License\n\nThis software is licensed under the [MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fling921%2Ftui.editor.blazor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fling921%2Ftui.editor.blazor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fling921%2Ftui.editor.blazor/lists"}