LgHtmlEditor

LgHtmlEditor est un champ de saisie HTML basé sur Jodit. Il hérite de LgInputBase<string> : il prend donc en charge la liaison @bind-Value, la validation dans un LgEditForm, les policies, le mode lecture seule, le bouton de réinitialisation, les bulles d'aide et les attributs ARIA.

<LgHtmlEditor Label="Contenu"
              Height="200px"
              @bind-Value="Model.HtmlTextContent" />

Espace de noms : Lagoon.UI.Components
Hérite de : LgInputBase<string> → LgAriaComponentBase → LgComponentBase
Interfaces : ILgComponentPolicies, IInputBusy, ILgFocusableComponent
Package NuGet : Lagoon.UI

Éditeur riche et champ de formulaire

Comme les autres composants dérivés de LgInputBase<TValue>, LgHtmlEditor doit être lié avec Value, ValueChanged ou @bind-Value. Dans un LgEditForm, ValueExpression est fourni automatiquement par @bind-Value et permet la validation du champ.

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Dans un formulaire

LgHtmlEditor est un champ LgInputBase<string> : utilisez @bind-Value dans un LgEditForm pour bénéficier de la validation, du suivi de valeur et des états Disabled / ReadOnly.

ArticleEditPage.razor
@inherits LgPage

<LgEditForm Model="_vm" OnValidSubmit="SaveAsync">
    <LgHtmlEditor CssClass="col-12"
                  Label="#ArticleContent"
                  Placeholder="#ArticleContentPlaceholder"
                  Height="240px"
                  MinHeight="200"
                  AllowResizeX="true"
                  AllowResizeY="true"
                  Required="true"
                  @bind-Value="_vm.HtmlTextContent" />

    <LgButton Text="#Save" IconName="@IconNames.Save" Kind="ButtonKind.Primary" IsSubmit="true" />
</LgEditForm>

ArticleEditPage.razor.cs
public partial class ArticleEditPage : LgPage
{
    // Modèle édité par le formulaire ; le contenu HTML est mis à jour par @bind-Value.
    private ArticleVm _vm = new();

    // Sauvegarde le contenu HTML validé par le LgEditForm.
    private Task SaveAsync(EditContext editContext)
    {
        ShowSuccess("#ArticleSaved");
        return Task.CompletedTask;
    }

    private sealed class ArticleVm
    {
        public string HtmlTextContent { get; set; } = string.Empty;
    }
}

Configurer la barre d'outils Jodit

Buttons limite les actions visibles dans la barre Jodit. FontSizeList, FontFamilyList et DefaultFontSizePoints personnalisent les listes de typographie. L'assistant IA de Jodit (boutons « AI Commands » et « AI Assistant ») est désactivé par Lagoon.

ArticleEditPage.razor
@inherits LgPage

<LgHtmlEditor Label="#ArticleContent"
              Height="220px"
              Buttons="_editorButtons"
              FontSizeList="_fontSizes"
              FontFamilyList="_fontFamilies"
              DefaultFontSizePoints="pt"
              @bind-Value="_vm.HtmlTextContent" />

ArticleEditPage.razor.cs
public partial class ArticleEditPage : LgPage
{
    // Boutons affichés dans la toolbar Jodit pour simplifier l'éditeur sur cette page.
    private readonly List<string> _editorButtons = new()
    {
        "bold",
        "italic",
        "underline",
        "ul",
        "ol",
        "link",
        "source"
    };

    // Tailles proposées dans la liste de polices afin de limiter les valeurs autorisées par le projet.
    private readonly string[] _fontSizes = new[] { "10", "12", "14", "18", "24" };

    // Polices disponibles dans l'éditeur ; la clé est la valeur CSS, la valeur est le libellé affiché.
    private readonly Dictionary<string, string> _fontFamilies = new()
    {
        { "Arial,Helvetica,sans-serif", "Arial" },
        { "Georgia,serif", "Georgia" },
        { "Verdana,Geneva,sans-serif", "Verdana" }
    };
}

Adapter le mode d'édition

Inline, Toolbar, TextIcons, Spellcheck, Language et Style sont transmis à Jodit lors de l'initialisation.

ArticleEditPage.razor
@inherits LgPage

<LgHtmlEditor Label="#InlineContent"
              Inline="true"
              Toolbar="false"
              TextIcons="true"
              Spellcheck="false"
              Language="fr"
              Style="_editorStyle"
              @bind-Value="_vm.HtmlTextContent" />

ArticleEditPage.razor.cs
public partial class ArticleEditPage : LgPage
{
    // Styles appliqués au conteneur Jodit, utiles pour adapter l'éditeur à une zone compacte.
    private readonly Dictionary<string, string> _editorStyle = new()
    {
        { "max-width", "640px" },
        { "border", "1px solid var(--secondary)" }
    };
}

