insertion lien dans textarea

Version imprimable

22/12/2005, 08h37
licorne

insertion lien dans textarea

Bonjour,

Je cherche à insérer un lien dans une textarea.
L'utilisateur renseignerait une zone input texte.
Puis après clic sur OK la zone input est transfomée en lien et insérée dans une textarea.

Quelqu'un a-t'il une idée.

Merci :wink:
22/12/2005, 09h06
SpaceFrog

pourquoi un textarea ?
tu cherches les complications ??
parceque c'est pas possible, utilise une autre balise ...
22/12/2005, 09h59
licorne

Citation:

Envoyé par SpaceFrog

pourquoi un textarea ?
tu cherches les complications ??
parceque c'est pas possible, utilise une autre balise ...

J'utilise un textarea car l'utilisateur doit pouvoir saisir un texte long et il doit pouvoir y intégrer des lien.
Qu'entends-tu par c'est pas possible ? Il est possible d'insérer une image.
ou d'initialiser la textarea avec un lien.
22/12/2005, 10h19
SpaceFrog

question à deux sous ...

comment il est saisi le lien ?

juste www.blabalb.com ???

pour le texte no prob
22/12/2005, 10h29
licorne

Je pensais lui faire saisir le lien dans un input de type texte.
22/12/2005, 10h42
franculo_caoulene

Salut,

Regarde comment fonctionne les éditeurs en ligne ou richtextbox comme FCKEditor ou HTMLArea (les noms de mémoire) et fais comme eux.

alors utilises plutot un div et rensiegne le innerHTML come ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type='text/javascript' >
function filldiv(){
var monlien="\<a href=http:\/\/\""+document.getElementById('saisiewww').value+"\"+\/>"+document.getElementById('saisielien').value+"\<\/a\>"
document.getElementById('result').innerHTML=monlien;
}
</script>
</head>
 
<body>
texte du lien <input id='saisielien' type='texte'/></br>
adresse<input id='saisiewww' type='texte'/></br>
<input type='button' onclick='filldiv()' value='ecrire lien' />
<div id="result"></div>
</body>
</html>

Citation:
Envoyé par SpaceFrog
alors utilises plutot un div et rensiegne le innerHTML come ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script type='text/javascript' > function filldiv(){ var monlien="\<a href=http:\/\/\""+document.getElementById('saisiewww').value+"\"+\/>"+document.getElementById('saisielien').value+"\<\/a\>" document.getElementById('result').innerHTML=monlien; } </script> </head> <body> texte du lien <input id='saisielien' type='texte'/></br> adresse<input id='saisiewww' type='texte'/></br> <input type='button' onclick='filldiv()' value='ecrire lien' /> <div id="result"></div> </body> </html>
Le problème c'est que l'utilisateur doit écrire un texte qui peut être assez long (max 1000 caractères) et y introduire des liens s'il le désire.
Or dans ton exemple il ne peut pas saisir de texte dans la div.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type='text/javascript' >
function filldiv(){
var monlien="&nbsp;\<a href=http:\/\/\""+document.getElementById('saisiewww').value+"\"+\/>"+document.getElementById('saisielien').value+"\<\/a\>"
document.getElementById('result').innerHTML+=monlien;
}
</script>
</head>
 
<body>
texte du lien<input id='saisielien' type='texte'/><br/>
adresse du lien<input id='saisiewww' type='texte'/><br/>
<input type='button' onclick='filldiv()' value='ecrire lien' />
<div contenteditable id="result" style="border:inset 2px silver;" >&nbsp</div>
</body>
</html>

22/12/2005, 11h57
licorne

Ok ça fonctionne très bien.
Merci SpaceFrog. :wink:
Une dernière question : comment bloquer le redimensionnement de la div ?
22/12/2005, 13h29
SpaceFrog

dans le style du div overflow:auto si tu veux un scroll ou hidden si tu n'en veux pas
22/12/2005, 14h00
licorne

Encore merci. :)

Autre et j'espère dernière question : je souhaite récupérer le contenu de la div afin de l'insérer dans une table mysql.

Après validation de la saisie de la page je la réaffiche afin de mettre à jour la base et a variable $_POST[result] est vide.
Est-ce que la div se comporte comme n'importe quel input ?

non le div n'est pas un élément de formulaire...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<script type='text/javascript' >
function filldiv(){
var monlien="&nbsp;\<a href=http:\/\/\""+document.getElementById('saisiewww').value+"\"+\/>"+document.getElementById('saisielien').value+"\<\/a\>"
document.getElementById('result').innerHTML+=monlien;
}
 
function hiddendiv(){
document.getElementById('contenudiv').value=document.getElementById('result').innerHTML;
}
</script>
</head>
 
<body>
<form action="...." onsubmit="hiddendiv()" />
texte du lien<input id='saisielien' type='texte'/><br/>
adresse du lien<input id='saisiewww' type='texte'/><br/>
<input type='button' onclick='filldiv()' value='ecrire lien' />
<div contenteditable id="result" style="border:inset 2px silver;" >&nbsp</div>
<input type="hidden" name="contenudiv" id="contenudiv" />
</form>
</body>
</html>

22/12/2005, 15h56
licorne

Je rencontre une nouvelle difficulté :( :
1- L'utilisateur peut taper le texte au km sans retour ligne.
2- Quand je fais un retour ligne l'interval est double.

Peut-être que la soluce se trouve sur la fenêtre dans laquelle je tape ce texte avec des bbcodes ?
22/12/2005, 16h01
SpaceFrog

arf normal un retour ligne dans un div c'est <br/>

pas évident ...
est-ce qu'un bouton d'insertion de retour ligne peut te convenir ?

sinon tapes directement <br/> dans le div ça te feras un retour ligne :wink:
22/12/2005, 17h09
licorne

Citation:

Envoyé par SpaceFrog

arf normal un retour ligne dans un div c'est <br/>

pas évident ...
est-ce qu'un bouton d'insertion de retour ligne peut te convenir ?

sinon tapes directement <br/> dans le div ça te feras un retour ligne :wink:

Merci beaucoup SpaceFrog.
Maintenant ça va aller, je vais me débrouiller.
:wink:

Bonne soirée.