Telerik RichTextEditor pour .NET MAUI : afficher n’importe quel texte HTML

Découvrez comment le composant Telerik RichTextEditor pour .NET MAUI permet aux utilisateurs de créer du contenu textuel riche via un WYSIWYG. Il est doté de diverses capacités d’édition et, avec l’aide de la barre d’outils intégrée, vous pouvez fournir aux utilisateurs un moyen simple et rapide de modifier leur contenu HTML.

L’affichage et l’édition de texte enrichi sont souvent nécessaires pour les applications des utilisateurs finaux. Peu importe que nous ciblions Windows, macOS, iOS ou Android, ou que nous ayons simplement besoin d’envoyer un e-mail et de formater son contenu ou de nous concentrer sur l’édition et la visualisation de documents, Telerik RichTextEditor est là pour faire le travail. Disponible avec R2 2023 (version 5.2.0) de Progress Interface utilisateur Telerik pour .NET MAUIce composant d’interface What-You-See-Is-What-You-Get (WYSIWYG) est livré avec :

• Contenu HTML visualisé : paragraphes, texte formaté, images, tableaux, listes ordonnées et non ordonnées, etc.
• Formatage du texte tel que audacieux, italique, souligner et grèveà travers
• Manipulations de police telles que la taille, la famille, la couleur du texte et la couleur d’arrière-plan du texte
• Listes à puces et numérotées
• Sélection de texte
• Création et gestion des hyperliens
• Formatage des indices et exposants
• Indentation et alignement du contenu
• Actions d’édition Annuler/Rétablir
• Diverses options de source HTML
• Prise en charge des commandes
• Possibilité d’insérer et de modifier des images : opérations telles que redimensionner, couper, copier, coller, supprimer
• Barre d’outils intégrée
• API de style flexible

Ajout de Telerik RichTextEditor à l’application .NET MAUI

Comme pour tous les autres composants d’interface utilisateur de la suite Telerik UI pour .NET MAUI, l’ajout Telerik RichTextEditor est simple et peut être réalisé en trois étapes :

1. Téléchargez et installez l’interface utilisateur Telerik pour .NET MAUI.
2. Appeler le UseTelerik() méthode dans le fichier Maui Program.cs de votre projet .NET MAUI. Ceci est nécessaire pour tous les composants Telerik UI pour .NET MAUI, car UseTelerik() enregistre tous les gestionnaires intégrés ou créés en plus dans les composants Telerik.
3. Définissez Telerik RichTextEditor en XAML ou C#.

XAML

<Grid>  
  <telerik:RadRichTextEditor  x:Name="richTextEditor"  AutomationId="richTextEditor"/>  
</Grid>

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

C#

RadRichTextEditor  richTextEditor = new RadRichTextEditor();

Charger du texte enrichi sur Telerik RichTextEditor

Telerik RichTextBox affiche le contenu HTML en proposant une API Rich pour récupérer le HTML d’une chaîne ou d’un document. Après cela, il ne vous reste plus qu’à régler le Source propriété.

Définir directement la source sur une chaîne :

this.richTextEditor.Source  =  "<b>Hello World!</b>";

Utilisation de la méthode RichTextSource.FromString pour extraire le code HTML d’une chaîne :

var htmlSource =  @"<h4>One of the Most Beautiful Islands on Earth - Tenerife</h4>  
  <p><strong>Tenerife</strong> is the largest and most populated island of the eight <a href="https://en.wikipedia.org/wiki/Canary_Islands" target="_blank">Canary Islands</a>.</p>  
  <p style="color:#808080">It is also the most populated island of <strong>Spain</strong>, with a land area of <i>2,034.38 square kilometers</i> and <i>904,713</i> inhabitants, 43% of the total population of the <strong>Canary Islands</strong>.</p>";  
this.richTextEditor.Source  =  RichTextSource.FromString(htmlSource);

Utilisation de la méthode RichTextSource.FromStream pour lire un flux (une option très utile lorsque nous devons charger un document) :

Func<CancellationToken,  Task<Stream>> streamFunc = ct =>  Task.Run(()  =>  
{  
  Assembly assembly =  typeof(GetHtml).Assembly;  
  string fileName = assembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains(" PickYourHoliday.html"));  
  Stream stream = assembly.GetManifestResourceStream(fileName);  
  return stream;  
});  
  
this.richTextEditor.Source  =  RichTextSource.FromStream(streamFunc);

Pour les besoins de cet article, j’ai utilisé la troisième approche et chargé un document contenant des images, des liens, des tableaux et de nombreuses autres fonctionnalités HTML complexes, comme indiqué ci-dessous :

Modification de texte enrichi avec Telerik RichTextEditor📝

Nous avons déjà chargé notre document riche et complet, mais que faisons-nous dans un éditeur si nous ne voulons pas le modifier, n’est-ce pas ?

