[Résolu] Insertion d'une balise BBCode dans un textarea - Problème de crochets par Ludw82 - page 1

Désolé mes pages ne sont pas encore en ligne !
Du coup pour plus de lisibilité j'ai tronqué ma page xHTML car elle est très très longue !

function insertTag(startTag, endTag, textareaId, tagType) {
        var field  = document.getElementById(textareaId); 
        var scroll = field.scrollTop;
        field.focus();
        
        /* === Partie 1 : on récupère la sélection === */
        if (window.ActiveXObject) {
                var textRange = document.selection.createRange();            
                var currentSelection = textRange.text;
        } else {
                var startSelection   = field.value.substring(0, field.selectionStart);
                var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
                var endSelection     = field.value.substring(field.selectionEnd);               
        }
        
        /* === Partie 2 : on analyse le tagType === */
        if (tagType) {
                switch (tagType) {
						case "lien":
								endTag = "</lien>";
								if (currentSelection) { // Il y a une sélection
										if (currentSelection.indexOf("http://") == 0 || currentSelection.indexOf("https://") == 0 || currentSelection.indexOf("ftp://") == 0 || currentSelection.indexOf("www.") == 0) {
												// La sélection semble être un lien. On demande alors le libellé
												var label = prompt("Quel est le libellé du lien ?") || "";
												startTag = "<lien url=\"" + currentSelection + "\">";
												currentSelection = label;
										} else {
												// La sélection n'est pas un lien, donc c'est le libelle. On demande alors l'URL
												var URL = prompt("Quelle est l'url ?");
												startTag = "<lien url=\"" + URL + "\">";
										}
								} else { // Pas de sélection, donc on demande l'URL et le libelle
										var URL = prompt("Quelle est l'url ?") || "";
										var label = prompt("Quel est le libellé du lien ?") || "";
										startTag = "<lien url=\"" + URL + "\">";
										currentSelection = label;                     
								}
						break;
						case "citation":
								endTag = "</citation>";
								if (currentSelection) { // Il y a une sélection
										if (currentSelection.length > 30) { // La longueur de la sélection est plus grande que 30. C'est certainement la citation, le pseudo fait rarement 20 caractères
												var auteur = prompt("Quel est l'auteur de la citation ?") || "";
												startTag = "<citation nom=\"" + auteur + "\">";
										} else { // On a l'Auteur, on demande la citation
												var citation = prompt("Quelle est la citation ?") || "";
												startTag = "<citation nom=\"" + currentSelection + "\">";
												currentSelection = citation;    
										}
								} else { // Pas de selection, donc on demande l'Auteur et la Citation
										var auteur = prompt("Quel est l'auteur de la citation ?") || "";
										var citation = prompt("Quelle est la citation ?") || "";
										startTag = "<citation nom=\"" + auteur + "\">";
										currentSelection = citation;    
								}
						break;
                }
        }
        
        /* === Partie 3 : on insère le tout === */
        if (window.ActiveXObject) {
                textRange.text = startTag + currentSelection + endTag;
                textRange.moveStart("character", -endTag.length - currentSelection.length);
                textRange.moveEnd("character", -endTag.length);
                textRange.select();     
        } else {
                field.value = startSelection + startTag + currentSelection + endTag + endSelection;
                field.focus();
                field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
        } 

        field.scrollTop = scroll;     
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
		<title>(BUZZ) LE MAG</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />	
		<link href="style/structure.css" rel="stylesheet" type="text/css" />
		<link href="style/global.css" rel="stylesheet" type="text/css" />
		<link href="style/BBCode.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/BBCode.js"></script>
    </head>
    <body>
	
							<fieldset>
								<legend>Signature</legend>
								<div class="message_info">
									<strong>Information</strong><br />
									La hauteur d'une signature ne doit pas dépasser 120 pixels.
								</div>
								<div class="textarea_avec_bbcode">
															<table class="tableau_smiley">
							<tr>

								<td><img src="img/smileys/1.gif" alt=":)" title=":)" onclick="insertTag(':)', '', 'textarea_bbcode');" /></td>
								<td><img src="img/smileys/2.gif" alt=":pff:" title=":pff:" /></td>
								<td><img src="img/smileys/3.gif" alt=":snif2:" title=":snif2:" /></td>
								<td><img src="img/smileys/4.gif" alt="0o" title="0o" /></td>
								<td><img src="img/smileys/17.gif" alt=":zzz:" title=":zzz:" /></td>
							</tr>
							<tr>
								<td><img src="img/smileys/5.gif" alt="-_-&quot;" title="-_-&quot;" /></td>
								<td><img src="img/smileys/14.gif" alt="mdr" title=":mdr:" /></td>

								<td><img src="img/smileys/7.gif" alt=":grr3:" title=":grr3:" /></td>
								<td><img src="img/smileys/8.gif" alt=":grr:" title="???" /></td>
								<td><img src="img/smileys/18.gif" alt=":niark:" title=":niark:" /></td>
							</tr>
							<tr>
								<td><img src="img/smileys/9.gif" alt=":grr2:" title=":grr2:" /></td>
								<td><img src="img/smileys/10.gif" alt=";)" title=";)" /></td>
								<td><img src="img/smileys/11.gif" alt="8)" title="8)" /></td>
								<td><img src="img/smileys/12.gif" alt=":lol:" title=":lol:" /></td>

								<td><img src="img/smileys/19.gif" alt="^^" title="^^" /></td>
							</tr>
							<tr>	
								<td><img src="img/smileys/13.gif" alt=":snif:" title=":snif:" /></td>
								<td><img src="img/smileys/6.gif" alt="<3" title="<3" /></td>
								<td><img src="img/smileys/15.gif" alt=":hum:" title=":hum:" /></td>
								<td><img src="img/smileys/16.gif" alt=":grr4:" title=":grr4:" /></td>
							</tr>
						</table>						
						
						<img src="img/BBCode/gras.png" alt="Gras" title="Gras" class="bbcode_bouton" onclick="insertTag('['b']','['/b']','textarea_bbcode');" />

						<img src="img/BBCode/italique.png" alt="Italique" title="Italique" class="bbcode_bouton" />	
						<img src="img/BBCode/souligne.png" alt="Souligné" title="Souligné" class="bbcode_bouton" />
						<img src="img/BBCode/barre.png" alt="Barré" title="Barré" class="bbcode_bouton" />
						<img src="img/BBCode/majuscule.png" alt="Majuscule" title="Majucule" class="bbcode_bouton" />
						<img src="img/BBCode/lien.png" alt="Lien" title="Lien" class="bbcode_bouton" />
						<img src="img/BBCode/liste_puces.png" alt="Liste à puces" title="Liste à puces" class="bbcode_bouton" />
						<img src="img/BBCode/liste_nombres.png" alt="Liste avec nombres" title="Liste avec nombres" class="bbcode_bouton" />
						<img src="img/BBCode/tableau.png" alt="Tableau" title="Tableau" class="bbcode_bouton" />
						<img src="img/BBCode/image.png" alt="Image" title="Image" class="bbcode_bouton" />

						<img src="img/BBCode/video.png" alt="Vidéo Youtube" title="Vidéo Youtube" class="bbcode_bouton" />
						<img src="img/BBCode/citation.png" alt="Citation" title="Citation" class="bbcode_bouton" />
						<img src="img/BBCode/secret.png" alt="Secret" title="Secret" class="bbcode_bouton" style="margin-right: 20px;" /><br />
						<img src="img/BBCode/gauche.png" alt="Aligné à gauche" title="Aligné à gauche" class="bbcode_bouton" />
						<img src="img/BBCode/centre.png" alt="Centré" title="Centré" class="bbcode_bouton" />
						<img src="img/BBCode/droite.png" alt="Aligné à droite" title="Aligné à gauche" class="bbcode_bouton" />
						<img src="img/BBCode/justifie.png" alt="Justifié" title="Justifié" class="bbcode_bouton" style="margin-right: 20px;" />
						<img src="img/BBCode/flottant_gauche.png" alt="Flottant à gauche" title="Flottant à gauche" class="bbcode_bouton" />
						<img src="img/BBCode/flottant_droite.png" alt="Flottant à droite" title="Flottant à droite" class="bbcode_bouton" style="margin-right: 20px;" />

						<img src="img/BBCode/titre1.png" alt="Titre 1" title="Titre 1" class="bbcode_bouton" />
						<img src="img/BBCode/titre2.png" alt="Titre 2" title="Titre 2" class="bbcode_bouton" /><br />
						<img src="img/BBCode/couleurs.png" alt="Couleurs" title="Couleurs" /> 
						<select name="couleurs" id="couleurs">
							<option selected="selected" disabled="disabled">Couleurs</option>
							<option value="rose" class="bg-rose"> </option>
							<option value="rouge" class="bg-rouge"> </option>
							<option value="orange" class="bg-orange"> </option>

							<option value="jaune" class="bg-jaune"> </option>
							<option value="vertc" class="bg-vertc"> </option>
							<option value="vertf" class="bg-vertf"> </option>
							<option value="olive" class="bg-olive"> </option>
							<option value="turquoise" class="bg-turquoise"> </option>
							<option value="bleugris" class="bg-bleugris"> </option>

							<option value="bleu" class="bg-bleuc"> </option>
							<option value="bleu" class="bg-bleuf"> </option>
							<option value="marine" class="bg-marine"> </option>
							<option value="violet" class="bg-violet"> </option>
							<option value="marron" class="bg-marron"> </option>
							<option value="noir" class="bg-noir"> </option>

							<option value="gris" class="bg-gris"> </option>
							<option value="argent" class="bg-argent"> </option>
						</select> 
						<img src="img/BBCode/polices.png" alt="Polices" title="Polices" /> 
						<select name="polices" id="polices">
							<option selected="selected" disabled="disabled">Polices</option>
							<option value="arial">Arial</option>
							<option value="times">Times</option>

							<option value="courrier">Courrier</option>
							<option value="impact">Impact</option>
							<option value="verdana">Verdana</option>
						</select> 
						<img src="img/BBCode/taille.png" alt="Taille" title="Taille" /> 
						<select name="polices" id="polices" style="margin-right: 20px;">
							<option selected="selected" disabled="disabled">Taille</option>
							<option value="ttpetit">Très très petit</option>

							<option value="tpetit">Très petit</option>
							<option value="petit">Petit</option>
							<option value="gros">Gros</option>
							<option value="tgros">Très gros</option>
							<option value="ttgros">Très très gros</option>
						</select>									<textarea name="signature" cols="65" rows="6" id="textarea_bbcode">Ma première signature !!!</textarea><br />

									<div class="apercu_textarea"><p class="position_centre"><input type="button" class="button" value="Aperçu final" /></p></div>
								</div>
							</fieldset>
							<input type="hidden" name="onglet" value="3" />
							<p class="position_centre"><input type="submit" class="submit" value="Modifier ma signature" /></p>					

	</body>
</html>

Ludw82

11 août 2010 à 16:08:16

Bonjour

Ca fait déjà plusieurs jours que je suis ennuyé par une erreur de Javascript !
J'ai lu et appliqué le tuto de Thunderseb concernant l'insertion de balises dans un textarea. Mon problème est que lorsque je souhaite insérer des balises style BBCode (c'est-à-dire avec les crochets) j'ai une belle erreur :

Citation

Erreur : missing ) after argument list
Fichier Source : http://localhost/BUZZ/modifier-membre.php
Ligne : 1, Colonne : 13
Code Source :
insertTag('['b']','['/b']','textarea_bbcode');

On voit bien que des apostrophes se sont rajoutées par magie o_O

car à la base mon code pour insérer une balise c'est :

<img src="img/BBCode/gras.png" alt="Gras" title="Gras" class="bbcode_bouton" onclick="insertTag('[b]','[/b]','textarea_bbcode');" />

J'ai tout essayé (slash, antislash, guillemet) mais rien n'y fait ! Faut dire que je ne m'y connais pas des masses en Javascript !
Après de nombreux tests je suis sûr à 99% que ça vient des crochets puisqu'il suffit que je retire un crochet ou que je les remplace par autre chose pour que ça fonctionne !

Au niveau du script, c'est le même que celui du tuto (je ne l'ai pas encore améliorer avec mes propres fonctions)

