[Résolu] Bouton de visualisation du tuto de Thunderseb - Bouton de visualisation du tuto de Thunderseb par Betzero - page 1

Bonjour, c'est mon deuxième message sur le site du zéro mais ça fait longtemps que j'étudie le tuto de Thunderseb : Insertion de balises dans une zone de texte. Le zcode s'insert bien dans le textarea grace aux scripts javascripts. Pour la prévisualisation, ça marche parfaitement bien mais la visualisation, c'est une autre histoire. Ma page de formulaire est très assez simple :

<script type="text/javascript" src="zcode.js"></script>
<form method="post" action="postok.php?action=nouveautopic&amp;f=<?php echo $forum ?>" name="formulaire">
 
<fieldset><legend>Titre</legend>
<input type="text" size="80" id="titre" name="titre" /></fieldset>
 
<fieldset><legend>Mise en forme</legend>
			<img class="pointer" src="http://www.siteduzero.com/Templates/images/designs/2/zcode/fr/zcode_gras.png" onclick="insertTag('&lt;gras&gt;', '&lt;/gras&gt;', 'textarea')" />
				<img class="pointer" src="http://www.siteduzero.com/Templates/images/designs/2/zcode/zcode_italique.png" onclick="insertTag('&lt;italique&gt;', '&lt;/italique&gt;', 'textarea')" />
				<img class="pointer" src="http://www.siteduzero.com/Templates/images/designs/2/zcode/fr/zcode_souligne.png" onclick="insertTag('&lt;souligne&gt;', '&lt;/souligne&gt;', 'textarea')" />
				<img class="pointer" src="http://www.siteduzero.com/Templates/images/designs/2/zcode/fr/zcode_barre.png" onclick="insertTag('&lt;barre&gt;', '&lt;/barre&gt;', 'textarea')" />	
				<img class="pointer" src="http://www.siteduzero.com/Templates/images/designs/2/zcode/zcode_lien.png" onclick="insertTag('', '', 'textarea', 'lien')" />
				<img class="pointer" src="http://www.siteduzero.com/Templates/images/designs/2/zcode/zcode_image.png" onclick="insertTag('&lt;image&gt;', '&lt;/image&gt;', 'textarea')" />
				<img class="pointer" src="http://www.siteduzero.com/Templates/images/designs/2/zcode/zcode_video.png" onclick="insertTag('&lt;video&gt;', '&lt;/video&gt;', 'textarea')" />
				<img class="pointer" src="http://www.siteduzero.com/Templates/images/designs/2/zcode/zcode_citation.png" onclick="insertTag('', '', 'textarea', 'citation')" />
			<select onchange="insertTag('<taille valeur=&quot;' + this.options[this.selectedIndex].value + '&quot;>', '</taille>', '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 nom=&quot;' + this.options[this.selectedIndex].value + '&quot;>', '</couleur>', 'textarea');">
	<option value="none" class="selected" selected="selected">Couleur</option>
	<option value="noir" title="Noir" style="background-color: black;"></option>
	<option value="rouge" title="Rouge" style="background-color: red;"></option>
	<option value="vertc" title="Vert clair" style="background-color: #ADFF2F;"></option>
	<option value="vertf" title="Vert foncé"style="background-color: #008000;"></option>
	<option value="bleuc" title="Bleu clair" style="background-color: #6495ED;"></option>
	<option value="bleuf" title="Bleu foncé" style="background-color: #0000FF;"></option>
</select>
<img src="http://www.siteduzero.com/Templates/images/smilies/smile.png" alt=":)" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/images/smilies/heureux.png" alt=":D" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/images/smilies/clin.png" alt=";)" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/images/smilies/langue.png" alt=":p" onclick="insertTag('  ', '', 'textarea');" /><br />
				<img src="http://www.siteduzero.com/images/smilies/rire.gif" alt=":lol:" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/Templates/images/smilies/unsure.gif" alt=":euh:" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/images/smilies/triste.png" alt=":(" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/images/smilies/huh.png" alt=":o" onclick="insertTag('  ', '', 'textarea');" /><br />
				<img src="http://www.siteduzero.com/images/smilies/mechant.png" alt=":colere2:" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/images/smilies/blink.gif" alt="o_O" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/images/smilies/hihi.png" alt="^^" onclick="insertTag('  ', '', 'textarea');" />
				<img src="http://www.siteduzero.com/images/smilies/siffle.png" alt=":-°" onclick="insertTag('  ', '', 'textarea');" /><br />
 
<fieldset><legend>Message</legend>
<textarea cols=80 rows=8 id="textarea" name="message" onkeyup="preview(this, 'previewDiv');" onselect="preview(this, 'previewDiv');" ></textarea>
<br />
<p>
			<input name="previsualisation" type="checkbox" id="previsualisation" value="previsualisation" />
			<label for="previsualisation">Pr&eacute;visualisation automatique</label>
		</p>
	</div>
	</textarea>
	<div id="previewDiv"></div>
	<p>
<input type="button" value="Visualiser" onclick="view('textarea','viewDiv');" />
	</p>
	<div id="viewDiv"></div>

Et maintenant, tatalatatala !! zcode.js :

