MudExRichTextEditor - GitLite

KO | EN

gitlite — search

#python #typescript #llm #android #rust #deep-learning #java #awesome #kubernetes #vue #security #ios #openai #open-source

MudExRichTextEditor

(★ 133)

Quill based RichEditor component for MudBlazor

파일 탐색기

최종 버전 다운로드 (.zip)

- - master_mudexrichtexteditorexample.yml
- - EditorBasic.razor
  - EditorCustom.razor
  - EditorFull.razor
  - EditorMinimal.razor
  - EditorPresets.razor
  - EditorStandard.razor
  - Empty.razor
  - ExpansionPanelTest.razor
  - Index.razor
  - Test.razor
- - launchSettings.json
- - MainLayout.razor
  - MainLayout.razor.css
  - NavMenu.razor
  - NavMenu.razor.css
  - SurveyPrompt.razor
- - favicon.ico
  - index.html
- _Imports.razor
- App.razor
- MudExRichTextEditorExample.csproj
- Program.cs
- - IMention.cs
  - IMudExRichTextEditPlugin.cs
  - IQuillModule.cs
  - QuillBetterTableModule.cs
  - QuillBlotFormatterModule.cs
  - QuillImageCompressorModule.cs
  - QuillMentionModule.cs
  - QuillModule.cs
  - QuillModules.cs
  - QuillTableBetterModule.cs
- - DefaultToolHandler.cs
  - GetHtmlBehavior.cs
  - QuillDebugLevel.cs
  - QuillPresets.cs
  - QuillTheme.cs
  - Tool.cs
- _Imports.razor
- bundleconfig.json
- libman.json
- MudExRichTextEdit.razor
- MudExRichTextEdit.razor.cs
- MudExRichTextEditor.csproj
- QuillToolButton.razor
- - _Imports.razor
  - App.razor
  - Routes.razor
- - launchSettings.json
- - app.css
  - favicon.png
- appsettings.Development.json
- appsettings.json
- Program.cs
- ServerSideExampleDemo.csproj
.gitattributes
.gitignore
FUNDING.yml
LICENSE
MudExRichTextEditor.sln
README.md
screen_re.png

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# MudExRichTextEditor

[NUGET PACKAGE](https://www.nuget.org/packages/MudExRichTextEditor/) | [LIVE DEMO](https://mudexrichtexteditorexample.azurewebsites.net/)

MudExRichTextEditor is a custom reusable control that allows us to easily consume Quill combining in a MudBlazor project 
Features with MudBlazor Theme Support. This compnent also works without a MudBlazor Project:

- Exports editor contents in Text, HTML, and Quill’s native Delta format
- Allows value binding
- Provides a read only mode, suitable for displaying Quill’s native Delta format
- Allows custom toolbars to be defined
- Allows custom themes
- Has an inline editor mode that also allows custom toolbars

## What is Quill?
Quill is a free, [open source](https://github.com/quilljs/quill/) WYSIWYG editor built for the modern web. With its [modular architecture](https://quilljs.com/docs/modules/) and expressive [API](https://quilljs.com/docs/api/), it is completely customizable to fit any need.

![image](https://raw.githubusercontent.com/fgilde/MudExRichTextEditor/master/screen_re.png)

## Features

### Image Resizing
Images inserted in the editor (including from attachments) can be resized directly by clicking on them. Resize handles will appear at the corners, allowing you to drag and adjust the image size. This feature is enabled by default in the **Standard** and **Full** presets via the `QuillBlotFormatterModule`.

To enable image resizing in custom configurations, include the `QuillBlotFormatterModule`:

```c#
@using MudExRichTextEditor.Extensibility

<MudExRichTextEdit Modules="@_modules" />

@code {
    private IQuillModule[] _modules = [
        new QuillBlotFormatterModule(),
        // other modules...
    ];
}
```

## How to use

1. Install the NuGet package [MudExRichTextEditor](https://www.nuget.org/packages/MudExRichTextEditor/)

Add the following line to your _Imports.razor file

```c#
@using MudExRichTextEditor
```

And this is enough now you can simply use the component in your pages

```c#
@page "/"

<MudCheckBox Label="Read only" @bind-Checked="_readOnly" />

<MudExRichTextEdit @ref="@Editor"
                   ReadOnly="@_readOnly"
                   Height="444"
                   Class="m-2"
                   Placeholder="Edit html">
			 
</MudExRichTextEdit>

@code {	
    bool _readOnly = false;
	MudExRichTextEdit Editor;	
}
```