Bbcode js ou jqury

Résolu/Fermé
korka - 16 déc. 2018 à 15:52
 korka - 19 déc. 2018 à 17:34
Bonjour,

j'ai ce code

	  <nav id="global-nouveau-formulaire-button"><ul>
	  <li><button type="button" class="icon-button-gras" onclick="insertTag('<gras>', '</gras>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-souligner" onclick="insertTag('<souligner>', '</souligner>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-italique" onclick="insertTag('<italique>', '</italique>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-barrer" onclick="insertTag('<barrer>', '</barrer>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-gauche" onclick="insertTag('<gauche>', '</gauche>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-centrer" onclick="insertTag('<centrer>', '</centrer>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-droite" onclick="insertTag('<droite>', '</droite>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-justifier" onclick="insertTag('<justifier>', '</justifier>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-puce" onclick="insertTag('<puce>', '</puce>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-numero" onclick="insertTag('<numero>', '</numero>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-lien" onclick="insertTag('<lien>', '</lien>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-arobase" onclick="insertTag('<mail>', '</mail>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-secret" onclick="insertTag('<secret>', '</secret>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-tableau poplight" data-idmodal="tableau" onclick=""></button></li>
	  <li><button type="button" class="icon-button-video" onclick="insertTag('<video>', '</video>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-image" onclick="insertTag('<image>', '</image>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-attention" onclick="insertTag('<attention>', '</attention>', 'textarea')"></button></li>
	  <li><button type="button" type="button" class="icon-button-question" onclick="insertTag('<question>', '</question>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-information" onclick="insertTag('<information>', '</information>', 'textarea')"></button></li>
	  <li><button type="button" class="icon-button-erreur" onclick="insertTag('<erreur>', '</erreur>', 'textarea')"></button></li>
	  </ul></nav>



le but que j'aimerais lorsqu'on clique sur gras il met la balise blabblabla dans le code

<textarea id="global-nouveau-formulaire-textarea" data-autoresize spellcheck="false" placeholder="nouveau message" ></textarea>


j'ai mis le code jquery ;)

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:', '>_<', ':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, '&');
		field = field.replace(/</g, '<').replace(/>/g, '>');
		field = field.replace(/\n/g, '<br />').replace(/\t/g, '        ');
		
		field = field.replace(/<gras>([\s\S]*?)<\/gras>/g, '<strong>$1</strong>');
		field = field.replace(/<italique>([\s\S]*?)<\/italique>/g, '<em>$1</em>');
		field = field.replace(/<lien>([\s\S]*?)<\/lien>/g, '<a href="$1">$1</a>');
		field = field.replace(/<lien url="([\s\S]*?)">([\s\S]*?)<\/lien>/g, '<a href="$1" title="$2">$2</a>');
		field = field.replace(/<image>([\s\S]*?)<\/image>/g, '<img src="$1" alt="Image" />');
		field = field.replace(/<citation nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>');
		field = field.replace(/<citation lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>');
		field = field.replace(/<citation nom=\"(.*?)\" lien=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$2">Citation : $1</a></span><div class="citation2">$3</div>');
		field = field.replace(/<citation lien=\"(.*?)\" nom=\"(.*?)\">([\s\S]*?)<\/citation>/g, '<br /><span class="citation"><a href="$1">Citation : $2</a></span><div class="citation2">$3</div>');
		field = field.replace(/<citation>([\s\S]*?)<\/citation>/g, '<br /><span class="citation">Citation</span><div class="citation2">$1</div>');
		field = field.replace(/<taille valeur=\"(.*?)\">([\s\S]*?)<\/taille>/g, '<span class="$1">$2</span>');
		
		for (var i=0, c=smiliesName.length; i<c; i++) {
			field = field.replace(new RegExp(" " + smiliesName[i] + " ", "g"), " <img src=\"" + smiliesPath + smiliesUrl[i] + "\" alt=\"" + smiliesUrl[i] + "\" /> ");
		}
		
		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", "../preview.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("string=" + content);
}
	
	


et
<?php 

function parseZCode($content) {
	// Parsage des balises
	$zcode = array(  
		'`<italique>(.+)</italique>`isU',  
		'`<gras>(.+)</gras>`isU',
		'`<barre>(.+)</barre>`isU',
		'`<lien>(.+)</lien>`isU',
		'`<lien url="(.+)">(.+)</lien>`isU',
		'`<image>(.+)</image>`isU',
		'`<citation>(.+)</citation>`isU',
		'`<citation nom="(.+)">(.+)</citation>`isU',
		'`<citation lien="(.+)">(.+)</citation>`isU',
		'`<taille valeur="(.+)">(.+)</taille>`isU'
	);  
	
	$html = array(  
		'<em>$1</em>',  
		'<strong>$1</strong>',
		'<del>$1</del>', 
		'<a href="$1">$1</a>',
		'<a href="$1">$2</a>',
		'<img src="$1" alt="Image utilisateur" />',
		'<br /><span class="citation">Citation</span><div class="citation2">$1</div>',
		'<br /><span class="citation">Citation : $1</span><div class="citation2">$2</div>',
		'<br /><span class="citation"><a href="$1">Citation</a></span><div class="citation2">$2</div>',
		'<span class="$1">$2</span>'
	); 
	
	$content = htmlspecialchars($content, ENT_QUOTES);
	$content = preg_replace($zcode, $html, $content);
	
	// parsage des smilies
	$smiliesName = array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '>_<', ':pirate:', ':zorro:', ':honte:', ':soleil:', ':\'\\(', ':waw:', ':\\)', ':D', ';\\)', ':p', ':lol:', ':euh:', ':\\(', ':o', ':colere2:', 'o_O', '\\^\\^', ':\\-�');
	$smiliesUrl  = 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');
	$smiliesPath = "http://www.siteduzero.com/Templates/images/smilies/";
	
	for ($i = 0, $c = count($smiliesName); $i < $c; $i++) {
		$content = preg_replace('`' . $smiliesName[$i] . '`isU', '<img src="' . $smiliesPath . $smiliesUrl[$i] . '" alt="smiley" />', $content);
	}
	
	// Rtours � la ligne
	$content = preg_replace('`\n`isU', '<br />', $content); 
	
	return $content;

}

if (isset($_POST["string"])) {
	$content = $_POST["string"];
	
	if (get_magic_quotes_gpc()) {
		$content = stripslashes($content);
	}

	echo parseZCode($content); // Ecriture du contenu pars�. 
}
?>

mais quand je clique sur gras , il ne mets pas les balise bbcode dans le texterea

merci d'avance




Configuration: Windows / Chrome 70.0.3538.110

2 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
16 déc. 2018 à 19:49
Bonjour,

Commence par regarder dans la console de ton navigateur si tu n'as pas des erreurs...
(tu peux aussi ajouter quelques "console.log" dans ton code js pour y afficher les variables (voir si ce qu'elles contiennent te semble conforme).


Tu sembles également utiliser de l'ajax dans ton code ( du xmlhttprequest).
Pour bien le debuguer il te faut utiliser la console de firefox ou installer le plugin ajax debuger sur chrome.


0
j'ai rien piger à ta réponse , désoler ;)
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
17 déc. 2018 à 09:52
Dans ce cas, commence par apprendre ce qu'est (et comment utiliser) la console de ton navigateur
https://developer.mozilla.org/fr/docs/Outils/Console_JavaScript
https://developers.google.com/web/tools/chrome-devtools/javascript/
0
il n'y a pas d'erreur dans ma console
0
c'est bon j'ai trouvé un autre code ;)
0