SimpleTextEditor.Radzen 1.0.0

SimpleTextEditor

Generyczny, konfigurowalny edytor Markdown dla aplikacji Blazor. Dystrybuowany jako pakiet NuGet ze wsparciem dla komponentów UI Radzen.

📖 Pełna dokumentacja — szczegółowy opis interfejsów, przykłady implementacji handlerów obrazów, lokalizacji, motywów i więcej.

Funkcje

• 📝 Pełne wsparcie Markdown (nagłówki, pogrubienie, kursywa, listy, tabele, obrazy, bloki kodu)
• 🎨 Konfigurowalne motywy (jasny/ciemny)
• 🌍 Wbudowana lokalizacja (EN, PL)
• 🔧 Rozszerzalni dostawcy ikon (Google Material Icons domyślnie)
• 👁️ Podgląd na żywo (obok siebie lub tryb przełączania)
• ⚡ Łatwa integracja z dowolną bazą danych (zwraca czyste ciągi Markdown/HTML)

Instalacja

dotnet add package SimpleTextEditor.Radzen

Szybki start

1. Zarejestruj usługi w Program.cs

using SimpleTextEditor.Radzen;

builder.Services.AddRadzenMarkdownEditor();

2. Dodaj do _Imports.razor

@using SimpleTextEditor.Radzen.Components

3. Użyj komponentu

<RadzenMarkdownEditor 
    @bind-Value="@_content"
    PreviewMode="PreviewMode.SideBySide" />

@code {
    private string _content = "";
}

Konfiguracja

Niestandardowe ikony

public class MyIconProvider : IIconProvider
{
    public string GetIcon(string name) => name switch
    {
        "bold" => "bi-type-bold",
        "italic" => "bi-type-italic",
        _ => $"bi-{name}"
    };
}

builder.Services.AddRadzenMarkdownEditor(options =>
{
    options.IconProvider = new MyIconProvider();
});

Zmienne CSS

Nadpisz te niestandardowe właściwości CSS w arkuszu stylów swojej aplikacji:

:root {
    --ste-toolbar-bg: #1a1a2e;
    --ste-toolbar-button-color: #ffffff;
    --ste-editor-font-family: 'Fira Code', monospace;
    --ste-editor-font-size: 14px;
    --ste-preview-bg: #f5f5f5;
}

Niestandardowy pasek narzędzi

builder.Services.AddRadzenMarkdownEditor(options =>
{
    options.ToolbarItems = new[]
    {
        ToolbarItems.Bold,
        ToolbarItems.Italic,
        ToolbarItems.Separator,
        ToolbarItems.Heading1,
        ToolbarItems.BulletList
    };
});

Lokalizacja

builder.Services.AddRadzenMarkdownEditor(options =>
{
    options.Language = "pl";
    // Lub podaj niestandardowe tłumaczenia:
    options.CustomTranslations = new Dictionary<string, string>
    {
        ["bold"] = "Pogrubienie",
        ["italic"] = "Kursywa"
    };
});

Licencja

Licencja MIT — zobacz plik LICENSE.

Autor: Maurycy Bartczak