Telerik Editor offre de riches fonctionnalités pour ce faire, et tout cela est exposé aux commandes utilisateur que nous pouvons lier à différentes interfaces utilisateur en fonction des besoins de notre application.

Un tableau avec toutes les commandes est ci-dessous :

Cependant, l’un des scénarios les plus courants consiste à modifier le document à l’aide de la barre d’outils du composant. Cette fonctionnalité est donc intégrée.

La première fois que vous visualisez Telerik Editor, il apparaît avec une barre d’outils contenant des boutons avec toutes les commandes ci-dessus.

Cacher la barre d’outils

Par défaut, la barre d’outils apparaît prête à être utilisée avec une apparence adaptative. Néanmoins, si vous souhaitez le masquer ou le personnaliser, la première étape consiste à définir le AutoGenerateItems propriété à False.

Ajouter la barre d’outils

Une fois la barre d’outils par défaut masquée, il est temps d’en créer une nouvelle. La partie importante ici est que vous devez créer une instance de Barre d’outils RadRichTextEditor composant en dehors de l’éditeur Telerik mais utilisez le composant de la barre d’outils RichTextEditor propriété à associer au composant Editor.

<telerik:RadRichTextEditorToolbar  RichTextEditor="{x:Reference richTextEditor}" >  
  ...
</telerik: RadRichTextEditorToolbar  >
  
<telerik:RadRichTextEditor  x:Name="richTextEditor"  />

Ajouter des éléments de barre d’outils

Ensuite, vous pouvez définir les fonctionnalités à afficher. Il y a deux façons de procéder. Vous pouvez utiliser des RadToolBarItems classiques ou utiliser les éléments de barre d’outils RichTextEditor prédéfinis, qui ont des fonctionnalités attribuées. Le code ci-dessous illustre les éléments prédéfinis de la barre d’outils de l’éditeur :

<telerik:RadRichTextEditorToolbar x:Name="richTextToolbar"  
    Grid.Row="{OnIdiom Desktop=0, Phone=1}"  
    ZIndex="10"  
    RichTextEditor="{x:Reference richTextEditor}"  
    AutoGenerateItems="False">  
<telerik:RichTextEditorFontFamilyToolbarItem/>
<telerik:RichTextEditorFontSizeToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorBoldToolbarItem/>
<telerik:RichTextEditorItalicToolbarItem/>
<telerik:RichTextEditorUnderlineToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorAlignLeftToolbarItem/>
<telerik:RichTextEditorAlignCenterToolbarItem/>
<telerik:RichTextEditorAlignRightToolbarItem/>
<telerik:RichTextEditorAlignJustifyToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorTextColorToolbarItem/>
<telerik:RichTextEditorHighlightTextColorToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorAddOrEditHyperlinkToolbarItem />
<telerik:RichTextEditorRemoveHyperlinkToolbarItem />
<telerik:RichTextEditorAddOrEditImageToolbarItem />
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorBulletingToolbarItem />
<telerik:RichTextEditorNumberingToolbarItem />
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorOutdentToolbarItem/>
<telerik:RichTextEditorIndentToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorTextFormattingToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorClearFormattingToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorStrikethroughToolbarItem/>
<telerik:RichTextEditorSuperscriptToolbarItem/>
<telerik:RichTextEditorSubscriptToolbarItem/>
<telerik:SeparatorToolbarItem/>
<telerik:RichTextEditorUndoToolbarItem/>
<telerik:RichTextEditorRedoToolbarItem/>
<telerik:RichTextEditorHyperlinkNavigationToolbarItem />
<telerik:RichTextEditorImageNavigationToolbarItem />

</telerik:RadRichTextEditorToolbar>
  
<telerik:RadRichTextEditor x:Name="richTextEditor"  />

Styliser les éléments de la barre d’outils

Maintenant, stylisons-les un peu différemment. Comme la barre d’outils de RichTextEditor est basée sur le contrôle RadToolbar, tous les éléments de la barre d’outils de RichTextEditor héritent de BoutonToolbarItem. Toutes les propriétés de style disponibles pour ButtonToolbarItem sont également applicables aux éléments de la barre d’outils de l’éditeur.

Par exemple, pour changer le fond des éléments définis ci-dessus, on peut définir le style suivant :

<Style  TargetType="telerik:ButtonToolbarItemView"  x:Key="commonStyle">  
  <Setter  Property="MinimumWidthRequest"  Value="40"/>  
  <Setter  Property="BackgroundColor"  Value="#804BDE74"/>  
</Style>

Et réglez-le-leur comme ceci :

<telerik:RichTextEditorFontFamilyToolbarItem Style="{StaticResource commonStyle}"/>

