Utilisation de Richtexteditor dans vos applications .net Maui

Découvrez comment démarrer avec l’interface utilisateur de Telerik pour le composant de l’éditeur de texte Rich Maui Maui, y compris les options de style.

Peu importe votre âge, il y aura toujours des moments où vous aurez besoin de prendre des notes détaillées, que ce soit pour mieux se souvenir d’une idée, pour ne manquer aucun détail important ou surtout lorsque vous êtes pleinement concentré sur un cours éducatif et ne voulez pas manquer une seule mise à jour.

À l’ère numérique d’aujourd’hui, la technologie est devenue notre plus grande sauvetage: nous avons d’innombrables applications disponibles pour nous soutenir dans tous les aspects de nos vies… et si l’on n’existe pas, nous avons la possibilité de le créer!

Allons avec un exemple plus direct: imaginez que vous prenez enfin ce cours que vous attendiez, et vous avez une application éducative super puissante où, en plus d’apprendre, vous pouvez également prendre vos propres notes. Ce serait incroyable si vous n’étiez pas limité aux petits champs de texte qui restreignent combien vous pouvez écrire, non? Sinon, vos idées pourraient ne pas être capturées comme vous le vouliez.

C’est là que le .Net Maui Richtexteditor Le contrôle de Progress Telerik entre en jeu – un composant qui vous permet de travailler avec le texte long confortablement et efficacement. Aujourd’hui, je veux vous montrer comment en tirer le meilleur parti, en l’intégrant rapidement et facilement dans vos applications .net Maui. Venez découvrir tout ce que vous pouvez réaliser avec!

Qu’est-ce que le Richtexteditor?

Le Richtexteditor est un composant Telerik qui vous permet de prendre des notes de texte étendues, offrant une large gamme de capacités d’édition. Vous pouvez créer, modifier, formater du texte, ajouter des hyperliens et même générer le contenu modifié sous forme de HTML standard. En bref, c’est un éditeur de texte puissant que vous pouvez intégrer directement dans votre application.

Certaines de ses principales caractéristiques incluent:

• Barre d’outils: Le contrôle est livré avec une barre d’outils intégrée qui vous permet de manipuler facilement du texte, de la modification des couleurs et des tailles de police aux styles appliqués comme audacieux ou en italique. Cette fonctionnalité intégrée vous évite les tracas de l’implémentation de ces fonctionnalités manuellement, comme vous le faites peut-être avec d’autres options.
• API de style: Vous pouvez personnaliser davantage l’apparence en modifiant diverses propriétés de style, telles que la couleur d’arrière-plan, la couleur des bordures et l’épaisseur de la bordure. Pour plus de détails, consultez le Style éditeur et Style de la barre d’outils documentation.
• Menu contextuel personnalisable: Le Richtexteditor comprend également un menu contextuel intégré. Cela signifie que vous pouvez mettre en évidence un mot ou une phrase dans votre texte et, avec un clic droit, ouvrir un menu pour appliquer des actions rapides comme la copie ou la coller. Encore mieux, vous pouvez personnaliser ce menu en ajoutant ou en supprimant les options en fonction des besoins spécifiques de votre application.
• Localisation: Une de mes fonctionnalités préférées! Le Richtexteditor prend également en charge la traduction de texte dans n’importe quelle langue, afin que le contenu de votre application puisse être compris par les personnes du monde entier – sans limites de langue! Il s’agit d’une nouvelle fantastique, d’autant plus que la traduire du contenu des applications est généralement une tâche longue et fastidieuse. Avec cette fonctionnalité, vous obtenez des capacités de traduction entièrement intégrées et prêtes à l’emploi.

Voyons maintenant à quoi ce composant ressemble visuellement avec ses fonctionnalités:

Comment puis-je l’implémenter? 🤔

Après avoir vu toutes les choses incroyables que nous pouvons réaliser, il est temps d’apprendre à l’implémenter!

Vous pouvez le configurer en quelques étapes simples en utilisant l’essai gratuit pour Telerik UI. Tout d’abord, assurez-vous d’avoir les conditions préalables suivantes prêtes:

Une fois que vous avez tout en place, nous sommes prêts à partir!

Étape 1: Ajouter l’espace de noms Telerik

Accédez à votre fichier XAML et ajoutez l’espace de noms suivant:

xmlns:telerik="[http://schemas.telerik.com/2022/xaml/maui](http://schemas.telerik.com/2022/xaml/maui)"

Étape 2: Configurez l’instance Richtexteditor

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

Étape 3: Enregistrez Telerik dans Mauiprogram.cs

Aller à votre Mauprogram.cs fichier, et à l’intérieur du Createmauiapp Méthode, assurez-vous d’enregistrer Telerik en ajoutant le .SetElee () Méthode d’extension. Il est recommandé de le placer au-dessus de le .UseMauiApp<App>() ligne, comme ceci:

using Telerik.Maui.Controls.Compatibility;
        
  public static class MauiProgram 
  { 
    public static MauiApp CreateMauiApp() 
	{ 
	  var builder = MauiApp.CreateBuilder(); 
	  builder 
	    .UseTelerik() 
	    .UseMauiApp<App>() 
	    .ConfigureFonts(fonts => 
	    { 
	      fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular"); 
	    }); 
	      return builder.Build(); 
	    }
}

Et avec ces étapes simples, vous avez intégré un éditeur de texte élégant dans votre application .net Maui! 💪

Explorons quelques choses supplémentaires 👀

Chargement HTML à partir d’une chaîne

Dans le cas où vous avez besoin de lire du texte HTML, vous pouvez également le faire en utilisant la propriété source, comme je vais vous le montrer ci-dessous.

var htmlSource = @"<h4>The Beauty and Diversity of Flowers</h4> 
  
<p><strong>Flowers</strong> are one of nature's most beautiful creations, found in a wide range of colors, shapes, and sizes.</p>
    
<p style='color:#808080'>They play a vital role in plant reproduction and attract pollinators like bees and butterflies. Flowers also hold cultural, medicinal, and symbolic meanings across different societies.</p>";
    
this.richTextEditor.Source = RichTextSource.FromString(htmlSource);

Chargement du HTML à partir d’un flux

Une autre façon de charger le contenu HTML est de la récupérer à partir d’un flux en utilisant le FromStream méthode. L’exemple suivant montre comment charger un fichier HTML en tant que REEDDEDRESOURCE.

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

Comment récupérer le contenu HTML?

Il est trop simple de récupérer le contenu HTML. Il vous suffit d’utiliser le GetHtmlAsync() Méthode, comme je vous le montre ci-dessous:

var htmlString = await this.richTextEditor.GetHtmlAsync();

Conclusion

Avez-vous vu comment, en quelques minutes, vous avez pu appliquer un contrôle qui a l’air super complexe mais qui est en fait très simple à mettre en œuvre? 🎯

C’est exactement le type d’équilibre que nous visons dans le développement: trouver des composants qui non seulement offrent plus de fonctionnalités à nos utilisateurs, mais nous font également gagner un temps de développement précieux – temps que nous pouvons investir dans d’autres tâches importantes!

Je vous encourage à commencer à mettre en œuvre le Éditeur de texte directionnel Dans vos applications, même dans les projets de pratique – vous verrez à quel point il est cool et facile de travailler avec! Telerik UI pour .net Maui est livré avec un essai gratuit de 30 jours, alors essayez-le!

Essayez l’interface utilisateur pour .net Maui

Si vous avez des questions, n’hésitez pas à les laisser dans les commentaires.

Rendez-vous la prochaine fois! 🙋‍♀️

Références