Partage

Bbcode ne fonctionne pas

je me demande si mon hébergeur en est la cause

9 mars 2010 à 16:33:52

Bonjour cher ami,
je viens vous poser mon problème, j'ai lu et relu le tuto d'insertion de lien dans du html.
Et lorsque je le teste sur mon pc sa marche nickel.
Mais lorsque je le fais en ligne la balise marque bien de part et d'autre la selection mais après validation, rien aucune conversion.
Je voudrais donc savoir si l'erreur vient de mon serveur ou de moi je vous montre mon code JS

<secret>
<script type="text/javascript">
<!--
function insertTag(startTag, endTag, textareaId, tagType) {
	var field = document.getElementById(textareaId);
	var scroll = field.scrollTop;
	field.focus();
	
	
	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);
	}
	
	if (tagType) {
		switch (tagType) {
			case "lien":
					endTag = "</lien>";
					if (currentSelection) {
							if (currentSelection.indexOf("http://") == 0 || currentSelection.indexOf("https://") == 0 || currentSelection.indexOf("ftp://") == 0 || currentSelection.indexOf("www.") == 0) {
									var label = prompt("Quel est le libellé du lien ?") || "";
									startTag = "<lien url=\"" + currentSelection + "\">";
									currentSelection = label;
							} else {
									var URL = prompt("Quelle est l'url ?");
									startTag = "<lien url=\"" + URL + "\">";
							}
					} else {
							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) {
							if (currentSelection.length > 30) {
									var auteur = prompt("Quel est l'auteur de la citation ?") || "";
									startTag = "<citation nom=\"" + auteur + "\">";
							} else {
									var citation = prompt("Quelle est la citation ?") || "";
									startTag = "<citation nom=\"" + currentSelection + "\">";
									currentSelection = citation;    
							}
					} else {
							var auteur = prompt("Quel est l'auteur de la citation ?") || "";
							var citation = prompt("Quelle est la citation ?") || "";
							startTag = "<citation nom=\"" + auteur + "\">";
							currentSelection = citation;    
					}
			break;	
		}
	}
	
	if (window.ActiveXObject) {
		textRange.text = startTag + currentSelection + endTag;
		textRange.moveStart('character', -endTag.length-currentSelection.length);
		textRange.moveEnd('character', -endTag.length);
		textRange.select();  
	} else { // Ce n'est pas IE
		field.value = startSelection + startTag + currentSelection + endTag + endSelection;
		field.focus();
		field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
	}  
	
	field.scrollTop = scroll;   
}