Pour lire plus de détails sur Barre d’outils Telerik pour .NET MAUI et voyez ce qu’il peut offrir d’autre, lisez le blog sur la barre d’outils.

Sélectionnez du texte, déplacez le curseur ou mettez-le en lecture seule 👀

Telerik RichTextEditor propose également une API au développeur .NET MAUI pour manipuler le contrôle :

• GetSelectionAsync méthode – Renvoie de manière asynchrone un RichTextSelection objet qui définit la sélection de texte actuelle dans l’éditeur (renvoie null si aucun texte n’est sélectionné). Le RichTextSelection l’objet contient le Text lui-même ainsi que le Start et End position des caractères du texte.
• GetHtmlAsync méthode de RichTextEditor – Vous pouvez obtenir le contenu créé et mis à jour dans l’éditeur HTML.
• IsReadOnly property – Contrôle l’état en lecture seule.

Stylisez le RichTextEditor👔

Comme nous l’avons déjà vu, la Telerik ToolBar peut être personnalisée, et cela est également vrai pour le RichTextEditor lui-même. Vous pouvez profiter des propriétés de style suivantes : BorderColor, BorderThickness, CornerThickness et BackgroundColor.

Par exemple, appliquons-les pour l’exemple ci-dessus :

<telerik:RadRichTextEditor  x:Name="richTextEditor"  
    BorderThickness="2"  
    BorderColor="#808660C5"  
    CornerRadius="5"  />

Gérez des scénarios avancés avec des événements 👓

RadRichTextEditor est prêt à permettre aux développeurs .NET MAUI de bénéficier de la flexibilité nécessaire pour réaliser des scénarios plus complexes en gérant les événements.

Le composant RichTextEditor expose les événements suivants :

• OpenHyperlinkError – Déclenché lorsque les utilisateurs tentent d’ouvrir des URL non valides dans l’éditeur
• IsReadOnlyChanged – Déclenché lorsque le mode lecture seule de RichTextEditor est commuté
• FontFamilyChanged – Levé lorsque le FontFamily la propriété du RichTextEditor est modifiée
• FontSizeChanged – Levé lorsque le FontSize la propriété du RichTextEditor est modifiée
• FontAttributesChanged – Levé lorsque le FontAttributestel que gras, italique, indice ou exposant, est modifié
• TextDecorationsChanged – Levé lorsque le TextDecorationstel que souligné ou barré, est modifié
• TextFormattingChanged – Levé lorsque le TextFormattingtel qu’un titre, un paragraphe ou une citation, est modifié
• HorizontalTextAlignmentChanged – Levé lorsque le HorizontalTextAlignmenttel que gauche, droite, centre ou justifier, est modifié
• ListTypeChanged – Levé lorsque le ListTypecomme une liste numérotée ou à puces, est modifié
• TextColorChanged – Levé lorsque le TextColor la propriété du RichTextEditor est mise à jour
• HighlightTextColorChanged – Levé lorsque le HighlightTextColor la propriété du RichTextEditor est mise à jour
• SelectionRangeChanged – Levé lorsque le SelectionRangequi définit la position de début et de fin du texte actuellement sélectionné dans le texte de l’éditeur, est mis à jour
• IsHyperlinkSelectedChanged – Déclenché lorsqu’un lien hypertexte dans l’éditeur est sélectionné

Migration depuis l’interface utilisateur Telerik pour Xamarin

Telerik RichTextEditor pour .NET MAUI partage la même API que Telerik RichTextEditor pour Xamarin.Forms, donc pas de gros changements ici. Il y a quand même deux choses à garder à l’esprit :

• Les ToolbarItems reçoivent désormais le préfixe RichTextEditor afin de ne pas entrer en conflit avec le tout nouveau composant RadToolBar pour .NET MAUI.
• L’espace de noms du contrôle passe de Telerik.XamarinForms.RichTextEditor à Telerik.Maui.Controls.

Pour plus de détails, vous pouvez vous référer au Article sur la migration Telerik depuis Xamarin.

Davantage de ressources

Des exemples complets illustrant la puissance de l’interface utilisateur Telerik pour .NET MAUI RichTextEditor peuvent être trouvés dans le SDK Telerik et Exemples de contrôles Telerik.

Plus de détails sur l’API et l’utilisation du composant peuvent être trouvés dans Documentation Telerik.

Essayez-le vous-même

Telerik RichTextEditor n’est que l’un des plus de 60 composants puissants et riches en fonctionnalités du Interface utilisateur Telerik pour .NET MAUI suite, conçue pour vous aider à développer des applications multiplateformes exceptionnelles. Essayez-le gratuitement maintenant, et si vous avez besoin de quelque chose, n’hésitez pas à partager vos commentaires et vos idées avec l’équipe Telerik sur Portail de commentaires Telerik ou Forums Telerik.

Essayez l’interface utilisateur Telerik pour .NET MAUI