function bbcode(bbdebut, bbfin)
{
var input = window.document.formulaire.message;
input.focus();
if(typeof document.selection != 'undefined')
{
var range = document.selection.createRange();
var insText = range.text;
range.text = bbdebut + insText + bbfin;
range = document.selection.createRange();
if (insText.length == 0)
{
range.move('character', -bbfin.length);
}
else
{
range.moveStart('character', bbdebut.length + insText.length + bbfin.length);
}
range.select();
}
else if(typeof input.selectionStart != 'undefined')
{
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + bbdebut + insText + bbfin + input.value.substr(end);
var pos;
if (insText.length == 0)
{
pos = start + bbdebut.length;
}
else
{
pos = start + bbdebut.length + insText.length + bbfin.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
 
else
{
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos))
{
pos = prompt("insertion (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length)
{
pos = input.value.length;
}
var insText = prompt("Veuillez taper le texte");
input.value = input.value.substr(0, pos) + bbdebut + insText + bbfin + input.value.substr(pos);
}
}
function smilies(img)
{
window.document.formulaire.message.value += '' + img + '';
}
/*Essai d'une autre fonction avec un autre auteur*/
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;     
}
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;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;souligne&gt;([\s\S]*?)&lt;\/souligne&gt;/g, '<u>$1</u>');
		field = field.replace(/&lt;barre&gt;([\s\S]*?)&lt;\/barre&gt;/g, '<del>$1</del>');
		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;video&gt;([\s\S]*?)&lt;\/video&gt;/g, '<iframe width="400" height="315" src="$1" frameborder="0" allowfullscreen>$1</iframe>');
		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 class="citation">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>');
		
		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);
}

Cette page zcode.js, est sensée envoyée ce qu'elle a obtenue : le message.
Elle doit l'envoyer à cette page : view.php :

<script type="text/javascript" src="zcode.js"></script>
<?php
function parseZCode($content) {

	// Parsage des balises
	$zcode = array(  
		'`&lt;italique&gt;(.+)&lt;/italique&gt;`isU',
		'`&lt;souligne&gt;(.+)&lt;/souligne&gt;`isU',
		'`&lt;barre&gt;(.+)&lt;/barre&gt;`isU',  
		'`&lt;gras&gt;(.+)&lt;/gras&gt;`isU',
		'`&lt;barre&gt;(.+)&lt;/barre&gt;`isU',
		'`&lt;lien&gt;(.+)&lt;/lien&gt;`isU',
		'`&lt;lien url=&quot;(.+)&quot;&gt;(.+)&lt;/lien&gt;`isU',
		'`&lt;image&gt;(.+)&lt;/image&gt;`isU',
		'`&lt;citation&gt;(.+)&lt;/citation&gt;`isU',
		'`&lt;citation nom=&quot;(.+)&quot;&gt;(.+)&lt;/citation&gt;`isU',
		'`&lt;citation lien=&quot;(.+)&quot;&gt;(.+)&lt;/citation&gt;`isU',
		'`&lt;taille valeur=&quot;(.+)&quot;&gt;(.+)&lt;/taille&gt;`isU',
		'`&lt;video&gt;(.+)&lt;/video&gt;`isU'
	);  

	$html = array(  
		'<em>$1</em>',
		'<u>$1</u>',
		'<s>$1</s>',  
		'<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>',
		'<iframe width="400" height="315" src="$1" frameborder="0" allowfullscreen>$1</iframe>'
	); 
	//Si il y a besoin, du peut changer la ligne ci-dessus
	$content = htmlspecialchars($content, ENT_QUOTES);
	$content = preg_replace($zcode, $html, $content);
	


	// parsage des smilies
	$smiliesName = array(':magicien:', ':colere:', ':diable:', ':ange:', ':ninja:', '&gt;_&lt;', ':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);
	}
	
	// Retours à 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, après plein d'efforts, je n'ai toujours pas trouvé pourquoi quand je clique dans le formulaire sur : "Visualiser", rien ne se passe du tout !! Vous allez me dire que ce n'est pas possible mais si !! Rien ne se passe du tout !!

UP, UP, Please même si c'est le même message

Betzero

14 décembre 2011 à 15:42:31

Desolation

14 décembre 2011 à 18:17:12

Je vais justement présenter une fonctionnalité similaire bientôt dans le forum. Pense à regarder (ce soir ou demain).

http://chez-syl.fr/

14 décembre 2011 à 18:20:50

Je ne comprends pas :
1. Sur ton forum, il va y avoir une fonctionnalité similaire ou
2. Tu vas poster un topic pour expliquer celà.

Claros

14 décembre 2011 à 19:30:02

Le php n'est pas bon... Ce bout de code :

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

	echo parseZCode($content); // Ecriture du contenu parsé. 
}

S'est étrangement retrouvé dans la fonction parseZCode. Etant derrière le return de la fonction, c'est comme s'il ne servait à rien. Donc il est normale que le php ne répondait rien. Mets le en dehors de la fonction et ça marche comme il faut.

De plus, utilise un débogueur t'aiderait pas mal. Tu aurais rapidement vu que ta requête n'aboutissait à rien vu que le serveur ne répondait pas comme il faut.

A+

14 décembre 2011 à 20:25:06

Ça me met ça :
Deprecated: Function get_magic_quotes_gpc() is deprecated in C:\wamp\www\tests\forum\view.php on line 61

14 décembre 2011 à 21:13:42

Si tu utilises une version de php supérieure à 5.3.0 et ce qui est apparemment le cas, tu peux virer la condition avec get_magic_quotes_gpc(). Ce qui donne :

<?php
if (isset($_POST["string"])) {
	$content = stripslashes($_POST["string"]);

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

15 décembre 2011 à 9:15:17

Merci beaucoup, ça marche parfaitement bien!! Je vous remercie énormément pour votre aide.

Bouton de visualisation du tuto de Thunderseb

Bouton de visualisation du tuto de Thunderseb

Bouton de visualisation du tuto de Thunderseb

Supprimer

Modérer

Signaler le message aux modérateurs