insertion lien dans textarea

**licorne** · 22/12/2005, 08h37

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

**SpaceFrog** · 22/12/2005, 09h06

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

**licorne** · 22/12/2005, 09h59

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.

**SpaceFrog** · 22/12/2005, 10h19

question à deux sous ...

comment il est saisi le lien ?

juste www.blabalb.com ???

pour le texte no prob

**licorne** · 22/12/2005, 10h29

Je pensais lui faire saisir le lien dans un input de type texte.

**franculo_caoulene** · 22/12/2005, 10h42

Salut,

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

**SpaceFrog** · 22/12/2005, 10h45

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**licorne** · 22/12/2005, 11h01

Envoyé par SpaceFrog

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 22/12/2005, 11h26

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**licorne** · 22/12/2005, 11h57

Ok ça fonctionne très bien.
Merci SpaceFrog.

Une dernière question : comment bloquer le redimensionnement de la div ?

**SpaceFrog** · 22/12/2005, 13h29

dans le style du div overflow:auto si tu veux un scroll ou hidden si tu n'en veux pas

**licorne** · 22/12/2005, 14h00

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 ?

**SpaceFrog** · 22/12/2005, 14h16

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**licorne** · 22/12/2005, 15h56

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 ?

**SpaceFrog** · 22/12/2005, 16h01

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

**licorne** · 22/12/2005, 17h09

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

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

Bonne soirée.

insertion lien dans textarea

JavaScript

Discussions similaires

Partager

Partager