Bonjour
J'ai actuellement installé sur mon site un script de bbcode pour écrire des articles.
Il fonctionne nickel, le problème c'est qu'il ne foncionne pas sous IE.
En effet lorsque je clique sur mes icones pour écrire mon article sous IE cela s'affiche de cette facon :
<center></center><gras></gas><couleur=orange></couleur>
Les balises se suivent et ne s'imbrique pas. De plus le curseur ce met toujours à la fin de la ligne et non entre les balises. Auriez vous une solution svp. Je vous donnes mon code si cela peut vous aidez. Merci
<div class="boutons_form">
<span class="boutons">
<img src="../img/form/gras.gif" alt="Gras" title="Gras" onclick="balise('<gras>','</gras>', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
<img src="../img/form/italique.gif" alt="Italique" title="Italique" onclick="balise('<italique>','</italique>', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
<img src="../img/form/souligne.gif" alt="Souligné" title="Souligné" onclick="balise('<souligne>','</souligne>', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
<img src="../img/form/barrer.gif" alt="Barré" title="Barré" onclick="balise('<barre>','</barre>', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
</span>
<span class="boutons">
<img src="../img/form/liste.gif" alt="Liste à puces" title="Liste à puces" onclick="add_liste('intro','prev_intro')" class="bouton_cliquable" />
<img src="../img/form/citation.gif" alt="Citation" title="Citation" onclick="add_bal2('citation','intro','prev_intro')" class="bouton_cliquable" />
<img src="../img/form/image.gif" alt="Image" title="Image" onclick="balise('<image>','</image>', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
<img src="../img/form/lien.gif" alt="Lien" title="Lien" onclick="add_bal2('lien','intro','prev_intro')" class="bouton_cliquable" />
<img src="../img/form/mail.gif" alt="E-mail" title="E-mail" onclick="add_bal2('email','intro','prev_intro')" class="bouton_cliquable" />
</span>
<br />
<span class="cleaner">
<select id="code_intro" onchange="add_bal('code','code_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Code</option>
<option value="php">PHP</option>
<option value="html">HTML</option>
<option value="sql">SQL</option>
<option value="javascript">JAVASCRIPT</option>
<option value="actionscript">ACTIONSCRIPT</option>
<option value="c">C</option>
<option value="c++">C++</option>
<option value="vb">VB</option>
</select>
<select id="position_intro" onchange="add_bal('position','position_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Position</option>
<option value="justifie">Justifié</option>
<option value="gauche">A gauche</option>
<option value="centrebb" class="centrebb">Centré</option>
<option value="droite" class="droite">A droite</option>
</select>
<select id="taille_intro" onchange="add_bal('taille','taille_intro','intro','prev_intro')">
<option class="opt_titre" 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 id="couleur_intro" onchange="add_bal('couleur','couleur_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Couleur</option>
<option value="rose" class="rose">rose</option>
<option value="rouge" class="rouge">rouge</option>
<option value="orange" class="orange">orange</option>
<option value="jaune" class="jaune">jaune</option>
<option value="vertc" class="vertc">vert clair</option>
<option value="vertf" class="vertf">vert foncé</option>
<option value="olive" class="olive">olive</option>
<option value="turquoise" class="turquoise">turquoise</option>
<option value="bleugris" class="bleugris">bleugris</option>
<option value="bleu" class="bleu">bleu</option>
<option value="marine" class="marine">marine</option>
<option value="violet" class="violet">violet</option>
<option value="marron" class="marron">marron</option>
<option value="noir" class="noir">noir</option>
<option value="gris" class="gris">gris</option>
<option value="argent" class="argent">argent</option>
<option value="blanc" class="blanc">blanc</option>
</select>
<select id="police_intro" onchange="add_bal('police','police_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Police</option>
<option value="arial" class="arial">arial</option>
<option value="times" class="times">times</option>
<option value="courrier" class="courrier">courrier</option>
<option value="impact" class="impact">impact</option>
<option value="geneva" class="geneva">geneva</option>
<option value="optima" class="optima">optima</option>
</select>
</span>
</div>
<div class="form">
<textarea tabindex="4"onselect="storeCaret('intro')" tabindex="30" onclick="storeCaret('intro');parse('intro', 'prev_intro')" onkeyup="storeCaret('intro');parse('intro', 'prev_intro');" name="intro" id="intro" cols="40" rows="15"></textarea>
<div id="prev_intro"></div>
</div>
Code JS :
function storeCaret(id_textarea)
{
champ = document.getElementById(id_textarea);
if (champ.createTextRange)
champ.curseur = document.selection.createRange().duplicate();
}
function balise(balise_debut, balise_fin, id_textarea)
{
var champ = document.getElementById(id_textarea);
var scroll = champ.scrollTop;
if (champ.curseur)
{
champ.curseur.text = balise_debut + champ.curseur.text + balise_fin;
}
else if (champ.selectionStart != 'undefined' && champ.selectionEnd != 'undefined')
{
var debut = champ.value.substring(0, champ.selectionStart);
var entre = champ.value.substring(champ.selectionStart, champ.selectionEnd);
var fin = champ.value.substring(champ.selectionEnd);
champ.value = debut + balise_debut + entre + balise_fin + fin;
champ.focus();
champ.setSelectionRange(debut.length + balise_debut.length, champ.value.length - fin.length - balise_fin.length);
}
else
{
champ.value += balise_debut + balise_fin;
champ.focus();
}
champ.scrollTop = scroll;
}
function parse(id_textarea, id_prev)
{
var champ = document.getElementById(id_textarea);
var div_prev = document.getElementById(id_prev);
var contenu = champ.value;
if (document.body.scrollTop)
var scroll = document.body.scrollTop;
else
var scroll = window.pageYOffset;
if (champ.selectionStart != 'undefined' && !champ.curseur)
{
var pos = champ.selectionStart;
contenu = remplace(remplace(contenu.substring(0, pos),'>','>'),'<','<') + '<a href="#" name="prev_ancre_suivi" id="prev_ancre_suivi"></a>' + remplace(remplace(contenu.substring(pos),'>','>'),'<','<');
}
else
contenu = remplace(remplace(contenu,'>','>'),'<','<');
contenu = remplace(contenu, "\n", '<br />');
contenu = contenu.replace(/<code=(html|php|sql|c|c\+\+|javascript|actionscript|java|vb)>([\s\S]+?)<\/code>/g, '<span class="code">Code</span><div class="code2 $1">$2</div>');
contenu = contenu.replace(/<gras>([\s\S]+?)<\/gras>/g, '<strong>$1</strong>');
contenu = contenu.replace(/<(souligne|italique)>([\s\S]+?)<\/\1>/g, '<span class="$1">$2</span>');
contenu = contenu.replace(/<barre>([\s\S]+?)<\/barre>/g, '<strike>$1</strike>');
contenu = contenu.replace(/<couleur=(orange|noir|marron|vertf|olive|marine|violet|bleugris|argent|gris|rouge|vertc|jaune|bleu|rose|turquoise|blanc)>([\s\S]+?)<\/couleur>/g, '<span class="$1">$2</span>');
contenu = contenu.replace(/<police=(arial|times|courrier|impact|geneva|optima)>([\s\S]+?)<\/police>/g, '<span class="$1">$2</span>');
contenu = contenu.replace(/<taille=(ttpetit|tpetit|petit|gros|tgros|ttgros)>([\s\S]+?)<\/taille>/g, '<span class="$1">$2</span>');
contenu = contenu.replace(/<image>(.+?)<\/image>/g, '<img src="$1" alt="Image" />');
contenu = contenu.replace(/<position=(gauche|droite|centrebb|justifie)>([\s\S]+?)<\/position>/g, '<div class="$1">$2</div>');
contenu = contenu.replace(/<lien>(.+?)<\/lien>/g, '<a href="$1">$1</a>');
contenu = contenu.replace(/<lien=(.+?)>(.+?)<\/lien>/g, '<a href="$1">$2</a>');
contenu = contenu.replace(/<email>(.+?)<\/email>/g, '<a href="mailto:$1">$1</a>');
contenu = contenu.replace(/<email=(.+?)>(.+?)<\/email>/g, '<a href="mailto:$1">$2</a>');
contenu = contenu.replace(/<(information|attention|erreur|question)>([\s\S]+?)<\/\1>/g, '<div class="rmq $1">$2</div>');
contenu = contenu.replace(/<liste>\s*(<br \/> )?\s*([\s\S]+?)\s*(<br \/> )?\s*<\/liste>/g, '<ul>$2</ul>');
contenu = contenu.replace(/<puce>([\s\S]+?)<\/puce>\s*(<br \/> )?\s*/g, '<li>$1</li>');
contenu = contenu.replace(/<flash=(\d+)\*(\d+)>(.+?)<\/flash>/g, '<object type="application/x-shockwave-flash" data="$3" width="$1" height="$2"><param name="movie" value="$3" /><param name="quality" value="high" />Animation flash</object>');
var i = 0;
while (contenu.indexOf("<citation" ) != -1 && contenu.indexOf("</citation>" ) != -1 && (contenu.indexOf("<citation" ) < contenu.indexOf("</citation>" )) && i < 30)
{
contenu = contenu.replace(/<citation=(.*?)>([\s\S]+?)<\/citation>/g, '<span class="citation">Citation : $1</span><div class="citation2">$2</div>');
i++;
}
contenu = remplace(contenu, '
', '<img src="images/smilies/smile.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':D', '<img src="images/smilies/heureux.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, '
', '<img src="images/smilies/clin.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':p', '<img src="images/smilies/langue.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':lol:', '<img src="images/smilies/rire.gif" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':euh:', '<img src="images/smilies/unsure.gif" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, '
', '<img src="images/smilies/triste.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':o', '<img src="images/smilies/huh.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':colere:', '<img src="images/smilies/mechant.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, 'o_O', '<img src="images/smilies/blink.gif" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, '^^', '<img src="images/smilies/hihi.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':-*', '<img src="images/smilies/siffle.png" alt="Smiley" class="smilies" />');
div_prev.innerHTML = contenu;
if (document.getElementById('prev_ancre_suivi'))
document.getElementById('prev_ancre_suivi').focus();
document.getElementById(id_textarea).focus();
}
function remplace(data, search, replace)
{
var temp = data;
var longueur = search.length;
while (temp.indexOf(search) > -1)
{
pos= temp.indexOf(search);
temp = (temp.substring(0, pos) + replace + temp.substring((pos + longueur), temp.length));
}
return temp;
}
function add_bal(nom, id_liste, id_textarea, id_prev)
{
bal = document.getElementById(id_liste).value;
balise('<'+nom+'='+bal+'>','</'+nom+'>', id_textarea);parse(id_textarea, id_prev);
document.getElementById(id_liste).options[0].selected = true;
}
function add_bal2(nom, id_textarea, id_prev)
{
var texte = '';
if (nom == 'citation')
texte = 'Veuillez renseigner l\'auteur de la citation';
else if (nom == 'lien')
texte = 'Veuillez indiquer le lien';
else if (nom == 'email')
texte = 'Veuillez indiquer l\'email';
bal = prompt(texte);
if (!bal && nom == 'citation')
bal = 'Pas de titre';
if (bal)
balise('<'+nom+'='+bal+'>','</'+nom+'>', id_textarea);parse(id_textarea, id_prev);
document.getElementById(nom).options[0].selected = true;
}
function add_liste(id_textarea, id_prev)
{
var texte = '';
while (tmp = prompt('Saisir le contenu d\'une puce (si vous voulez arreter ici, cliquez sur annuler)'))
texte += '<puce>'+tmp+'</puce>'+"\n";
balise('<liste>'+"\n"+texte,'</liste>', id_textarea);parse(id_textarea, id_prev);
}
function ouvrir_page(page,nom,x,y)
{
window.open(page,nom,'toolbar=false,personalbar=false,titlebar=false,location=false,directories=false,width='+x+',height='+y+',scrollbars=yes,resizable=yes');
}
Merci beaucoup
