L'édition d'images est une fonctionnalité puissante pour tout éditeur WYSIWYG. Il améliore considérablement les capacités d'une application et ravit les utilisateurs qui souhaitent en faire plus avec leurs images téléchargées.
De nos jours, les utilisateurs s'attendent à ce que les applications disposent de fonctionnalités d'édition d'images, mais la mise en œuvre de telles fonctionnalités n'est pas aussi triviale qu'il y paraît.
Par exemple, dans certains LMS, CMS et systèmes de gestion de documents, les utilisateurs ont besoin d'éditer des images dans un éditeur HTML WYSIWYG.
Le téléchargement d'images et d'autres médias peut être une fonctionnalité normale pour les éditeurs, mais l'édition d'images ne l'est généralement pas. C'est pourquoi, dans ce didacticiel, je vais vous montrer comment implémenter des fonctionnalités d'édition d'images dans votre éditeur. Nous explorerons le recadrage d'images, les filtres, l'ajout de textes et bien plus encore.
Utilisez les transformations d'images Filestack intégrées de Froala pour ajouter facilement des modifications d'images.
Personnalisez les options de Filestack pour avoir plus de contrôle sur les téléchargements et les modifications d'images.
Gérez les événements Froala pour effectuer des actions chaque fois que l'utilisateur interagit avec Filestack.
Configurez l'éditeur WYSIWYG en quelques secondes et en quelques lignes.
Gagnez beaucoup de temps en intégrant un éditeur avec édition d'images intégrée.
Avant de nous lancer dans l'édition d'images, nous avons d'abord besoin d'un éditeur WYSIWYG. Pour ce faire, incluez les fichiers Froala Editor dans votre application comme vous le souhaitez (nous utilisons CDN dans celle-ci). Et puis, on initialise l'éditeur à l'intérieur d'un élément div avec l'identifiant « froala-editor: »
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Editing with Froala and Filestack</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.pkgd.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://static.filestackapi.com/transforms-ui/2.x.x/transforms.css" />
</head>
<body>
<div>
<p>On your JS file, add the following line of code:<br>
</p>
<pre class="brush:php;toolbar:false">new FroalaEditor('#froala-editor');
Lorsque vous exécutez votre application web, vous devriez alors voir l'écran suivant :
Une fois notre éditeur lancé, nous ajouterons des fonctionnalités d'édition d'images en activant le plugin Filestack intégré nativement. Nous faisons cela en spécifiant les options de l'éditeur :
new FroalaEditor('#froala-editor',{
filestackOptions: {
filestackAPI: 'YourFilestackAPIKey',
uploadToFilestackOnly: true,
pickerOptions: {
accept: [
'.pdf',
'image/jpeg',
'image/png',
'image/*',
'video/*',
'audio/*'
],
fromSources: [
'local_file_system',
'url',
'facebook',
'instagram'
]
}
},
toolbarButtons: {
'moreRich': {
'buttons': ['openFilePickerImageOnly', 'openFilePickerVideoOnly', 'openFilePicker', 'insertLink', 'insertTable', 'emoticons', 'specialCharacters', 'insertHR'],
'buttonsVisible': 3
},
'moreText': {
'buttons': ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'textColor', 'backgroundColor', 'clearFormatting']
},
'moreParagraph': {
'buttons': ['alignLeft', 'alignCenter', 'formatOLSimple', 'alignRight', 'alignJustify', 'formatOL', 'formatUL', 'paragraphFormat', 'paragraphStyle', 'lineHeight', 'outdent', 'indent', 'quote']
},
'moreMisc': {
'buttons': ['undo', 'redo', 'fullscreen', 'selectAll', 'html', 'help'],
'align': 'right',
'buttonsVisible': 2
}
},
events: {
'filestack.uploadedToFilestack': function (response) {
console.log("Callback is triggered for upload to Filestack ",)
},
'filestack.filestackPickerOpened': function (response) {
console.log("Callback is triggered for picker opened ",)
},
'filestack.filestackPickerClosed': function (response) {
console.log("Callback is triggered for picker closed ",)
},
'filestack.uploadFailedToFilestack': function (response) {
console.log(response);
},
},
heightMin: 500,
heightMax: 1000
});
Ici, nous avons déclaré quelques options pour les boutons de la barre d'outils de l'éditeur, la taille, les événements et des options supplémentaires pour Filestack. Dans la propriété filestackOptions, nous avons déclaré notre clé API Filestack, un booléen qui détermine si les fichiers sont téléchargés exclusivement sur Filestack, ainsi que quelques options de sélecteur. Ces options déterminent les types de fichiers et les sources autorisés.
Et si vous ne l'avez pas déjà fait, obtenez une clé API en créant un compte Filestack gratuit. Après avoir configuré Froala et Filestack, nous avons terminé ! Vous pouvez désormais utiliser un éditeur WYSIWYG avancé avec des fonctionnalités d'édition d'images au sein de votre application. Voici également à quoi devrait ressembler l’éditeur maintenant :
Remarquez que l'éditeur a désormais un meilleur dimensionnement. Plus important encore, nous avons maintenant des boutons contenant les icônes Filestack. Ces boutons permettent aux utilisateurs de télécharger des images, des vidéos et d'autres fichiers via Filestack. Maintenant, pour vous montrer certaines des capacités du plugin Filestack, penchons-nous sur quelques cas d'utilisation de l'édition d'images.
Après avoir téléchargé une image, cliquez dessus et une icône Filestack devrait apparaître à côté d'elle. Cliquez sur l'icône pour accéder à la vue des transformations de fichiers. Sous l'onglet « Transformer », choisissez « Recadrer » et ajustez l'image à votre guise. Notez que vous pouvez recadrer et faire pivoter l’image avant même de la télécharger. Téléchargeons une image et recadrons-la ensuite à l'aide des transformations Filestack.
Voici à quoi devrait ressembler le recadrage d'une image à l'aide de Filestack. Vous aurez le choix parmi les différentes options de recadrage, notamment la forme libre, le cercle, le carré et le 16:9, que nous utilisons ici. Lorsque vous avez terminé le recadrage, cliquez sur le bouton à cocher et appuyez sur « Enregistrer ».
Les filtres sont devenus un élément important de chaque application qui gère des images. Avec Filestack et Froala, vous pouvez accomplir cela en cliquant sur l'icône Filestack à côté d'une image téléchargée et en allant dans l'onglet « Filtres ». À partir de là, vous pouvez choisir parmi de nombreux filtres d'image, tels que Polaroid, Sépia, Niveaux de gris, etc. Maintenant, appliquons un filtre à notre image recadrée.
Qu'il s'agisse d'ajouter des titres aux titres de chapitres ou des prix à des produits ou des annonces immobilières, le texte est essentiel pour l'édition d'images. En utilisant Froala Editor, vous pouvez ajouter du texte avec différentes polices et styles. En utilisant l’image précédente, ajoutons du texte et améliorons-le.
Nous pouvons également facilement insérer une bordure ou un cadre à notre image en utilisant les fonctionnalités de transformation de Filestack. Allons dans l'onglet « Bordure » et personnalisons une bordure pour notre image :
Après avoir cliqué sur « Enregistrer », nous devrions voir notre image améliorée sur l'éditeur. À partir de là, vous pouvez vérifier l'image téléchargée sur votre tableau de bord Filestack. Allez dans « Navigateur de contenu » et vous verrez notre image, que vous pouvez télécharger séparément ou sur votre application. Pour référence, voici à quoi devrait ressembler l'image après avoir effectué toutes ces opérations :
Pour toute application moderne, l'édition d'images est un outil précieux. Avec des outils comme Froala, vous pouvez accélérer la mise en œuvre d'un éditeur WYSIWYG doté de superbes capacités d'édition d'images. Ces outils vous permettent de recadrer, d'ajouter des textes et des filtres, d'insérer des bordures et d'appliquer des superpositions à vos images.
En suivant ce guide, vous pouvez désormais commencer à implémenter de telles fonctionnalités sans trop d'effort. Vous êtes désormais prêt à offrir une expérience d'édition d'images fluide et agréable qui permet aux utilisateurs d'affiner leurs images sans quitter l'éditeur.
Cet article a été initialement publié sur Blog de Froala.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
