Accueil > > > EDITEUR BBCODE AVEC VISUALISATION EN DIRECT
EDITEUR BBCODE AVEC VISUALISATION EN DIRECT
Information sur la source
Description
Bonjour, Je vais pas dire que cette source est entièrement de moi, comptenu de divers coup de main et d'un bout de code repris sur un forum modifié a ma guise... Enfin bref, comme le dis le Titre, c'est un éditeur BBCode tout simple a mettre en place, très pratique, vos vistieurs ne sont pas obligé d'avoir des notions de HTML pour composer un commentaire, une news ou quelconque type de message, ça vous le savez déjà... pour avoir un aperçus => http://bbc.shonenchat.com/bbcode.html dans le code source, il y a quelques infos utils ;) (PS : Je sais, c'est pas du nouveau, il exist déjà quelque éditeurs BBCode, mais cependant pas facile a trouver ^^')
Source
- // JavaScript Document
- function initBBcode(IdName,BtnName,PrwName,Action,largeur,hauteur) {
-
- var InpBtn = '';
- var LabBtn = '';
- var DivBtn = '';
-
- var NamBtn = new Array('[b],[/b]','[u],[/u]','[i],[/i]','[s],[/s]','[align=left],[/align]','[align=center],[/align]','[align=right],[/align]','[align=justify],[/align]','[quote],[/quote]','[code],[/code]','[list=circle]\r\n[*],\r\n[/list]','[list=1]\r\n[*],\r\n[/list]','[list=a]\r\n[*],\r\n[/list]','[img],[/img]','[url],[/url]','[mail],[/mail]');
- var DesBtn = new Array('Gras','Souligné','Italique','Barré','Droite','Centré','Justifié','Gauche','Citation','Affichez du code','Liste à puce','Liste ordonnée','Liste alphabétique','Insérer une image','Insérer un lien','Insérer un mail');
- var ImgBtn = new Array('bold','underline','italic','strikethrough','alignleft','aligncenter','alignright','alignjustify','quote','code','bullist','numlist','alphalist','image','link','mail');
-
- var DesCol = new Array('Couleur police','Couleur fond');
- var NamCol = new Array('[color=','[bgcolor=','[/color]','[/bgcolor]');
-
- var OptCol = new Array('Défaut', 'Rouge foncé', 'Rouge', 'Orange', 'Marron', 'Jaune', 'Vert', 'Olive', 'Cyan', 'Bleu', 'Bleu foncé', 'Indigo', 'Violet','Blanc','Noir');
- var HtmCol = new Array('','darkred', 'red', 'orange', 'brown', 'yellow', 'green', 'olive', 'cyan', 'blue', 'darkblue', 'indigo', 'violet', 'white','black');
-
- var DesSize = 'Taille';
- var NamSize = new Array('[size=','[/size]');
- var OptSize = new Array('Défaut','Très petit','Petit','Normal','Grand','Très grand','Personnaliser');
- var HtmSize = new Array('medium','x-small','small','medium','large','x-large','12px');
-
- var DesFont = 'Police';
- var NamFont = new Array('[font=','[/font]');
- var OptFont = new Array('Défaut','Arial','Verdana','Century Gothic','Comic Sans MS','Courier New','Jokerman','Kristen ITC','Lucida Console');
-
- // partie de la fonction qui permet d'ajouter les balises BBcode aux textes sélectionné, ou à l'emplacement du curseur
-
- var Selection = 'try { if (document.selection) { objet.focus(); sel = document.selection.createRange(); sel.text = balise + sel.text + balise2; } else { if(objet.selectionStart==objet.selectionEnd) { if (balise=="[img]" && balise2=="[/img]") { var InfUrl=prompt("Entrez l\'adresse URL de botre image SVP :", ""); } else { if (balise=="[url]" && balise2=="[/url]") { var InfUrl=prompt("Entrez l\'adresse URL :", ""); } else { var InfUrl=""; } } var textedebut = objet.value.substring(0,objet.selectionStart); var textefin = objet.value.substring(objet.selectionEnd, objet.value.length); objet.value = textedebut + balise + InfUrl + balise2 + textefin; } else { var textedebut = objet.value.substring(0,objet.selectionStart); var textefin = objet.value.substring(objet.selectionEnd, objet.value.length); var texteSelection = objet.value.substring(objet.selectionStart, objet.selectionEnd); objet.value = textedebut + balise + texteSelection + balise2 + textefin; } } } catch(e) { alert(e); } ';
-
- // les 2 div qui vont bien => BBCode_ = Editeur ; Prev_ => Prévisu.
-
- document.write('<div id="BBCode_'+IdName+'" class="bbcode"></div><div id="Prev_'+IdName+'" class="bbcode"></div>');
-
-
- // Création du formulaire
-
- var html = '<form id="Form'+IdName+'" name="Form'+IdName+'" method="post" enctype="multipart/form-data" action="'+Action+'" onSubmit="return false;"><div id="BBCodeBouton_'+IdName+'"></div><div id="BBCodeArea_'+IdName+'"></div><div id="BBCodeSubmit_'+IdName+'"></div></form>';
-
- document.getElementById('BBCode_'+IdName).innerHTML = html;
- document.getElementById('BBCode_'+IdName).style.width = largeur+"px";
- document.getElementById('BBCode_'+IdName).align="left";
-
-
- document.getElementById('Prev_'+IdName).innerHTML = '<fieldset><legend>Prévisualisation :</legend></fieldset>';
- document.getElementById('Prev_'+IdName).style.display = "none";
- document.getElementById('Prev_'+IdName).align="left";
-
- document.getElementById('BBCodeArea_'+IdName).style.margin = "0px 2.5px";
-
- document.getElementById('BBCodeSubmit_'+IdName).style.padding = "5px";
-
- // Ajout du textarea
-
- InpBtn = document.createElement( 'textarea' );
- InpBtn.id = IdName;
- InpBtn.name = IdName;
- InpBtn.style.height = hauteur+"px";
- InpBtn.style.width = largeur+"px";
- InpBtn.onkeyup = function() { preview(IdName); }
- InpBtn.style.width = largeur - 10 + "px";
-
- document.getElementById('BBCodeArea_'+IdName).appendChild(InpBtn);
-
- // Ajout des Submit de prévisu et d'envoie
-
- InpBtn = document.createElement( 'input' );
- InpBtn.type = "submit";
- InpBtn.id = "Sub"+IdName;
- InpBtn.name = "Sub"+IdName;
- InpBtn.value = BtnName;
- InpBtn.onclick = function() {
- document.getElementById(IdName).value = preview(IdName);
- eval("document.Form"+IdName+".submit();");
- }
-
- document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);
-
- // Input invisible si "off" on envoie sur la page destinatrice
-
- InpBtn = document.createElement( 'input' );
- InpBtn.type = "hidden";
- InpBtn.id = "Hid"+IdName;
- InpBtn.name = "Hid"+IdName;
- InpBtn.value = "off";
-
- document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);
-
- // Bouton de prévisue
-
- InpBtn = document.createElement( 'input' );
- InpBtn.type = "submit";
- InpBtn.id = "Prw"+IdName;
- InpBtn.name = "Prw"+IdName;
- InpBtn.value = PrwName;
-
- InpBtn.onclick = function() { document.getElementById('Prev_'+IdName).style.display = "block";
- var texte = preview(IdName);
- document.getElementById('Prev_'+IdName).innerHTML = '<fieldset><legend>Prévisualisation :</legend>'+texte+'</fieldset>'; }
-
- document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);
-
-
- // Le plus facile et plus simple, les balises de [b],[/b] à [url],[/url]
-
- DivBtn = document.createElement( 'div' );
- DivBtn.id = "SubBB_"+IdName;
-
- var i = 0;
-
- while (NamBtn[i]) {
-
- LabBtn = document.createElement( 'label' );
- LabBtn.title = DesBtn[i];
-
- InpBtn = document.createElement( 'input' );
- InpBtn.align = "middle";
- InpBtn.type = 'image';
- InpBtn.src = 'image/'+ImgBtn[i]+'.gif';
-
- var val = NamBtn[i].split(',');
- InpBtn.name = val[0];
- InpBtn.id = val[1];
-
- InpBtn.onclick = function() {
-
- var objet = eval("document.Form"+IdName+"."+IdName+";");
- var balise = this.name;
- var balise2 = this.id;
-
- eval(Selection);
- preview(IdName);
- }
-
- LabBtn.appendChild(InpBtn);
- DivBtn.appendChild(LabBtn);
-
- i++;
-
- }
-
- document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
-
- // on complique un peux, les Balises [color],[bgcolor]
-
- DivBtn = document.createElement( 'div' );
- DivBtn.id = "SelColBB_"+IdName;
-
- for (var i = 0;i < 2; i++) {
-
- LabBtn = document.createElement( 'label' );
- LabBtn.title = DesCol[i];
-
- LabBtn.innerHTML = " "+DesCol[i]+" : ";
- InpBtn = document.createElement( 'select' );
- InpBtn.id=NamCol[i];
- InpBtn.name=NamCol[i+2];
-
- var j = 0;
-
- while (OptCol[j]) {
-
- InpBtn.options[j] = new Option(OptCol[j],HtmCol[j]);
- if (i==0) {
- InpBtn.options[j].style.color = HtmCol[j];
- } else {
- InpBtn.options[j].style.background = HtmCol[j];
- }
-
- j++;
-
- }
-
- InpBtn.onchange = function() {
-
- var objet = eval("document.Form"+IdName+"."+IdName+";");
- var balise = this.id+this.options[this.selectedIndex].value+']';
- var balise2 = this.name;
-
- eval(Selection);
- preview(IdName);
- }
-
- LabBtn.appendChild(InpBtn);
- DivBtn.appendChild(LabBtn);
-
- }
-
- document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
-
- // La Balise [font] -- Type de Police --
-
- DivBtn = document.createElement( 'div' );
- DivBtn.id = "SelFontBB_"+IdName;
-
- LabBtn = document.createElement( 'label' );
- LabBtn.title = DesFont;
- LabBtn.innerHTML = " "+DesFont+" : ";
-
- InpBtn = document.createElement( 'select' );
- InpBtn.id=NamFont[0];
- InpBtn.name=NamFont[1];
-
- var i = 0;
-
- while (OptFont[i]) {
- InpBtn.options[i] = new Option(OptFont[i],OptFont[i]);
- i++;
- }
-
- InpBtn.onchange = function() {
-
- var objet = eval("document.Form"+IdName+"."+IdName+";");
- var balise = this.id+this.options[this.selectedIndex].value+']';
- var balise2 = this.name;
-
- eval(Selection);
- preview(IdName);
- }
-
- LabBtn.appendChild(InpBtn);
- DivBtn.appendChild(LabBtn);
-
- document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
-
- // La Balise [size] -- Taille de la police de caractère --
-
- DivBtn = document.createElement( 'div' );
- DivBtn.id = "SelSizeBB_"+IdName;
-
- LabBtn = document.createElement( 'label' );
- LabBtn.title = DesSize;
- LabBtn.innerHTML = " "+DesSize+" : ";
-
- InpBtn = document.createElement( 'select' );
- InpBtn.id=NamSize[0];
- InpBtn.name=NamSize[1];
-
- var i = 0;
-
- while (OptSize[i]) {
- InpBtn.options[i] = new Option(OptSize[i],HtmSize[i]);
-
- i++;
- }
-
- InpBtn.onchange = function() {
-
- var objet = eval("document.Form"+IdName+"."+IdName+";");
- var balise = this.id+this.options[this.selectedIndex].value+']';
- var balise2 = this.name;
-
- eval(Selection);
- preview(IdName);
- }
-
- LabBtn.appendChild(InpBtn);
- DivBtn.appendChild(LabBtn);
-
- document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
-
-
-
- }
- function preview(Name) {
-
- if (document.getElementById('Prev_'+Name).style.display == "none") return false;
-
- var q1 = "<table align=center border=0 cellpadding=3 cellspacing=1 width=90%><tbody><tr><td><div align=\"left\" style=\"font-size : 11px; color: #000000;\"><b>";
- var q2 = "</b></div></td></tr><tr><td align=\"left\" style=\"font-family: Arial; font-size: 11px; color: #444444; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-width: 1px;\">";
- var q3 = "</td></tr></tbody></table>";
-
- var texte = document.getElementById(Name).value;
-
- texte=texte.replace(/</g, '<');
- texte=texte.replace(/>/g, '>');
-
- texte=texte.replace(/\r\n|\r|\n/g, '<br />');
- texte=texte.replace(/\[(b|u|s|i|\/b|\/u|\/s|\/i)]/g,'<$1>');
-
- texte=texte.replace(/\[color=([^\[]*)\]/mig, '<span style=\'color:$1;\'>');
- texte=texte.replace(/\[bgcolor=([^\[]*)\]/mig, '<span style=\'background-color:$1;\'>');
- texte=texte.replace(/\[font=([^\[]*)\]/mig, '<span style=\'font-family:$1;\'>');
- texte=texte.replace(/\[size=([^\[]*)\]/mig, '<span style=\'font-size:$1;\'>');
- texte=texte.replace(/\[\/(color|bgcolor|font|size)\]/gi,'</span>');
-
- texte=texte.replace(/\[align=([^\[]*)\]/mig, '<div style=\'text-align:$1;\'>');
- texte=texte.replace(/\[\/align]/gi, '</div>');
-
- texte=texte.replace(/\[code]/gi, '<div align="left" style="color:#000000;font-weight:bold; font-size: 11px;">Code :</div><div style="color:#333333;background-color:#F0F0F0;" align="left"><code lang="fr">');
- texte=texte.replace(/\[\/code]/gi, '</code></div>');
-
- texte=texte.replace(/\[quote]/gi, q1+'Citation:'+q2);
- texte=texte.replace(/\[quote=([^\[]*)\]/gi, q1+'$1 a écrit :'+q2);
- texte=texte.replace(/\[\/quote]/gi, q3);
-
- texte=texte.replace(/\[url]([^\]]*)\[\/url]/mig,'<a href="$1" target="_blank">$1</a>');
- texte=texte.replace(/\[url=([^\[]*)\]([^\]]*)\[\/url\]/mig, '<a href=\'$1\' target=\'_blank\'>$2</a>');
- texte=texte.replace(/\[mail]([^\[]*)\[\/mail]/mig,'<a href="mailto:$1" target="_blank">$1</a>');
- texte=texte.replace(/\[mail=([^\[]*)\]([^\]]*)\[\/mail\]/mig, '<a href=\'mailto:$1\' target=\'_blank\'>$2</a>');
- texte=texte.replace(/\[img]([^\]]*)\[\/img]/mig,'<img src="$1" border="0" />');
-
- texte=texte.replace(/\[list=([^\]]*)\](.+)\[\/list]/mig, '<ul type="$1">$2</ul>');
- texte=texte.replace(/\[\*]([^\[]+)(?=(\[\*])|(<\/ul>))/mig, '<li>$1</li>');
-
- texte=texte.replace(/\<br \/><\/ul>/gi, '</ul>');
- texte=texte.replace(/<\/ul><br \/>/gi, '</ul>');
-
- texte=texte.replace(/<div([^\>]*)><br \/>/gi, '<div $1>');
- texte=texte.replace(/<\/div><br \/>/gi, '</div>');
-
- texte=texte.replace(/<span([^\>]*)><br \/>/gi, '<span $1>');
- texte=texte.replace(/(<\/span><br \/>|<br \/><\/span><br \/>|<br \/><\/span>)/gi, '</span>');
-
- texte=texte.replace(/<td([^\>]*)><br \/>/gi, '<td $1>');
- texte=texte.replace(/<\/table><br \/>/gi, '</table>');
-
- texte=texte.replace(/<code([^\>]*)><br \/>/gi, '<code $1>');
- texte=texte.replace(/(<\/code><br \/>|<br \/><\/code>|<br \/><\/code><br \/>)/gi, '</code>');
-
- document.getElementById('Prev_'+Name).innerHTML = '<fieldset><legend>Prévisualisation :</legend>'+texte+'</fieldset>';
- return (texte);
- }
// JavaScript Document
function initBBcode(IdName,BtnName,PrwName,Action,largeur,hauteur) {
var InpBtn = '';
var LabBtn = '';
var DivBtn = '';
var NamBtn = new Array('[b],[/b]','[u],[/u]','[i],[/i]','[s],[/s]','[align=left],[/align]','[align=center],[/align]','[align=right],[/align]','[align=justify],[/align]','[quote],[/quote]','[code],[/code]','[list=circle]\r\n[*],\r\n[/list]','[list=1]\r\n[*],\r\n[/list]','[list=a]\r\n[*],\r\n[/list]','[img],[/img]','[url],[/url]','[mail],[/mail]');
var DesBtn = new Array('Gras','Souligné','Italique','Barré','Droite','Centré','Justifié','Gauche','Citation','Affichez du code','Liste à puce','Liste ordonnée','Liste alphabétique','Insérer une image','Insérer un lien','Insérer un mail');
var ImgBtn = new Array('bold','underline','italic','strikethrough','alignleft','aligncenter','alignright','alignjustify','quote','code','bullist','numlist','alphalist','image','link','mail');
var DesCol = new Array('Couleur police','Couleur fond');
var NamCol = new Array('[color=','[bgcolor=','[/color]','[/bgcolor]');
var OptCol = new Array('Défaut', 'Rouge foncé', 'Rouge', 'Orange', 'Marron', 'Jaune', 'Vert', 'Olive', 'Cyan', 'Bleu', 'Bleu foncé', 'Indigo', 'Violet','Blanc','Noir');
var HtmCol = new Array('','darkred', 'red', 'orange', 'brown', 'yellow', 'green', 'olive', 'cyan', 'blue', 'darkblue', 'indigo', 'violet', 'white','black');
var DesSize = 'Taille';
var NamSize = new Array('[size=','[/size]');
var OptSize = new Array('Défaut','Très petit','Petit','Normal','Grand','Très grand','Personnaliser');
var HtmSize = new Array('medium','x-small','small','medium','large','x-large','12px');
var DesFont = 'Police';
var NamFont = new Array('[font=','[/font]');
var OptFont = new Array('Défaut','Arial','Verdana','Century Gothic','Comic Sans MS','Courier New','Jokerman','Kristen ITC','Lucida Console');
// partie de la fonction qui permet d'ajouter les balises BBcode aux textes sélectionné, ou à l'emplacement du curseur
var Selection = 'try { if (document.selection) { objet.focus(); sel = document.selection.createRange(); sel.text = balise + sel.text + balise2; } else { if(objet.selectionStart==objet.selectionEnd) { if (balise=="[img]" && balise2=="[/img]") { var InfUrl=prompt("Entrez l\'adresse URL de botre image SVP :", ""); } else { if (balise=="[url]" && balise2=="[/url]") { var InfUrl=prompt("Entrez l\'adresse URL :", ""); } else { var InfUrl=""; } } var textedebut = objet.value.substring(0,objet.selectionStart); var textefin = objet.value.substring(objet.selectionEnd, objet.value.length); objet.value = textedebut + balise + InfUrl + balise2 + textefin; } else { var textedebut = objet.value.substring(0,objet.selectionStart); var textefin = objet.value.substring(objet.selectionEnd, objet.value.length); var texteSelection = objet.value.substring(objet.selectionStart, objet.selectionEnd); objet.value = textedebut + balise + texteSelection + balise2 + textefin; } } } catch(e) { alert(e); } ';
// les 2 div qui vont bien => BBCode_ = Editeur ; Prev_ => Prévisu.
document.write('<div id="BBCode_'+IdName+'" class="bbcode"></div><div id="Prev_'+IdName+'" class="bbcode"></div>');
// Création du formulaire
var html = '<form id="Form'+IdName+'" name="Form'+IdName+'" method="post" enctype="multipart/form-data" action="'+Action+'" onSubmit="return false;"><div id="BBCodeBouton_'+IdName+'"></div><div id="BBCodeArea_'+IdName+'"></div><div id="BBCodeSubmit_'+IdName+'"></div></form>';
document.getElementById('BBCode_'+IdName).innerHTML = html;
document.getElementById('BBCode_'+IdName).style.width = largeur+"px";
document.getElementById('BBCode_'+IdName).align="left";
document.getElementById('Prev_'+IdName).innerHTML = '<fieldset><legend>Prévisualisation :</legend></fieldset>';
document.getElementById('Prev_'+IdName).style.display = "none";
document.getElementById('Prev_'+IdName).align="left";
document.getElementById('BBCodeArea_'+IdName).style.margin = "0px 2.5px";
document.getElementById('BBCodeSubmit_'+IdName).style.padding = "5px";
// Ajout du textarea
InpBtn = document.createElement( 'textarea' );
InpBtn.id = IdName;
InpBtn.name = IdName;
InpBtn.style.height = hauteur+"px";
InpBtn.style.width = largeur+"px";
InpBtn.onkeyup = function() { preview(IdName); }
InpBtn.style.width = largeur - 10 + "px";
document.getElementById('BBCodeArea_'+IdName).appendChild(InpBtn);
// Ajout des Submit de prévisu et d'envoie
InpBtn = document.createElement( 'input' );
InpBtn.type = "submit";
InpBtn.id = "Sub"+IdName;
InpBtn.name = "Sub"+IdName;
InpBtn.value = BtnName;
InpBtn.onclick = function() {
document.getElementById(IdName).value = preview(IdName);
eval("document.Form"+IdName+".submit();");
}
document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);
// Input invisible si "off" on envoie sur la page destinatrice
InpBtn = document.createElement( 'input' );
InpBtn.type = "hidden";
InpBtn.id = "Hid"+IdName;
InpBtn.name = "Hid"+IdName;
InpBtn.value = "off";
document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);
// Bouton de prévisue
InpBtn = document.createElement( 'input' );
InpBtn.type = "submit";
InpBtn.id = "Prw"+IdName;
InpBtn.name = "Prw"+IdName;
InpBtn.value = PrwName;
InpBtn.onclick = function() { document.getElementById('Prev_'+IdName).style.display = "block";
var texte = preview(IdName);
document.getElementById('Prev_'+IdName).innerHTML = '<fieldset><legend>Prévisualisation :</legend>'+texte+'</fieldset>'; }
document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);
// Le plus facile et plus simple, les balises de [b],[/b] à [url],[/url]
DivBtn = document.createElement( 'div' );
DivBtn.id = "SubBB_"+IdName;
var i = 0;
while (NamBtn[i]) {
LabBtn = document.createElement( 'label' );
LabBtn.title = DesBtn[i];
InpBtn = document.createElement( 'input' );
InpBtn.align = "middle";
InpBtn.type = 'image';
InpBtn.src = 'image/'+ImgBtn[i]+'.gif';
var val = NamBtn[i].split(',');
InpBtn.name = val[0];
InpBtn.id = val[1];
InpBtn.onclick = function() {
var objet = eval("document.Form"+IdName+"."+IdName+";");
var balise = this.name;
var balise2 = this.id;
eval(Selection);
preview(IdName);
}
LabBtn.appendChild(InpBtn);
DivBtn.appendChild(LabBtn);
i++;
}
document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
// on complique un peux, les Balises [color],[bgcolor]
DivBtn = document.createElement( 'div' );
DivBtn.id = "SelColBB_"+IdName;
for (var i = 0;i < 2; i++) {
LabBtn = document.createElement( 'label' );
LabBtn.title = DesCol[i];
LabBtn.innerHTML = " "+DesCol[i]+" : ";
InpBtn = document.createElement( 'select' );
InpBtn.id=NamCol[i];
InpBtn.name=NamCol[i+2];
var j = 0;
while (OptCol[j]) {
InpBtn.options[j] = new Option(OptCol[j],HtmCol[j]);
if (i==0) {
InpBtn.options[j].style.color = HtmCol[j];
} else {
InpBtn.options[j].style.background = HtmCol[j];
}
j++;
}
InpBtn.onchange = function() {
var objet = eval("document.Form"+IdName+"."+IdName+";");
var balise = this.id+this.options[this.selectedIndex].value+']';
var balise2 = this.name;
eval(Selection);
preview(IdName);
}
LabBtn.appendChild(InpBtn);
DivBtn.appendChild(LabBtn);
}
document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
// La Balise [font] -- Type de Police --
DivBtn = document.createElement( 'div' );
DivBtn.id = "SelFontBB_"+IdName;
LabBtn = document.createElement( 'label' );
LabBtn.title = DesFont;
LabBtn.innerHTML = " "+DesFont+" : ";
InpBtn = document.createElement( 'select' );
InpBtn.id=NamFont[0];
InpBtn.name=NamFont[1];
var i = 0;
while (OptFont[i]) {
InpBtn.options[i] = new Option(OptFont[i],OptFont[i]);
i++;
}
InpBtn.onchange = function() {
var objet = eval("document.Form"+IdName+"."+IdName+";");
var balise = this.id+this.options[this.selectedIndex].value+']';
var balise2 = this.name;
eval(Selection);
preview(IdName);
}
LabBtn.appendChild(InpBtn);
DivBtn.appendChild(LabBtn);
document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
// La Balise [size] -- Taille de la police de caractère --
DivBtn = document.createElement( 'div' );
DivBtn.id = "SelSizeBB_"+IdName;
LabBtn = document.createElement( 'label' );
LabBtn.title = DesSize;
LabBtn.innerHTML = " "+DesSize+" : ";
InpBtn = document.createElement( 'select' );
InpBtn.id=NamSize[0];
InpBtn.name=NamSize[1];
var i = 0;
while (OptSize[i]) {
InpBtn.options[i] = new Option(OptSize[i],HtmSize[i]);
i++;
}
InpBtn.onchange = function() {
var objet = eval("document.Form"+IdName+"."+IdName+";");
var balise = this.id+this.options[this.selectedIndex].value+']';
var balise2 = this.name;
eval(Selection);
preview(IdName);
}
LabBtn.appendChild(InpBtn);
DivBtn.appendChild(LabBtn);
document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
}
function preview(Name) {
if (document.getElementById('Prev_'+Name).style.display == "none") return false;
var q1 = "<table align=center border=0 cellpadding=3 cellspacing=1 width=90%><tbody><tr><td><div align=\"left\" style=\"font-size : 11px; color: #000000;\"><b>";
var q2 = "</b></div></td></tr><tr><td align=\"left\" style=\"font-family: Arial; font-size: 11px; color: #444444; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-width: 1px;\">";
var q3 = "</td></tr></tbody></table>";
var texte = document.getElementById(Name).value;
texte=texte.replace(/</g, '<');
texte=texte.replace(/>/g, '>');
texte=texte.replace(/\r\n|\r|\n/g, '<br />');
texte=texte.replace(/\[(b|u|s|i|\/b|\/u|\/s|\/i)]/g,'<$1>');
texte=texte.replace(/\[color=([^\[]*)\]/mig, '<span style=\'color:$1;\'>');
texte=texte.replace(/\[bgcolor=([^\[]*)\]/mig, '<span style=\'background-color:$1;\'>');
texte=texte.replace(/\[font=([^\[]*)\]/mig, '<span style=\'font-family:$1;\'>');
texte=texte.replace(/\[size=([^\[]*)\]/mig, '<span style=\'font-size:$1;\'>');
texte=texte.replace(/\[\/(color|bgcolor|font|size)\]/gi,'</span>');
texte=texte.replace(/\[align=([^\[]*)\]/mig, '<div style=\'text-align:$1;\'>');
texte=texte.replace(/\[\/align]/gi, '</div>');
texte=texte.replace(/\[code]/gi, '<div align="left" style="color:#000000;font-weight:bold; font-size: 11px;">Code :</div><div style="color:#333333;background-color:#F0F0F0;" align="left"><code lang="fr">');
texte=texte.replace(/\[\/code]/gi, '</code></div>');
texte=texte.replace(/\[quote]/gi, q1+'Citation:'+q2);
texte=texte.replace(/\[quote=([^\[]*)\]/gi, q1+'$1 a écrit :'+q2);
texte=texte.replace(/\[\/quote]/gi, q3);
texte=texte.replace(/\[url]([^\]]*)\[\/url]/mig,'<a href="$1" target="_blank">$1</a>');
texte=texte.replace(/\[url=([^\[]*)\]([^\]]*)\[\/url\]/mig, '<a href=\'$1\' target=\'_blank\'>$2</a>');
texte=texte.replace(/\[mail]([^\[]*)\[\/mail]/mig,'<a href="mailto:$1" target="_blank">$1</a>');
texte=texte.replace(/\[mail=([^\[]*)\]([^\]]*)\[\/mail\]/mig, '<a href=\'mailto:$1\' target=\'_blank\'>$2</a>');
texte=texte.replace(/\[img]([^\]]*)\[\/img]/mig,'<img src="$1" border="0" />');
texte=texte.replace(/\[list=([^\]]*)\](.+)\[\/list]/mig, '<ul type="$1">$2</ul>');
texte=texte.replace(/\[\*]([^\[]+)(?=(\[\*])|(<\/ul>))/mig, '<li>$1</li>');
texte=texte.replace(/\<br \/><\/ul>/gi, '</ul>');
texte=texte.replace(/<\/ul><br \/>/gi, '</ul>');
texte=texte.replace(/<div([^\>]*)><br \/>/gi, '<div $1>');
texte=texte.replace(/<\/div><br \/>/gi, '</div>');
texte=texte.replace(/<span([^\>]*)><br \/>/gi, '<span $1>');
texte=texte.replace(/(<\/span><br \/>|<br \/><\/span><br \/>|<br \/><\/span>)/gi, '</span>');
texte=texte.replace(/<td([^\>]*)><br \/>/gi, '<td $1>');
texte=texte.replace(/<\/table><br \/>/gi, '</table>');
texte=texte.replace(/<code([^\>]*)><br \/>/gi, '<code $1>');
texte=texte.replace(/(<\/code><br \/>|<br \/><\/code>|<br \/><\/code><br \/>)/gi, '</code>');
document.getElementById('Prev_'+Name).innerHTML = '<fieldset><legend>Prévisualisation :</legend>'+texte+'</fieldset>';
return (texte);
}
Conclusion
la mise en forme de l'éditeur peut se faire via Feuille de Style (CSS) en vous basant sur les IDs correspondant de chaque élément (tout est expliqué a peux près sur le liens ci-dessus, voyait aussi le zip (bbcode.html) ).
Pour "installer" l'éditeur :
Entre <head> et </head> de votre page, ajoutez ceci : <script language="javascript" type="text/javascript" src="bbcode/bbcode.js"></script>
Entre <body> et </body> insérrer : <script language="javascript" type="text/javascript"> initBBcode('Instance','En voyer','Prévisualiser','test.php',600,400); </scri pt>
'Instance' => Correspond à la variable ou sera stocké le texte ex : document.getElementById('Instance').value , $_POST['Instance']; ...
'Envoyer' => Correspond au bouton d'envoie, c'est lui qui enverra le contenue 'Instance' a 'action.php'. 'Prévisualiser' => Correspond au bouton de Prévisu., il affichera une 'Layer/Div' avec le contenue de 'Instance', il se met a jour automatiquement a chaque changement de 'Instance'. 'test.php' => Correspond a la page et/ou url destinatrice. 600 => Largeur de l'éditeur en px. 400 => Hauteur de l'éditeur en px.
A noté que, dans le fichier test.php, après avoir récupéré le contenue de la variable, je remplace les \' et \" par ' et " si non le contenu html de la variable ne sera pas affiché correctement.
Je prévois un peux plus tard de faire une mise en forme directement dans le textarea, et une select pour le choix de l'éditeur (HTML ou BBCODE). Par exemple, si le navigateur est compatible avec la version HTML et BBCODE, il aura droit a faire un choix, si non, il aura directement droit a l'éditeur qui fonctionne et/ou qui fonctionne le mieux.
Si vous avez besoin de plus de commentaire et/ou de détails, faite m'en part, je ferrais un effort ^^
Historique
- 30 avril 2006 03:51:34 :
- Aucune, a part mise en forme, et ajout de commentaire (incomplète encore ^^' )
- 02 mai 2006 01:25:53 :
- - Ajout de la balise [align=X] ( X => left, center, right, justify )
- Modification de la taille de police de la balise [size] par : small, x-small, medium, large et x-large
- Le premier saut de ligne après et avant les balise ne sont pas compté
( [color], [font], [size], [quote] et [code] ainsi que cels de fermeture )
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Ouvrir un Editeur wysiwyg GRATUIT dans popup & OFFLINE [ par artus ]
Bonjour.J'ai reussi a trouver une Source Éditeur Wysiwyg Gratuit PAS MAL, complet mais online.Il y a t-il quelqu'un qui peut en faire un editeur OFFL
Editeur WYSIWYG - Ajouter du HTML à l'iframe [ par Tilix ]
Salut, J'ai pris un petit editeur wysiwyg sur internet (Source : http://www.ibilab.net/webdev/exemples/editeur-wysiwyg.htm) Et je voudrais ajouter
Editeur wysiwyg [ par baborge77 ]
Bonsoir, Super... ton Editeur wysiwyg.... http://www.javascriptfr.com/code.aspx?ID=33746 c'est exactement se dont j'avais besoin <
expression reguliere : img html vers bbcode [ par Full62 ]
bonjour,je veut utiliser une expression reguliere pour convertir mon code html vers du bbcode mais cela ne fonctionne pas...voici ce que j'ai mis ://
BBCode [ par tuneserapasmonnom ]
Bonsoir, j'ai besoin d'un code pour mon script mais je ne le trouve nulle part. En effet, j'aimerai faire en sorte que lorsque je clique sur une image
Wysiwyg : Rechercher un mot dans un SPAN ou un DIV ??? [ par fabiano13 ]
Bonjour,Je cherche a créer une fonction qui permet de rechercher un mot uniquement dans un span spécifique (<span id="wsy" ContentEditable></
Wysiwyg : comment enregistrer (SaveAs) le contenu d'un div ??? [ par fabiano13 ]
Bonjour,Je cherche a enregistrer le contenu d'un span (<span id="wsy" ContentEditable></span>)J'ai pourtant testé plusieurs choses :ws
utiliser editeur html de extJS dans un formulaire [ par xlight ]
salut a tous,Alors voila, je cherche à inclure dans un champ de mon formulaire l'editeur html que fourni extjs.Cependant, même en ayant épluché l'API
wysiwyg [ par rottweiler ]
Bonjour, je me souviens que le scripts wysiwyg de nix que j'utilise pour rédiger ce message est disponible quelque part mais je ne me souviens plus ou
AJAX ? Editeur [ par tuneserapasmonnom ]
Bonjour,Je ne m'y connais que très peu en javascript / ajax mais j'ai besoin d'appeler une fonction php quand je modifie un textarea. J'explique : Je
|
Derniers Blogs
TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Arnault Nouvel et Antoine Dongois Le processus à prendre : Apprendre (découvrir la plateforme) Préparer (documenter l'historique et choisir la méthode de MAJ) Test (Test de MAJ) Implémenter (Effectuer la MAJ) Valid...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOURTECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice
Après un retour sur l'histoire des TechDays de Paris et le fait que ce soit le plus gros event MS au monde (du fait de sa gratuité), le président de MS France (Eric Boustoullier) a fait une présentation de la vision Microsoft pour les années à venir...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice CRéATION D'UNE BASE DE DONNéE SOUS SQL AZURECRéATION D'UNE BASE DE DONNéE SOUS SQL AZURE par junarnoalg
Sans rentrer dans les détails, je me propose ici de faire un rapide tour de ce que propose SQL Azure.
SQL Azure est avant tout un service d'hébergement de base de données relationnelles construit sur SQL Server. Il permet aux entreprises d...
Cliquez pour lire la suite de l'article par junarnoalg TECHDAYS PARIS 2010 : LES SERVICES D'APPLICATIONS DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LES SERVICES D'APPLICATIONS DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Xavier Moreels et Julien Bakmezdjian Ce sujet est lié au partage des applications comme services dans SharePoint 2010, ceci représente la possibilité de créer sa propre application qui sera utilisable comme ceux en standard : Search...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
Comparez les prix

HTC Magic
Entre 429€ et 429€
|