Intercepter la saisie, le changement et le collage

OnInput est appelé pendant la saisie, OnChange après validation de la valeur (souvent à la perte de focus) et OnPasteAsync avant insertion du contenu collé ou déposé par glisser-déposer depuis l'extérieur de l'éditeur.

ArticleEditPage.razor
@inherits LgPage

<LgHtmlEditor Label="#ArticleContent"
              @bind-Value="_vm.HtmlTextContent"
              OnInput="OnInputAsync"
              OnChange="OnChangeAsync"
              OnPasteAsync="OnPasteAsync"
              AskBeforePasteFromWord="true"
              AskBeforePasteHTML="true"
              ShowInsertAsHtml="true" />

ArticleEditPage.razor.cs
public partial class ArticleEditPage : LgPage
{
    // Met à jour un aperçu ou un compteur pendant la saisie, sans attendre la perte de focus.
    private Task OnInputAsync(ChangeEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Réagit après validation de la valeur par Jodit, par exemple pour déclencher une sauvegarde différée.
    private Task OnChangeAsync(ChangeEventArgs args)
    {
        return Task.CompletedTask;
    }

    // Nettoie le contenu collé avant insertion dans l'éditeur pour éviter les balises non souhaitées.
    private Task OnPasteAsync(HtmlEditorPasteEventArgs args)
    {
        args.Text = StripHtml(args.GetContent());
        args.UseHtml = false;
        args.AskBeforePasteHTML = false;
        return Task.CompletedTask;
    }

    // Supprime les balises HTML lorsque la page impose un collage en texte brut.
    private static string StripHtml(string content)
    {
        return Regex.Replace(content ?? string.Empty, "<.*?>", string.Empty);
    }
}

Annuler une modification avant affectation

OnChangingAsync est appelé par la base d'input avant l'application d'une nouvelle valeur. Positionnez Cancel = true pour refuser le changement.

ArticleEditPage.razor
@inherits LgPage

<LgHtmlEditor Label="#ArticleContent"
              ConfirmationMessage="#ConfirmHtmlChange"
              OnChangingAsync="OnChangingAsync"
              @bind-Value="_vm.HtmlTextContent" />

ArticleEditPage.razor.cs
public partial class ArticleEditPage : LgPage
{
    // Bloque une valeur contenant un script afin de laisser le contenu précédent dans l'éditeur.
    private Task OnChangingAsync(ChangingEventArgs<string> args)
    {
        if (args.NewValue?.Contains("<script", StringComparison.OrdinalIgnoreCase) == true)
        {
            args.Cancel = true;
            ShowError("#HtmlContentRejected");
        }
        return Task.CompletedTask;
    }
}

Afficher le contenu en lecture seule

Lorsque ReadOnly="true", le composant ne charge pas Jodit et rend le HTML dans un affichage lecture seule.

ArticleDetailsPage.razor
@inherits LgPage

<LgHtmlEditor Label="#ArticleContent"
              ReadOnly="true"
              @bind-Value="_vm.HtmlTextContent" />

Assainir le contenu côté serveur

Jodit nettoie le HTML dans le navigateur, mais ce nettoyage peut être contourné (appel direct à l'API, faille de l'éditeur). Avant d'afficher à d'autres utilisateurs un contenu saisi avec LgHtmlEditor (y compris en lecture seule, qui rend le HTML tel quel), assainissez-le côté serveur avec le service LgHtmlSanitizer, par exemple à l'enregistrement.

ArticleEditPage.razor
@inherits LgPage

<LgEditForm Model="_vm" OnValidSubmit="SaveAsync">
    <LgHtmlEditor Label="#ArticleContent" @bind-Value="_vm.HtmlTextContent" />
    <LgButton Text="#Save" IconName="@IconNames.Save" Kind="ButtonKind.Primary" IsSubmit="true" />
</LgEditForm>

ArticleController.cs (projet Server)
public class ArticleController : LgControllerBase
{
    private readonly LgHtmlSanitizer _htmlSanitizer;

    public ArticleController(LgHtmlSanitizer htmlSanitizer)
    {
        _htmlSanitizer = htmlSanitizer;
    }