restimel

11 août 2010 à 16:49:25

Tu peux donner le code pour reproduire le problème (une page online serait le mieux)?
Car là à part te dire c'est magique :magicien:

, on va pas pouvoir te dire grand chose...
Le seul code que t'as mis ne semble pas avoir de problème.

11 août 2010 à 17:06:57

11 août 2010 à 17:33:23

Dans ton HTML, ligne 53: tu as bien les '

Donc c'est un problème qui vient de la génération de ton code, donc regardes ton code PHP qui génère cette ligne.

11 août 2010 à 18:01:14

C'est exact j'avais pas pensé à regarder du côté de la génération du code xHTMl ! J'ai bien fait de ne pas copier/coller le code source de la page non-généré !

Bon je pense que ça vient du moteur de template (gagaTemplate), reste à trouver où et pourquoi ...

Merci beaucoup pour l'aide !

PS : le script marche effectivement très bien lorsque je ne met pas de PHP !

Edit : Ca vient effectivement de gagaTemplate qui transforme les crochets (et les accollades) en guillemet ... Du coup je suis obligé de mettre leur code HTML !

Insertion d'une balise BBCode dans un textarea

Problème de crochets

Insertion d'une balise BBCode dans un textarea

Supprimer

Modérer

Signaler le message aux modérateurs