Fermer

novembre 12, 2021

Travailler avec des images dans Telerik Xamarin RichTextEditor


Ajoutez, modifiez et supprimez rapidement et facilement des images et plus encore avec le contrôle Telerik UI pour Xamarin RichTextEditor.

Avec la version officielle R3 2021 de Telerik UI pour Xamarinnous avons introduit une nouvelle fonctionnalité dans notre Contrôle RichTextEditor. Cette fonctionnalité vous donne la possibilité de travailler avec des images. 😍 Vous pouvez ajouter, modifier et supprimer rapidement et facilement des images dans vos applications mobiles et de bureau. 👌 De plus, ces options sont livrées avec des éléments de barre d'outils intégrés.

Ce billet de blog vous familiarisera avec tous les outils intégrés que vous pouvez utiliser pour faciliter votre travail avec les images dans le document. 🧐 Vous pouvez travailler avec les formats d'image suivants : PNG, JPEG, SVG, GIF, WebP.

Éléments de barre d'outils pour l'édition d'images

edit-image-toolbar-items" title="rte- edit-image-toolbar-items"/></p data-recalc-dims=

Passons en revue la puissance des éléments de la barre d'outils intégrée pour travailler avec des images. Bien sûr, nous avons préparé un exemple de démo pour vous ! 🤩

La barre d'outils intégrée les éléments permettant de travailler avec des images sont :

  • AddImageToolbarItem – ajouter une image.
  • EditImageToolbarItem – redimensionner l'image. Une boîte de dialogue supplémentaire est affichée lorsque vous appuyez/cliquez sur l'élément de la barre d'outils. Vous pouvez également ajouter des images à partir de la boîte de dialogue.
  • CutToolbarItem – coupe le HTML/l'image sélectionné dans le presse-papiers.
  • CopyToolbarItem – copie le HTML/l'image sélectionné dans le presse-papiers.
  • PasteHtmlToolbarItem – colle HTML/ image du presse-papiers.
  • RemoveImageToolbarItem – supprime l'image actuellement sélectionnée du document.
  • I magePickerToolbarItem – élément de barre d'outils supplémentaire pour insérer des images à partir d'une collection d'images prédéfinies.

AddImageToolbarItem

ajouter des images dans l'éditeur pour xamarin

Lorsque AddImageToolbarItem est appuyé /clicked, un événement PickImage est déclenché. Si vous souhaitez travailler avec des images de la galerie d'appareils, vous devez accorder des autorisations. Vous devez implémenter manuellement la logique de sélection d'une image dans le gestionnaire d'événements PickImage. Les étapes nécessaires pour les autorisations sont décrites dans notre article d'aide.

Un exemple de démo avec des autorisations peut être trouvé dans notre SDK Browser Application et Telerik UI for Xamarin Samples Application .

EditImageToolbarItem

Principalement le EditImageToolbarItem vous aide à redimensionner l'image actuellement sélectionnée. Si vous n'en avez pas sélectionné, la barre d'outils vous permet de choisir une image (l'événement RichTextEditor.PickImage est déclenché) à l'aide de la boîte de dialogue d'édition PickButton.

images dans l'éditeur pour Xamarin avec le bouton de sélection et le curseur de redimensionnement

La boîte de dialogue de modification de l'image est hautement personnalisable. Pour plus de détails, visitez notre rubrique d'aide.

CutToolbarItemCopyToolbarItemPasteHtmlToolbarItem et RemoveImage1945Toolbar09Itemwork le scénario lorsqu'il y a une image sélectionnée. Vous pouvez couper, copier, coller ou supprimer l'image actuellement sélectionnée.

Demo

Pour la démo, j'utiliserai le ImagePickerToolbarItem. Comme je l'ai partagé, cet élément de barre d'outils peut être rempli avec des images prédéfinies.

Voici les définitions RichTextEditor et RichTextEditor Toolbar en XAML :

<Grid RowDefinitions="* ,Auto">

<telerikRichTextEditor:RadRichTextEditor x:Name="richTextEditor x:Name="richTextEditor "/>

<telerikRichTextEditor:RadRichTextEditorToolbar x:Name= "richTextToolbar"

Grid.Row="1"

RichTextEditor="{x:Référence richTextEditor}"

AutoGenerateItems="False">

<telerikRichTextEditor:ImagePickerToolbarItem x:Name="imagePicker" Text="Sélectionner"/ >

</telerikRichTextEditor:RadRichTextEditorToolbar>

</Grille>

Notre document HTML :

<html>

< tête />

<corps>

<[19659028]h1>Inscrivez-vous au tournoi !</h1>

<p>Légende :</p>

