Bbcode js ou jqury
Résolu
korka
-
korka -
korka -
Bonjour,
j'ai ce code
le but que j'aimerais lorsqu'on clique sur gras il met la balise blabblabla dans le code
j'ai mis le code jquery ;)
et
mais quand je clique sur gras , il ne mets pas les balise bbcode dans le texterea
merci d'avance
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
A voir également:
- Bbcode js ou jqury
- Copiez l'image dans un logiciel d'édition d'images ou un outil en ligne comme js paint ou pixlr e. remplissez les cases en suivant le code couleur. des cases supplémentaires vont se remplir automatiquement. que représente le dessin ? ✓ - Forum Photoshop
- Reproduction d'un dessin - Forum Graphisme
- Arrondir js - Forum Webmastering
- Pixlr - Forum Graphisme
- Arrondi js ✓ - Forum Windows
2 réponses
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.
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.
https://developer.mozilla.org/fr/docs/Outils/Console_JavaScript
https://developers.google.com/web/tools/chrome-devtools/javascript/