    [HttpPost]
    public async Task<IActionResult> SaveAsync(ArticleDto article)
    {
        try
        {
            // Retire les scripts, gestionnaires d'événements, URL javascript: et formulaires
            article.HtmlTextContent = _htmlSanitizer.Sanitize(article.HtmlTextContent);
            // ...
            return Ok();
        }
        catch (Exception ex)
        {
            return Problem(ex);
        }
    }
}

Les CGU éditées avec LgHtmlEditor sont assainies automatiquement par Lagoon (voir CGU).

Propriétés

Toutes les propriétés [Parameter] du composant, y compris celles héritées.

Nom	Type	Défaut	Déclaré dans	Description
`AllowResizeX`	`bool`	`false`	`LgHtmlEditor`	Autorise le redimensionnement horizontal de l'éditeur Jodit.
`AllowResizeY`	`bool`	`false`	`LgHtmlEditor`	Autorise le redimensionnement vertical de l'éditeur Jodit.
`AskBeforePasteFromWord`	`bool`	`true`	`LgHtmlEditor`	Affiche la boîte de dialogue Jodit lors d'un collage depuis Microsoft Word.
`AskBeforePasteHTML`	`bool`	`true`	`LgHtmlEditor`	Affiche la boîte de dialogue Jodit lors d'un collage de contenu HTML.
`Buttons`	`List<string>`	`null`	`LgHtmlEditor`	Liste des boutons affichés dans la barre d'outils pour les grandes largeurs d'éditeur.
`DefaultFontSizePoints`	`string`	`"px"`	`LgHtmlEditor`	Unité de taille de police utilisée par défaut ; la source attend `px` ou `pt`.
`FontFamilyList`	`Dictionary<string, string>`	dictionnaire par défaut	`LgHtmlEditor`	Polices disponibles dans la liste Jodit (`Arial`, `Helvetica`, `Georgia`, `Impact`, `Tahoma`, `Times New Roman`, `Verdana`).
`FontSizeList`	`string[]`	`new[] { "8", ..., "96" }`	`LgHtmlEditor`	Tailles de police disponibles dans l'éditeur.
`Height`	`string`	`null`	`LgHtmlEditor`	Hauteur CSS de l'éditeur ; active la poignée de redimensionnement selon la configuration Jodit.
`Inline`	`bool`	`false`	`LgHtmlEditor`	Active le mode d'édition inline de Jodit.
`Language`	`string`	`null`	`LgHtmlEditor`	Langue forcée de l'éditeur. Si `null` ou vide, la culture courante (`TwoLetterISOLanguageName`) est utilisée.
`MinHeight`	`int`	`200`	`LgHtmlEditor`	Hauteur minimale de l'éditeur, en pixels.
`OnChangingAsync`	`Func<ChangingEventArgs<string>, Task>`	`null`	`LgHtmlEditor`	Callback appelé avant l'application d'une nouvelle valeur ; peut annuler la modification.
`OnInput`	`EventCallback<ChangeEventArgs>`	—	`LgHtmlEditor`	Callback appelé à la saisie, avec le contenu HTML courant dans `ChangeEventArgs.Value`.
`OnPasteAsync`	`Func<HtmlEditorPasteEventArgs, Task>`	`null`	`LgHtmlEditor`	Callback appelé avant collage (ou dépôt de contenu venant de l'extérieur de l'éditeur) ; permet de lire ou remplacer le contenu à insérer.
`Placeholder`	`string`	`string.Empty`	`LgHtmlEditor`	Texte indicatif de l'éditeur ; traduit avec `CheckTranslate()`.
`ShowInsertAsHtml`	`bool`	`false`	`LgHtmlEditor`	Affiche l'option « Insert as HTML » dans le choix de collage HTML.
`Spellcheck`	`bool`	`true`	`LgHtmlEditor`	Active la vérification orthographique et grammaticale du navigateur.
`Style`	`Dictionary<string, string>`	`null`	`LgHtmlEditor`	Styles appliqués au conteneur principal Jodit, pas au contenu HTML édité.
`TextIcons`	`bool`	`false`	`LgHtmlEditor`	Remplace les icônes SVG de l'éditeur par du texte.
`Toolbar`	`bool`	`true`	`LgHtmlEditor`	Affiche ou masque la barre d'outils Jodit.
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase<TValue>`	Attributs additionnels appliqués au conteneur rendu (capture des valeurs non mappées).
`AutoFocus`	`bool`	`false`	`LgInputBase<TValue>`	Donne le focus au champ lors du premier rendu.
`ConfirmationMessage`	`string`	`null`	`LgInputBase<TValue>`	Message de confirmation affiché avant d'appliquer une nouvelle valeur.
`Container`	`IInputContainer<string>`	`null`	`LgInputBase<TValue>`	Paramètre interne d'intégration avec un conteneur de saisie, notamment une cellule de `LgGridView`.
`CssClass`	`string`	`null`	`LgInputBase<TValue>`	Classes CSS additionnelles appliquées au conteneur `form-group-htmleditor`.
`Disabled`	`bool`	`false`	`LgInputBase<TValue>`	Désactive l'éditeur.
`DisplayName`	`string`	`null`	`LgInputBase<TValue>`	Nom affiché du champ, utilisé dans les messages de validation.
`HideValidationMessage`	`bool`	`false`	`LgInputBase<TValue>`	Masque les messages de validation inline pour ce champ.
`Label`	`string`	`null`	`LgInputBase<TValue>`	Libellé associé au champ.
`LabelContent`	`RenderFragment`	`null`	`LgInputBase<TValue>`	Contenu personnalisé du libellé.
`OnChange`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase<TValue>`	Callback appelé après application d'une nouvelle valeur ; `ChangeEventArgs.Value` contient le HTML.
`OnReset`	`EventCallback<ChangeEventArgs>`	—	`LgInputBase<TValue>`	Callback déclenché après clic sur le bouton de réinitialisation hérité.
`PolicyEdit`	`string`	`null`	`LgInputBase<TValue>`	Policy requise pour éditer le champ.
`PolicyVisible`	`string`	`null`	`LgInputBase<TValue>`	Policy requise pour afficher le champ.
`ReadOnly`	`bool`	`false`	`LgInputBase<TValue>`	Affiche le contenu en lecture seule ; le composant rend alors un `span` avec le HTML.
`Required`	`bool?`	`null`	`LgInputBase<TValue>`	Indique si le champ est obligatoire. Si `null`, la valeur est déduite de l'attribut `[Required]` du modèle.
`ResetButton`	`bool?`	`null`	`LgInputBase<TValue>`	Affiche le bouton de réinitialisation. Si `null`, la configuration applicative décide.
`ResetText`	`string`	`null`	`LgInputBase<TValue>`	Texte du bouton de réinitialisation. Si `null`, la configuration applicative est utilisée.
`ResetTextAriaLabel`	`string`	`null`	`LgInputBase<TValue>`	Libellé ARIA du bouton de réinitialisation. Si `null`, la configuration applicative est utilisée.
`Tooltip`	`string`	`null`	`LgInputBase<TValue>`	Bulle d'aide appliquée au champ.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase<TValue>`	Indique si la bulle d'aide contient du HTML.
`Value`	`string`	`null`	`LgInputBase<TValue>`	Valeur HTML liée au composant.
`ValueChanged`	`EventCallback<string>`	—	`LgInputBase<TValue>`	Callback de mise à jour de la valeur liée (`@bind-Value`).
`ValueExpression`	`Expression<Func<string>>`	`null`	`LgInputBase<TValue>`	Expression identifiant le champ lié pour l'`EditContext` et la validation.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-label`.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Valeur de l'attribut `aria-labelledby`.

Paramètres en cascade

LgHtmlEditor consomme les paramètres en cascade hérités de LgInputBase<string> : EditContext (formulaire parent), LgEditFormConfiguration, ParentAuthorizeView et InputBusyReference. Ils sont fournis automatiquement par les composants ancêtres et servent à la validation, aux policies et à la restauration d'une valeur en attente.

Événements

Événement	Type	Description
`OnChange`	`EventCallback<ChangeEventArgs>`	Déclenché après changement validé de la valeur HTML, généralement à la perte de focus.
`OnChangingAsync`	`Func<ChangingEventArgs<string>, Task>`	Déclenché avant l'application d'une nouvelle valeur ; `Cancel = true` annule la modification.
`OnInput`	`EventCallback<ChangeEventArgs>`	Déclenché pendant la saisie via le callback JavaScript d'entrée.
`OnPasteAsync`	`Func<HtmlEditorPasteEventArgs, Task>`	Déclenché avant collage ; permet de choisir `Text`, `Html` et `UseHtml`.
`OnReset`	`EventCallback<ChangeEventArgs>`	Déclenché lorsque le bouton de réinitialisation hérité remet la valeur à `default`.
`ValueChanged`	`EventCallback<string>`	Déclenché par la liaison `@bind-Value` lorsque la valeur HTML change.

Accessibilité

Utilisez Label, LabelContent, AriaLabel ou AriaLabelledBy pour nommer le champ d'édition.
Les attributs de validation (aria-invalid, aria-describedby) sont ajoutés automatiquement par LgInputBase<string> lorsque l'EditContext contient des erreurs.
Required ajoute aria-required, et ReadOnly ajoute aria-readonly via les mécanismes hérités.
En lecture seule, le contenu HTML est rendu comme balisage ; assurez-vous que le HTML stocké reste sémantique et accessible, et qu'il a été assaini côté serveur.

Composants liés

LgButton — composant d'action utilisé avec les formulaires qui hébergent l'éditeur.
LgLabelAction — affichage d'une valeur avec action contextuelle, utile en complément d'un contenu édité.

Utilisation​

Démonstration​

Dans un formulaire​

Configurer la barre d'outils Jodit​

Adapter le mode d'édition​

Intercepter la saisie, le changement et le collage​

Annuler une modification avant affectation​

Afficher le contenu en lecture seule​

Assainir le contenu côté serveur​

Propriétés​

Événements​

Accessibilité​

Composants liés​