PC SOFT

FORUMS PROFESSIONNELS
WINDEV, WEBDEV et WINDEV Mobile

Accueil  |  Messages récents  | Connexion  |   | Français  FR
Accueil → WEBDEV 2024 → Insertion image dans champ de saisie de type HTML
Insertion image dans champ de saisie de type HTML
Débuté par JLR, 07 juin 2018 12:59 - 5 réponses
#1
Membre enregistré
14 messages
Posté le 07 juin 2018 - 12:59
Bonjour à tous,

Je suis en train de développer un site web avec l'une des pages qui contient un champ de saisie de type HTML.
Ce champ de saisie intègre de base le ruban permettant de mettre en forme le texte et notamment d'ajouter une image.
Ce bouton "insérer une image" ouvre une petite boite de dialogue qui propose de saisir un lien "http:// ......." vers une image.

J'aurais aimé que ce bouton propose à la place la possibilité de parcourir les données locales de l'utilisateur afin que celui ci puisse insérer une image de son ordinateur sans avoir besoin d'uploader son image en amont chez un hébergeur tierce pour ensuite saisir l'url correspondante.

Ma question est la suivante, est-il possible de modifier le code du bouton "insérer une image" déjà présent dans le ruban intégré à mon champ de saisie?
Sinon j'essaierai de créer moi même un bouton (mais ça ne sera pas "propre" visuellement) qui propose à l'utilisateur de parcourir son pc, de sélectionner l'image désirée et de l’intégrer dans le champ de saisie...

Merci à tous
#2
Membre enregistré
14 messages
Posté le 11 juin 2018 - 15:31
up ;(
#3
Membre enregistré
19 messages
Posté le 14 octobre 2019 - 15:03
Bonjour,
Y a t'il une solution en webdev 23/24 pour insérer de manière plus personnalisée (y compris si possible insérer du poste local) des images dans un champs de saisi html ?
#4
Posté le 14 octobre 2019 - 17:30
le copier coller sinon il faudra uploader sur le serveur d'une manière ou d'une autre
#5
Membre enregistré
3 messages
Posté le 15 octobre 2019 - 09:47
Bonjour,
il y a une solution mais pas via le bouton standard de la barre.

Le principe est d'ajouter l'image encodée en base64 à la fin du texte saisi par exemple.

Pour cela, il faut ajouter un bouton situé à droite du champ par ex, qui ouvrira une popup d'upload du fichier local (classique).
Ensuite, affectes le fichier à un buffer puis encodage en base64.

La syntaxe finale à insérer doit être une balise html avec le type mime :
//affectation d'un type mime par défaut
sMime is string="image/png"
//constitution de la chaîne src
sImgSrc is string=[
<img src="data:[%sMime%];base64,[%sImg64%]">
]


il reste à insérer cette chaîne dans le champ html et l'image apparaît illico.
Bon dev
Sébastien
Message modifié, 15 octobre 2019 - 09:49
#6
Membre enregistré
324 messages
Popularité : +21 (51 votes)
Posté le 15 octobre 2019 - 10:16
Ma question est la suivante, est-il possible de modifier le code du bouton "insérer une image" déjà présent dans le ruban intégré à mon champ de saisie?


Oui c'est possible mais faut modifier le .js de la barre d'outils, chaque redéploiement l'écrase

J'aurais aimé que ce bouton propose à la place la possibilité de parcourir les données locales de l'utilisateur afin que celui ci puisse insérer une image de son ordinateur sans avoir besoin d'uploader son image en amont chez un hébergeur tierce pour ensuite saisir l'url correspondante.


Un champ upload en gros tout simplement.

Ensuite pour l'affichage de l'image, soit on met un "<img src="...."></img>, soit comme dit au dessus il faut encore le fichier en base64 avec la fonciton Encode, et l'insérer dans la source html !

Le gros avantage de la base 64 c'est que l'image est inclut dans le message, donc pas de "fichier" à aller chercher, l'inconvéniant c'est que la source HTML est juste relou à lire quand les images intégés !

Perso j'ai remplacé le champ de saisie html, par TinyMCE, et comme ca il gère tout seul la base64 des images et les copiers TOUT navigateur ^^.
→ Revenir à WEBDEV 2024