<p>Participera à : <img src="data:image / jpeg; base64, iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADdYAAA3WAZBveZwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAAHvSURBVEhLtVTPK0RRGP1E + ZEfSdmwsRDZECU7xR9gI0uxUVYWFpaTkrK1tZSS7PwoG1YzzE9GgzRqshBNmoWkjHzXueOje98808y8ceqrd + 853zn3vnffpf9ARNFMmOkxxJSMMY3KdOVwytQN82xYkdKF5zuhKgfsYPsnQELSQlUGUUVDMGVHyIrQlQEMj8wA7OoZ36dFaO84YxqzAlBBpkWhvUMpqsKqQ2YAdnUfYKoXiXcgYNIM0BVlmhXaO04U1SDk1gzALq6wu2qReEdI0ZwZkCumCaG9AyenAat + MAMwDuhvJBLvwIqXzAAJcb9GIB7U5E4J7 / FSUSv6MlYI077QNmDuM0THONttQhUE + tYcAZ / 4V / qFtgGxtRqMk6geoV1xztQB0zezD + NNofMBMmaJvxsyOOfjIskDFrFh6jF + v2DqEjofuO / 7YJoym6Qxi / l5kf3Cr6gX8x8O7brQf8PP1I7GgNloGugfTqR657uWhulF9wtdGClFdTDcsgykMH9 ww9QEw2E8W1c5DsqyWBQH / RPBxOc0yhVTAvPWbjFO40Q1S3tpiDBNwdQ + PS4F3YK0lAcYjCDoyc1cF3aROmSqFXn5wKvoRFDcLQTz0yLzjoSiRqx6zxEQL + UKKgraEMarqFfUdVDRgFBFgOgLiDAiqWaRTWAAAAAASUVORK5CYII = " /> </ p >

<[19659028] p > ne participera pas à: < img src = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADdYAAA3WAZBveZwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjEuMWMqnEsAAADqSURBVEhLvdbBDcIwDAVQj9Z70jV64cCBuXroPh2AKVLsJl9IoSaxS / mSUUmCHxBQQxuFIVFYuZ4bjRP9INJH + klf6U / 5Im4ofn4va12R11f9VhnkT / AeLBMuqAZKr6d8XVM9USZN0BGQK + QtSBRvXKlekGh87Asa0YCPN + qFugHECpkBpBdyA0gLOg0gOhSXeiyPGwFEg + + pyA0gLOg0gjMzHQFzKknPRNhnV 4dV0wJQbkgDeHw + 2iMz9AXYN1n7MXRDLQBxQ70AYoasANINeQGkCf3lzsiT19 / j + eH604qci + SC66JzVxhet9WBr / JOEy0AAAAASUVORK5CYII = " /> </ p >

< p > Comptez sur moi: < img src = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABkAAAAVCAYAAACzK0UYAAAABGdBTUEAALGPC / xhBQAAAAlwSFlzAAAN1QAADdUBPdZY8QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS4xYyqcSwAAAg9JREFUSEutVU1PU0EUPbAxiBGCK1ckFdrXmQcaSIh / gPgD1IV / AYyR31OUDWzcuHAD7CQmJsCKsJACfV99NDGYuKkNLaWc + zpNaDKAbd9NTua9d889982duTPoWAWzoz5yr32orwF0JYCq8Tni8xc + vz3F / JihJnaOhcf0vxG / 4dUkTuIj6hxCPTLUtp0iM + Yhv34Gt1bGTCuE2woIGWO + l + HWI6gtD1lH + CXkcky8WYaui / 8mx + JFx0d + w8PkeJIgxMsRH / oz / 6IpxLsQQhdDqHccj2z + buhmBL0m + pyFs8iXqp3YDT8Zdb093g / OtFqCfoUA + UJsIaSBtq5aBUt13Klp2hBd6heZRP2zEdICk1RZLvXX5kwLHvQfWZMfkcWZBrj1ORP1HR6cFS7QlY00KNgvbAv9ESfITzPjiY00KKh7zCTP0AKG2J0f2GANG7F / 6EsPakX0k66 / wtSDEs8cqaE9oDe0ddS3GE8fJgk6FmA6U4H7c9CekXjq7PL4mTLS3RbCcaV5 + k1kmu8Xy / TCSNothjMXQ + / 1uq2lRGfQ + z7jjdTdJlPl3 + z0MiP2ww4P26yR+D/jpTPBRAUmurgtmXwXP3fSpzKcJya0Nyty13GdlngV/LYlke8sz7LwTEh/xn0+HCE7yxJuc60asla8Jxp83wqRmxG/oQ5uHp6PUAAx/g2g2gaG9Ax8Luc lFTkSuQmCC" /></p>