function preview(textareaId, previewDiv) {
	var field = textareaId.value;
	if (document.getElementById('previsualisation').checked && field) {
		
		var smiliesName = new Array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '&gt;_&lt;', ':pirate:', ':zorro:', ':honte:', ':soleil:', ':\'\\(', ':waw:', ':\\)', ':D', ';\\)', ':p', ':lol:', ':euh:', ':\\(', ':o', ':colere2:', 'o_O', '\\^\\^', ':\\-°');
		var smiliesUrl  = new Array('magicien.png', 'angry.gif', 'diable.png', 'ange.png', 'ninja.png', 'pinch.png', 'pirate.png', 'zorro.png', 'rouge.png', 'soleil.png', 'pleure.png', 'waw.png', 'smile.png', 'heureux.png', 'clin.png', 'langue.png', 'rire.gif', 'unsure.gif', 'triste.png', 'huh.png', 'mechant.png', 'blink.gif', 'hihi.png', 'siffle.png');
		var smiliesPath = "http://www.siteduzero.com/Templates/images/smilies/";
	
		field = field.replace(/&/g, '&amp;');
		field = field.replace(/</g, '&lt;').replace(/>/g, '&gt;');
		field = field.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
		
		field = field.replace(/&lt;barre&gt;([\s\S]*?)&lt;\/barre&gt;/g, '<del>$1</del>');
		field = field.replace(/&lt;souligne&gt;([\s\S]*?)&lt;\/souligne&gt;/g, '<u>$1</u>');
		field = field.replace(/&lt;gras&gt;([\s\S]*?)&lt;\/gras&gt;/g, '<strong>$1</strong>');
		field = field.replace(/&lt;italique&gt;([\s\S]*?)&lt;\/italique&gt;/g, '<em>$1</em>');
		field = field.replace(/&lt;lien&gt;([\s\S]*?)&lt;\/lien&gt;/g, '<a href="$1">$1</a>');
		field = field.replace(/&lt;lien url="([\s\S]*?)"&gt;([\s\S]*?)&lt;\/lien&gt;/g, '<a href="$1" title="$2">$2</a>');
		field = field.replace(/&lt;image&gt;([\s\S]*?)&lt;\/image&gt;/g, '<img src="$1" alt="Image" />');
		field = field.replace(/&lt;citation nom=\"(.*?)\"&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>');
		field = field.replace(/&lt;citation lien=\"(.*?)\"&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>');
		field = field.replace(/&lt;citation nom=\"(.*?)\" lien=\"(.*?)\"&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span class="citation"><a href="$2">Citation : $1</a></span><div class="citation2">$3</div>');
		field = field.replace(/&lt;citation lien=\"(.*?)\" nom=\"(.*?)\"&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span class="citation"><a href="$1">Citation : $2</a></span><div class="citation2">$3</div>');
		field = field.replace(/&lt;citation&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span div="quote">Citation</span><div class="citation2">$1</div>');
		field = field.replace(/&lt;taille valeur=\"(.*?)\"&gt;([\s\S]*?)&lt;\/taille&gt;/g, '<span class="$1">$2</span>');
		field = field.replace(/&lt;couleur valeur=\"(.*?)\"&gt;([\s\S]*?)&lt;\/couleur&gt;/g, '<span class="$1">$2</span>');
		
		for (var i=0, c=smiliesName.length; i<c; i++) {
			field = field.replace(new RegExp(" " + smiliesName[i] + " ", "g"), "&nbsp;<img src=\"" + smiliesPath + smiliesUrl[i] + "\" alt=\"" + smiliesUrl[i] + "\" />&nbsp;");
		}
		
		document.getElementById(previewDiv).innerHTML = field;
	}
}

function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest();
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}


function view(textareaId, viewDiv){
	var content = encodeURIComponent(document.getElementById(textareaId).value);
	var xhr = getXMLHttpRequest();
	
	if (xhr && xhr.readyState != 0) {
		xhr.abort();
		delete xhr;
	}
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200){
			document.getElementById(viewDiv).innerHTML = xhr.responseText;
		} else if (xhr.readyState == 3){
			document.getElementById(viewDiv).innerHTML = "<div style=\"text-align: center;\">Chargement en cours...</div>";
		}
	}
	
	xhr.open("POST", "view.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("string=" + content);
}</secret>

voilà mon code html

<secret>			<p>
<input type="button" value="Barré" onclick="insertTag('<barre>', '</barre>', 'textarea')" />
  <input type="button" value="Souligné" onclick="insertTag('&lt;souligne&gt;', '&lt;/souligne&gt;', 'textarea')" />
<input type="button" value="Gras" onclick="insertTag('&lt;gras&gt;', '&lt;/gras&gt;', 'textarea')" />
	<input type="button" value="Italique" onclick="insertTag('&lt;italique&gt;', '&lt;/italique&gt;', 'textarea')" />
			<input type="button" value="Lien" onclick="insertTag('', '', 'textarea', 'lien')" />
	<input type="button" value="Image" onclick="insertTag('&lt;image&gt;', '&lt;/image&gt;', 'textarea')" />
	<input type="button" value="Citation" onclick="insertTag('', '', 'textarea', 'citation')" />
				
				<select onchange="insertTag('&lt;taille valeur=&quot;' + this.options[this.selectedIndex].value + '&quot;&gt;', '&lt;/taille&gt;', 'textarea');">
					<option value="none" class="selected" selected="selected">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>
                
                <select onchange="insertTag('<couleur valeur=&quot;' + this.options[this.selectedIndex].value + '&quot;&gt;', '&lt;/couleur&gt;', 'textarea');">
					<option value="none" class="selected" selected="selected">Couleur</option>
					<option value="noir"><span style="color:#000024">Noir</span></option>
					<option value="rouge" style="color:#F00;">Rouge</option>
					<option value="bleu" style="color: #00F;">Bleu</option>
					<option value="vert" style="color: #007F00;">Vert</option>
					<option value="marron" style="color: #A00;" >Marron</option>
					<option value="rose" style="color: #F0F">Rose</option>
                    <option value="violet" style="color: #D49FFF;" >Violet</option>
                    <option value="jaune" style="color:#FF0" >Jaune</option> 
				</select> 
				
				<img src="http://users.teledisnet.be/web/mde28256/smiley/smile.gif" alt=":)" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://users.teledisnet.be/web/mde28256/smiley/unsure2.gif" alt=":euh:" onclick="insertTag('  ', '', 'textarea');" />
			</p>
			
			<p>
				<input name="previsualisation" type="checkbox" id="previsualisation" value="previsualisation" />
				<label for="previsualisation">Prévisualisation automatique</label>
			</p>
			
		</div>
		
		<textarea onkeyup="preview(this, 'previewDiv');" onselect="preview(this, 'previewDiv');" id="textarea" cols="50" rows="10"></textarea>
		
		<div id="previewDiv"></div>
		
		<p>
			<input type="button" value="Visualiser" onclick="view('textarea','viewDiv');" />
		</p>
		
		<div id="viewDiv"></div>
	</form></secret>

Merci de bien vouloir m'aider

Golmote

9 mars 2010 à 17:06:54

Euh "Validation" signifiant prévisualisation ou soumission du formulaire ?

Car dans le deuxième cas, c'est côté PHP que s'effectue la "conversion".

Claviero

9 mars 2010 à 17:28:04

Je remets le code html

<body>
<form method="post" action="postok.php?action=repondre&amp;t=<?php echo $topic ?>" name="formulaire">
 
<fieldset><legend>Mise en forme</legend>
<input type="button" id="gras" name="gras" value="Gras" onClick="insertTag('<gras>', '</gras>', 'message')" />
<input type="button" id="italic" name="italic" value="Italic" onClick="insertTag('<italic>', '</italic>', 'message')" />
<input type="button" id="souligné" name="souligné" value="Souligné" onClick="insertTag('<underline>', '</underline>', 'message')" />
<input type="button" id="lien" name="lien" value="Lien" onClick="insertTag('', '', 'message', 'lien')" />
<select onchange="insertTag('<taille valeur=&quot;' + this.options[this.selectedIndex].value + '&quot;>', '</taille>', 'message');">
	<option value="none" class="selected" selected="selected">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>
<select onchange="insertTag('<color valeur=&quot;' + this.options[this.selectedIndex].value + '&quot;>', '</color>', 'message');">
	<option value="none" class="selected" selected="selected">Couleur</option>
	<option value="black">Noir</option>
	<option value="red">Rouge</option>
	<option value="blue">Bleu</option>
	<option value="brown">Marron</option>
	<option value="green">Vert</option>
	<option value="orange">Orange</option>
</select>
<img src="./images/smileys/heureux.gif" title="heureux" alt="heureux" onClick="insertTag('  ', 'lol', 'message');" />
<img src="./images/smileys/lol.gif" title="lol" alt="lol" onClick="insertTag(' xD ', 'rire', 'message');" />
<img src="./images/smileys/triste.gif" title="triste" alt="triste" onClick="insertTag(' := ', 'ok', 'message');" />
<img src="./images/smileys/cool.gif" title="cool" alt="cool" onClick="insertTag('', '', 'message');" />
<img src="./images/smileys/rire.gif" title="rire" alt="rire" onClick="insertTag('^^', '', 'message');" />
<img src="./images/smileys/confus.gif" title="confus" alt="confus" onClick="insertTag('**', '', 'message');" />
<img src="./images/smileys/choc.gif" title="choc" alt="choc" onClick="insertTag('==', '', 'message');" />
<img src="./images/smileys/question.gif" title="?" alt="?" onClick="insertTag('Hh', '', 'message');" />
<img src="./images/smileys/exclamation.gif" title="!" alt="!" onClick="insertTag('_(', '', 'message');" /></fieldset>

<fieldset><legend>Message</legend><textarea cols="80" rows="8" id="message" name="message"></textarea></fieldset>
<input name="previsualisation" type="checkbox" id="previsualisation" value="previsualisation" />
<label for="previsualisation">Prévisualisation automatique</label>
<input type="submit" name="submit" value="Envoyer" />
<input type="reset" name = "Effacer" value = "Effacer"/>
<a href="./forum.php"> <input type="button" value="je ne poste plus" /> </a>
</p></form></body>

et revoici le code JavaScritp

<script type="text/javascript">
<!--
function insertTag(startTag, endTag, textareaId, tagType) {
	var field = document.getElementById(textareaId);
	var scroll = field.scrollTop;
	field.focus();
	
	
	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);
	}
	
	if (tagType) {
		switch (tagType) {
			case "lien":
					endTag = "</lien>";
					if (currentSelection) {
							if (currentSelection.indexOf("http://") == 0 || currentSelection.indexOf("https://") == 0 || currentSelection.indexOf("ftp://") == 0 || currentSelection.indexOf("www.") == 0) {
									var label = prompt("Quel est le libellé du lien ?") || "";
									startTag = "<lien url=\"" + currentSelection + "\">";
									currentSelection = label;
							} else {
									var URL = prompt("Quelle est l'url ?");
									startTag = "<lien url=\"" + URL + "\">";
							}
					} else {
							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) {
							if (currentSelection.length > 30) {
									var auteur = prompt("Quel est l'auteur de la citation ?") || "";
									startTag = "<citation nom=\"" + auteur + "\">";
							} else {
									var citation = prompt("Quelle est la citation ?") || "";
									startTag = "<citation nom=\"" + currentSelection + "\">";
									currentSelection = citation;    
							}
					} else {
							var auteur = prompt("Quel est l'auteur de la citation ?") || "";
							var citation = prompt("Quelle est la citation ?") || "";
							startTag = "<citation nom=\"" + auteur + "\">";
							currentSelection = citation;    
					}
			break;	
		}
	}
	
	if (window.ActiveXObject) {
		textRange.text = startTag + currentSelection + endTag;
		textRange.moveStart('character', -endTag.length-currentSelection.length);
		textRange.moveEnd('character', -endTag.length);
		textRange.select();  
	} else { // Ce n'est pas IE
		field.value = startSelection + startTag + currentSelection + endTag + endSelection;
		field.focus();
		field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
	}  
	
	field.scrollTop = scroll;   
}

function preview(textareaId, previewDiv) {
	var field = textareaId.value;
	if (document.getElementById('previsualisation').checked && field) {
		
		var smiliesName = new Array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '&gt;_&lt;', ':pirate:', ':zorro:', ':honte:', ':soleil:', ':\'\\(', ':waw:', ':\\)', ':D', ';\\)', ':p', ':lol:', ':euh:', ':\\(', ':o', ':colere2:', 'o_O', '\\^\\^', ':\\-°');
		var smiliesUrl  = new Array('magicien.png', 'angry.gif', 'diable.png', 'ange.png', 'ninja.png', 'pinch.png', 'pirate.png', 'zorro.png', 'rouge.png', 'soleil.png', 'pleure.png', 'waw.png', 'smile.png', 'heureux.png', 'clin.png', 'langue.png', 'rire.gif', 'unsure.gif', 'triste.png', 'huh.png', 'mechant.png', 'blink.gif', 'hihi.png', 'siffle.png');
		var smiliesPath = "http://www.siteduzero.com/Templates/images/smilies/";
	
		field = field.replace(/&/g, '&amp;');
		field = field.replace(/</g, '&lt;').replace(/>/g, '&gt;');
		field = field.replace(/\n/g, '<br />').replace(/\t/g, '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');
		
		field = field.replace(/&lt;barre&gt;([\s\S]*?)&lt;\/barre&gt;/g, '<del>$1</del>');
		field = field.replace(/&lt;souligne&gt;([\s\S]*?)&lt;\/souligne&gt;/g, '<u>$1</u>');
		field = field.replace(/&lt;gras&gt;([\s\S]*?)&lt;\/gras&gt;/g, '<strong>$1</strong>');
		field = field.replace(/&lt;italique&gt;([\s\S]*?)&lt;\/italique&gt;/g, '<em>$1</em>');
		field = field.replace(/&lt;lien&gt;([\s\S]*?)&lt;\/lien&gt;/g, '<a href="$1">$1</a>');
		field = field.replace(/&lt;lien url="([\s\S]*?)"&gt;([\s\S]*?)&lt;\/lien&gt;/g, '<a href="$1" title="$2">$2</a>');
		field = field.replace(/&lt;image&gt;([\s\S]*?)&lt;\/image&gt;/g, '<img src="$1" alt="Image" />');
		field = field.replace(/&lt;citation nom=\"(.*?)\"&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>');
		field = field.replace(/&lt;citation lien=\"(.*?)\"&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>');
		field = field.replace(/&lt;citation nom=\"(.*?)\" lien=\"(.*?)\"&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span class="citation"><a href="$2">Citation : $1</a></span><div class="citation2">$3</div>');
		field = field.replace(/&lt;citation lien=\"(.*?)\" nom=\"(.*?)\"&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span class="citation"><a href="$1">Citation : $2</a></span><div class="citation2">$3</div>');
		field = field.replace(/&lt;citation&gt;([\s\S]*?)&lt;\/citation&gt;/g, '<br /><span div="quote">Citation</span><div class="citation2">$1</div>');
		field = field.replace(/&lt;taille valeur=\"(.*?)\"&gt;([\s\S]*?)&lt;\/taille&gt;/g, '<span class="$1">$2</span>');
		field = field.replace(/&lt;couleur valeur=\"(.*?)\"&gt;([\s\S]*?)&lt;\/couleur&gt;/g, '<span class="$1">$2</span>');
		
		for (var i=0, c=smiliesName.length; i<c; i++) {
			field = field.replace(new RegExp(" " + smiliesName[i] + " ", "g"), "&nbsp;<img src=\"" + smiliesPath + smiliesUrl[i] + "\" alt=\"" + smiliesUrl[i] + "\" />&nbsp;");
		}
		
		document.getElementById(previewDiv).innerHTML = field;
	}
}

function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest();
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}


function view(textareaId, viewDiv){
	var content = encodeURIComponent(document.getElementById(textareaId).value);
	var xhr = getXMLHttpRequest();
	
	if (xhr && xhr.readyState != 0) {
		xhr.abort();
		delete xhr;
	}
	
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4 && xhr.status == 200){
			document.getElementById(viewDiv).innerHTML = xhr.responseText;
		} else if (xhr.readyState == 3){
			document.getElementById(viewDiv).innerHTML = "<div style=\"text-align: center;\">Chargement en cours...</div>";
		}
	}
	
	xhr.open("POST", "view.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("string=" + content);
}

//-->
</script>

Merci de me dire ou porter la correction

Golmote

9 mars 2010 à 17:31:58

C'est pas en relisant le code qu'on va savoir ce que tu entends par "Validation", si ?

Claviero

9 mars 2010 à 17:34:57

ok,je redis mon problème donc.
je veux que lorsque mon texte apparait sur mon forum le bbcode et les différents mises en forme apparaissent aussi sur le site, chose qui n'est pas le cas. sa marche avec mon navigateur, mais pas sur le serveur gratuit. Merci

Golmote

9 mars 2010 à 17:36:11

Citation : Golmote

c'est côté PHP que s'effectue la "conversion".

Claviero

9 mars 2010 à 17:40:22

lol suis vraiment

puis je savoir comment ecrire ce bout de code et aussi comment l'appeler.
Merci