Éditeur d’images

Permet de recadrer, faire pivoter ou retourner une image déjà présente dans le document, d’y dessiner, de l’annoter ou d’appliquer un filtre, sans quitter l’éditeur. Save transmet l’image modifiée à votre gestionnaire de téléversement et lui attribue la nouvelle URL ; sans gestionnaire, elle est intégrée sous forme d’URL de données PNG.

Activation

Cette fonctionnalité est fournie par le plugin imageeditor.js (également inclus dans plugins/all_plugins.js). Les outils de modification se trouvent dans plugins/tui.image-editor/, que le plugin charge dans la boîte de dialogue uniquement à l’ouverture, depuis url_base + "/plugins/tui.image-editor/". Conservez ce dossier à côté du plugin lors du déploiement.

Le bouton est imageeditor (« Image Editor »). Il figure dans la barre d’outils d’image par défaut (controltoolbar_IMG), qui apparaît au clic sur une image : rien à ajouter à la barre principale. Depuis le code, sélectionnez d’abord l’image puis exécutez editor.execCommand("imageeditor").

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>

<div id="editor"><p><img src="landscape.png" width="320" alt="Hills under a sun"></p></div>
<script>
// Called on Save with the edited picture: (file, callback(url, error)).
function uploadToServer(file, callback) {
  fetch("/upload", { method: "POST", headers: { "x-file-name": file.name }, body: file })
    .then(function (r) { return r.ok ? r.json() : Promise.reject(new Error("HTTP " + r.status)); })
    .then(function (data) { callback(data.url); })
    .catch(function (err) { callback(null, err.message); });
}
var editor = new RichTextEditor("#editor", { file_upload_handler: uploadToServer });
</script>

C’est le même gestionnaire que pour les images insérées ou déposées ; consultez Téléverser des fichiers pour des exemples complets côté serveur.

Options

Le plugin n’a pas d’options propres. Il lit les suivantes :

Option	Valeur par défaut	Rôle ici
`file_upload_handler`	aucun	Reçoit l’image modifiée lors de Save. À défaut, `window.rte_file_upload_handler` est utilisé.
`url_base`	`"/richtexteditor"`	Emplacement depuis lequel `plugins/tui.image-editor/` est chargé.
`controltoolbar_IMG`	inclut `imageeditor`	Retirez-en `imageeditor` pour masquer le bouton.
`text_ie_title`, `text_ie_save`, `text_ie_saving`, `text_ie_uploadfailed`, `text_ie_nourl`	Anglais	Titre de la boîte de dialogue, bouton Save et messages de téléversement. Les modules de langue les définissent.

Utilisation

La boîte de dialogue occupe 90% de la fenêtre. Les outils en bas sont Undo, Redo, Reset, Delete, Delete all, Crop (Custom, Square, 3:2, 4:3, 5:4, 7:5, 16:9), Flip, Rotate, Draw, Shape, Icon, Text, Mask et Filter. Save est en haut à droite ; la zone voisine affiche les erreurs de téléversement.

L’action de Save dépend du gestionnaire de téléversement :

Avec un gestionnaire. L’image est transmise sous forme de File nommé image-<timestamp>.png avec le type image/png. Save affiche « Saving... » jusqu’à votre rappel. callback(url) définit le src de l’image à cette URL et ferme la boîte de dialogue. callback(null, "File too large") garde la boîte de dialogue ouverte avec les modifications et affiche « Upload failed: File too large », afin de réessayer. Un gestionnaire qui lève une exception affiche son message d’erreur de la même façon.
Sans gestionnaire. Le src de l’image devient une URL data:image/png;base64,... et la boîte de dialogue se ferme.

Seul src change. Les attributs width, alt et les autres attributs de l’image restent inchangés : une image recadrée en 16:9 conserve donc sa largeur précédente et sa hauteur suit les nouvelles proportions. HTML enregistré dans l’exemple ci-dessus (le id est ajouté à toutes les images par l’éditeur, et non par ce plugin) :

<p><img src="/uploads/image-1793772809490.png" width="320" alt="Hills under a sun" id="rte-fig-cl2s5j0"></p>

À savoir

Le résultat est toujours un PNG. Une photo JPEG devient un PNG, généralement plus volumineux : lors de notre test, un JPEG 640×400 a produit un PNG de 78 KB. Si votre serveur limite les extensions, autorisez .png.
Sans gestionnaire, l’image est intégrée même lorsque allowBase64Images vaut false. Dans la version 2.6.12, l’éditeur d’images ne vérifie pas ce réglage. Si vous avez désactivé le base64 (voir Stockage des images), définissez aussi un gestionnaire ou retirez imageeditor de controltoolbar_IMG.
Les images provenant d’un autre site nécessitent CORS. L’image est dessinée sur un canvas : une image d’une autre origine doit donc être servie avec un en-tête Access-Control-Allow-Origin. Sinon, elle n’apparaît pas dans la boîte de dialogue et, dans la version 2.6.12, Save la remplace par un PNG vide de 300×150. Ne modifiez que les images de votre domaine ou d’un CDN envoyant les en-têtes CORS.
Filtres. Dans la version 2.6.12, l’image n’est pas redessinée dans la boîte de dialogue après la sélection d’un filtre ; le filtre s’applique à l’image enregistrée. Grayscale et Invert ont fonctionné dans notre test ; Sepia a donné des couleurs incorrectes (violettes). Vérifiez le résultat après l’enregistrement.
Clavier. La palette d’outils n’est pas entièrement utilisable au clavier. La déclaration d’accessibilité recense cette lacune connue.
Aucune requête externe. L’ouverture et l’enregistrement n’ont chargé que des fichiers de plugins/tui.image-editor/ sur l’hôte de la page ; le plugin désactive les statistiques d’utilisation de la bibliothèque.

Voir aussi : démonstration de modification d’images, Téléverser des fichiers, Stockage des images, Galerie d’images.