<p> peut-être, pas sûr < img src = "data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAABGdBTUEAALGPC / xhBQAAAAlwSFlzAAAN1QAADdUBPdZY8QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS4xYyqcSwAAAuFJREFUSEu1Vs1u00AQdiPgAu0FIU4k9a6jlsCNp2iKuPECHDigpk28doJQIfAibbn15wFatc2dA4q9azdOOUJJJWguERARVTLfbtyiUKM0aTLSKFl7Z8bz981osVQuJzJP / RspU8xSS + R0i2 / ozBWEuU3K + C + d8aZuco / YYpMwsZgy67PyvpSLNPShcphIsmqGML4M3oESH78NYrotGOng / 6n67Z4b0fsdkhevkzk / I + UjTfF0l7k3SaGapRZfgfAXo1gL06V6aBQPQsP2Q8MSf1me8bz7vhbi / hFlYpUURDbzwr8VqeylmWfBZIpV5 / BVu9SuddLFIFLIe5Vf4Og97tNi0EE49 / S8mL9tB5OR6ojK4TUiDVieMmBY3j + KLsueMkSYt5tifE7qjSyEEwZygOSuGKV6e3gDEdueDGFbN901laMwnNC05x + vo1JegY + ky7GCA7IMtSoKU5RV1SWZj0oS2xTJixMYhlEACFstxIdXaN55oMk + ICY / MEqHuNAvyZdl6EHVwZu6zpwFjZpiCzXfMGyUaazAkIzyxscfI0rrGuLm49C6csIvsCeNtHQmhAaXmvDkd / zFq7HUi7470ZCknzB0Orp8nDF HAbin8ObH + D2x + DcY4ciJO76cmC5yYokthOzr2Kqr4G7AE7GIA / oEaDrqPjFFnRbEgnYPHYky21ZwHiswOMuOl / APPKyQRfehwi7CnGXkpTFS7EKoACvvMmVgF3A + YQAtKVBzJCgM + XTpsI0R / V7iYheFQY + UN1wOrD1qB6OYJ3spW2RllJSBMzJyH6aQm3llqDj4ZFT31WQU + 9Mmf2LkPk1FqntJzvgkc + Yp81ZR2p / VjH85wIy3xBr64vGd / 834c8K2kVry7gMJ3lDm7MOzAHwsGwvPOlgyom1FniXKegE1nQpy8FZuOX23lXOSexeqYnopmIH7C7rlrKP6OCDiu8I6i5 + oPQz7GEZFTu5nqopiDWjaH + xTATZqdUK4AAAAAElFTkSuQmCC " /> </ p >

<hr>

<h2>Vos options :</h2>

<[19659028]p style="font-size:16px">En cours d'exécution : </p>

<p style[19659030]="font-size:16px">Cyclisme : </p>

<p style="font-size:16px">Paint-ball : </p>[19659002] <p style="font-size:16px">Football : </[19659028]p>

<p style="font-size :16px">Volleyball : </p>

</body>

</html>

Et voici le code que j'ai utilisé pour remplir le ImagePickerToolbarItem avec des images :

private void InitialiserImages()

{

var resourceNames = this.currentAssembly.GetManifestResourceNames();

var imageSources = new List();

foreach (var resourceName in resourceNames )

{

if (ressourceName.Contains("sign"))

{

var imageSource = RichTextImageSource.FromStream(() =>

ceci.currentAssembly.GetManife stResourceStream(resourceName), RichTextImageType.Png);

imageSources.Add(imageSource);

}

}

this.imagePicker.ItemsSource = imageSources;[19659002]}

Ensuite, dans le constructeur de la page, appelez la méthode InitializeImages() puis chargez le document HTML à partir d'un flux et affectez le résultat à la propriété Source du RichTextEditor . Tout cela après le InitializeComponent():

InitializeComponent();

InitializeImages();

Func<CancellationToken, Task> streamFunc = ct => Task.Run(( ) =>

{

string fileName = this .currentAssembly.GetManifestResourceNames().FirstOrDefault(n => n.Contains("pick-image-demo.html"));

Stream stream = this.currentAssembly.GetManifestResourceStream(fileName);

return stream;

});

this.richTextEditor.Source = RichTextSource.FromStream(streamFunc);[19659183]Voici le résultat :

images dans l'éditeur pour xamarin - l'utilisateur sélectionne des icônes de réponse pour savoir s'il y participera ou non, etc. divers sports sur une application d'inscription à un tournoi

Partagez vos commentaires 🎉

avez des questions et/ou des commentaires, veuillez les partager dans notre Telerik UI for Xamarin Feedback Portal.

Si vous êtes nouveau sur Telerik UI for Xamarin, vous pouvez en savoir plus via le page produit. Il est livré avec un essai gratuit de 30 jours ce qui vous donne le temps d'explorer la boîte à outils et d'envisager de l'utiliser pour votre développement Xamarin actuel ou à venir.

En savoir plus sur le monde du développement d'applications multiplateformes : Telerik UI pour .NET MAUI 💖

Encore au stade de prévisualisation, notre bibliothèque de composants d'interface utilisateur pour .NET MAUI s'agrandit. Nous avons ajouté de nouveaux contrôles et une prise en charge de macOS. Désormais, vos applications de bureau et mobiles peuvent cibler Android, iOS, macOS et Windows.

Consultez la page produit Telerik UI pour .NET MAUI et la documentation officielle.

Heureux coder avec nos commandes !

Le meilleur outil 2023 pour ta croissance Instagram !



Source link