Complétion de code

Soyez le premier à donner votre avis sur cette source.

Vue 4 253 fois - Téléchargée 214 fois

Description

voilà ma version BETA de complétion d'un code que j'ai inventé pour formater le texte des forums d'un site de programmation...

DONC ça permet d'écrire du code qui n'a pas encore de documentation puisque c'est encore en dév et tout et tout...

Source / Exemple :


<html>
<head>
<title>Test d'éditeur avec complétion de code</title>
<style>
<!--
textarea
{
    font-family: 'Courier New';
    font-size: 13px;
    border: solid 1px #7F9DB9;
    width: 768px;
    height: 200px;
}

.normal
{
    color: #474747;
    font-family: Tahoma, Helvetica, "Bitstream Vera Sans", sans-serif;
    font-size: 11px;
    font-weight: normal;
}

.Editeurbleu
{
    color: #6699CC;
    font-weight: bold;
}

.Editeuraide
{
    font-style: italic;
    color: #A0A0A0;
}

tr.Editeurnormal
{
    font-family: Tahoma; 
    font-size: 11px; 
    color: #606060;
    background-color: #FFFFEE;
    cursor: pointer;
}

tr.Editeurmover
{
    font-family: Tahoma; 
    font-size: 11px; 
    color: #606060;
    background-color: #DDEEFF;
    cursor: pointer;
}
-->
</style>
<script type="text/javascript">

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 Objet Mot, contient les données d'un mot à compléter
 ------------------------------------------------------------
 Propriété  Construction    Description
 ------------------------------------------------------------
 mot        strMot          le mot
 aide       strAide         l'aide concernant ce mot
 apres      bApres          vrai s'il y a quelque chose après sinon faux
 ferme      bFerme          vrai si la balise doit être fermée sinon faux (uniquement pour niveau zéro)

  • * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function Mot (strMot, strAide, bApres, bFerme) { this.mot = strMot; this.aide = strAide; this.apres = bApres; this.ferme = bFerme; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Objet Liste de mots, contient une liste des mots disponibles ------------------------------------------------------------ Propriété Construction Description ------------------------------------------------------------ niveau iNiveau niveau de la liste avant strAvant mot qui DOIT précéder mots arrMots tableau d'objets mot
  • * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function ListeMot (iNiveau, strAvant, arrMots) { this.niveau = iNiveau; this.avant = strAvant; this.mots = arrMots; // Crée la liste HTML à afficher en tenant compte de l'égalité éventuelle // strAvant: chaine du texte déjà écrit // strEgalite: égalité à vérifier this.creerListe = function (strAvant, strEgalite) { // Soyons fous ! strEgalite = strEgalite.split(" ")[0].split("\r")[0].split("\n")[0].split("\t")[0]; if (strEgalite == "") strEgalite == null; var retour = ""; for (i = 0; i < this.mots.length; i++) { if (strEgalite == null || this.mots[i].mot.substr(0, strEgalite.length) == strEgalite) { if (retour == "") retour = "<table border=\"0\" cellpadding=\"2\" cellspacing=\"0\">"; if (strEgalite == null) strCompletion = this.mots[i].mot; else strCompletion = this.mots[i].mot.substr(strEgalite.length, this.mots[i].mot.length - strEgalite.length); if (this.mots[i].apres) strCompletion += ":"; else strCompletion += "]"; retour += "<tr class=\"Editeurnormal\" onmouseover=\"javascript:this.className = 'Editeurmover'\" onmouseout=\"javascript:this.className = 'Editeurnormal';\" onmouseup=\"javascript:ajouteTexte('" + strCompletion + "');\">"; retour += "<td>"; retour += strAvant + " <span class=\"Editeurbleu\">" + this.mots[i].mot + "</span>"; if (this.mots[i].apres) retour += " :"; else retour += " ]"; retour += "</td>"; retour += "<td class=\"Editeuraide\">" + this.mots[i].aide; retour += "</td>"; retour += "</tr>"; } } if (retour == "") retour = "<div style=\"font-family: Tahoma; font-size: 11px; font-weight: bold; color: #FFFFFF; background-color: #DD0000; padding: 4px;\">Erreur dans le code !</div>"; else retour += "</table>"; return retour; } } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Objet Code, contient les données d'un code ------------------------------------------------------------ Propriété Construction Description ------------------------------------------------------------ niveaux arrNiveaux tableau des niveaux de la balise position iPosition position dans le texte en caractères (0 = 1er carac, etc...) longueur iLongueur longueur du texte original du code ferme bFerme vrai si la balise est finie par un "]" sinon faux balisefin bBaliseFin vrai si la balise commence pa "[/" et donc est une balise de fin abalisefin bABaliseFin si la balise n'est pas une balise de fin, est-ce qu'elle possède une balise de fin ?
  • * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function Code (arrNiveaux, iPosition, iLongueur, bFerme, bBaliseFin, bABaliseFin) { this.niveaux = arrNiveaux; this.position = iPosition; this.longueur = iLongueur; this.ferme = bFerme; this.balisefin = bBaliseFin; this.abalisefin = bABaliseFin; // ce qu'on a déjà tapé (pour affichage en début de chaque mot de la liste) this.avant = "[" + this.niveaux.join(":"); while (this.avant.substr(this.avant.length - 1, 1) != ":" && this.avant.length > 1) this.avant = this.avant.substr(0, this.avant.length - 1); } // Tableau des listes // c'est lui qui contient TOUT var LM = new Array(); // Liste des mots de la racine var tmp = new Array(); tmp[0] = new Mot("citer", "Insérer une citation", true, true); tmp[1] = new Mot("code", "Insérer du code source", true, true); tmp[2] = new Mot("correct", "Insérer une correction", false, true); // ToDo: gérer uniquement dans un [code]/code à gérer tmp[3] = new Mot("el", "Insérer un élément de liste", false, true); // ToDo: gérer uniquement dans un [liste]/liste à gérer tmp[4] = new Mot("err", "Insérer une erreur", false, true); // ToDo: gérer uniquement dans un [code]/code à gérer tmp[5] = new Mot("expr", "Insérer une expression", true, true); tmp[6] = new Mot("liste", "Insérer une liste", true, true); tmp[7] = new Mot("titre", "Insérer un titre", true, true); LM.push(new ListeMot(0, null, tmp)); // Liste des langages pour le code var tmp = new Array(); tmp[0] = new Mot("c", "Langage C", true, false); tmp[1] = new Mot("cpp", "C++", true, false); tmp[2] = new Mot("csharp", "C#", true, false); LM.push(new ListeMot(1, "code", tmp)); // Liste des langages pour le expr var tmp = new Array(); tmp[0] = new Mot("c", "Langage C", false, false); tmp[1] = new Mot("cpp", "C++", false, false); tmp[2] = new Mot("csharp", "C#", false, false); LM.push(new ListeMot(1, "expr", tmp)); // Liste des types de listes var tmp = new Array(); tmp[0] = new Mot("num", "Numérique", false, false); tmp[1] = new Mot("puces", "A puces", false, false); LM.push(new ListeMot(1, "liste", tmp)); // Liste des tailes de titres var tmp = new Array(); tmp[0] = new Mot("1", "Très grand", false, false); tmp[1] = new Mot("2", "Grand", false, false); tmp[2] = new Mot("3", "Moyennement grand", false, false); tmp[3] = new Mot("4", "Moyennement petit", false, false); tmp[4] = new Mot("5", "Petit", false, false); tmp[5] = new Mot("6", "Très petit", false, false); LM.push(new ListeMot(1, "titre", tmp)); // on dégage tmp pour libérer la mémoire tmp = null; function texte_KeyPress(objTextarea, keyCode) { // on récupère l'objet divListe objListe = document.getElementById("divListe"); // on récupère le caractère d'à la ligne if (objTextarea.value.indexOf("\r\n") > -1) crlf = "\r\n"; // Windows else if (objTextarea.value.indexOf("\r") > -1) crlf = "\r"; // Mac OS else crlf = "\n"; // Unix/Linux // on récupère la position du curseur dans le texte iPosCurseur = trouvePosCurseur(objTextarea); iCode = -1; // on sépare les mots et les "codes" potentiels tampon = ""; mots = new Array(); for (i = 0; i < objTextarea.value.length; i++) { carac = objTextarea.value.substr(i, 1); if (carac == "[") { if (tampon != "") { mots.push(tampon); } tampon = carac; } else if (carac == "]") { mots.push(tampon + carac); tampon = ""; } else { tampon += carac; } } if (tampon != "") mots.push(tampon); // on crée la liste des objets de chaque mot DE CODE uniquement iPosition = 0; codTexte = new Array(); for (i = 0; i < mots.length; i++) { lemot = mots[i]; if (lemot.substr(0, 1) == "[") { // la balise est elle fermee ? if (lemot.substr(lemot.length - 1, 1) == "]") ferme = true; else ferme = false; // est-ce une balise de fin ? if (lemot.length > 1) { if (lemot.substr(1, 1) == "/") { balisefin = true; abalisefin = false; } else { balisefin = false; abalisefin = true; } } else { balisefin = false; // on ne peut pas chercher la balise de fin abalisefin = false; } // on récupère les niveaux lemot = lemot.substr(1, lemot.length - (ferme ? 2 : 1)); if (lemot.substr(0, 1) == "/") lemot = lemot.substr(1, lemot.length - 1); niveaux = lemot.split(":"); // si on peut chercher une balise de fin éventuelle if (abalisefin) { abalisefin = false; // on cherche la balise de fin (ou la prochaine balise similaire) for (j = i + 1; j < mots.length; j++) { // trouvé, ok, on quitte if (mots[j] == "[/" + niveaux[0] + "]") { abalisefin = true; break; } else if (mots[j].substr(0, niveaux[0].length + 2) == "[" + niveaux[0] + "]" || mots[j].substr(0, niveaux[0].length + 2) == "[" + niveaux[0] + ":") { abalisefin = false; break; } } } // on peut enfin créer notre objet codNouveau = new Code(niveaux, iPosition, mots[i].length, ferme, balisefin, abalisefin); codTexte.push(codNouveau); // On regarde si c'est le Code pour lequel .position <= iPosCurseur && .position + .longueur >= iPosCurseur // ce code est celui sur lequel se trouve actuellement le curseur if (codNouveau.position < iPosCurseur && codNouveau.position + codNouveau.longueur >= iPosCurseur) iCode = codTexte.length - 1; } // on actualise la position iPosition += mots[i].length; } // si le curseur n'est sur aucun code if (iCode == -1) { objTextarea.focus(); objListe.style.visibility = "hidden"; return; } else // Sinon { if (!codTexte[iCode].ferme && !codTexte[iCode].balisefin) // Si on est pas fermé { // On cherche la liste de .niveau == codTexte[iCode].niveaux.length - 1 // et dont .avant == codTexte[iCode].niveaux[codTexte[iCode].niveaux.length - 2] iListe = -1; for (i = 0; i < LM.length; i++) { if (LM[i].niveau == codTexte[iCode].niveaux.length - 1 && LM[i].avant == codTexte[iCode].niveaux[codTexte[iCode].niveaux.length - 2]) { iListe = i; // trouvée break; } } // Si on ne l'a pas trouvée if (iListe == -1) { objTextarea.focus(); objListe.style.visibility = "hidden"; return; } else // Sinon { objListe.innerHTML = LM[iListe].creerListe(codTexte[iCode].avant, codTexte[iCode].niveaux[codTexte[iCode].niveaux.length - 1]); positionneListe(objTextarea, objListe); objListe.style.visibility = "visible"; } } else if (!codTexte[iCode].balisefin && !codTexte[iCode].abalisefin && codTexte[iCode].niveaux[0] != "citer" && keyCode != 8 && keyCode != 46) // Si on est pas une balise de fin et si on a pas de balise de fin { // On ajoute la balise de fin correspondante ajouteTexte("[/" + codTexte[iCode].niveaux[0] + "]"); objTextarea.focus(); if (objTextarea.createTextRange) // IE { iPosition = trouvePosCurseur(objTextarea); posCurseur = objTextarea.createTextRange(); posCurseur.move("character", iPosition - (codTexte[iCode].niveaux[0].length + 3)); posCurseur.select(); } else if (objTextarea.setSelectionRange) // NN/Mozilla { objTextarea.selectionStart -= (codTexte[iCode].niveaux[0].length + 3); objTextarea.selectionEnd = objTextarea.selectionStart; } objListe.style.visibility = "hidden"; } else { // En attendant la suite... objTextarea.focus(); objListe.style.visibility = "hidden"; } } } function positionneListe(objTextarea, objListe) { // on récupère le caractère d'à la ligne if (objTextarea.value.indexOf("\r\n") > -1) crlf = "\r\n"; // Windows else if (objTextarea.value.indexOf("\r") > -1) crlf = "\r"; // Mac OS else crlf = "\n"; // Unix/Linux objTextarea.focus(); if (objTextarea.createTextRange) // IE { posCurseur = window.document.selection.createRange().duplicate(); objListe.style.left = posCurseur.boundingLeft + posCurseur.boundingWidth + objTextarea.scrollLeft; objListe.style.top = posCurseur.boundingHeight * (objTextarea.value.substr(0, trouvePosCurseur(objTextarea)).split(crlf).length) + objTextarea.scrollTop + lHaut(objTextarea); } else if (objTextarea.setSelectionRange) // NN/Mozilla { // Comment faire ? } } function lHaut (objTextarea) { i = objTextarea.offsetTop; obj = objTextarea.offsetParent; while (obj) { i += obj.offsetTop; obj = obj.offsetParent; } return i; } // Trouve la position du curseur dans le texte function trouvePosCurseur(objTextarea) { objTextarea.focus(); if (objTextarea.createTextRange) // IE { posCurseur = document.selection.createRange().duplicate(); posCurseur.collapse(); posCurseur.moveStart("textedit", -1); return posCurseur.text.length; } else if (objTextarea.setSelectionRange) return objTextarea.selectionStart; // NN/Mozilla else return -1; // ? } // Ajoute du texte là ou est le curseur function ajouteTexte(strAjout) { objTextarea = document.frmEditeur.texte; objTextarea.focus(); if (objTextarea.createTextRange) document.selection.createRange().text += strAjout; // IE else if (objTextarea.setSelectionRange) // NN/Mozilla { iLongueur = objTextarea.selectionEnd; objTextarea.value = objTextarea.value.substr(0, iLongueur) + strAjout + objTextarea.value.substr(iLongueur); objTextarea.setSelectionRange(iLongueur + strAjout.length, iLongueur + strAjout.length); } else objTextarea.value += strAjout; // ? texte_KeyPress(objTextarea, 0); } // Vérifie que les données soumises sont correctes function verifEditeur(objTextarea) { if (objTextarea.value.replace("\r", "").replace("\n", "").replace("\t", "").replace(" ", "") == "") { alert("Vous devez saisir un message !"); objTextarea.focus(); return false; } else return true; } </script> </head> <body> <!-- Editeur --> <form name="frmEditeur" action="" method="post"> <textarea name="texte" onkeyup="javascript:if (frmEditeur.aidesaisie.checked) texte_KeyPress(this, event.keyCode);"></textarea> <table border="0" cellspacing="0" cellpadding="2"> <tr> <td><input type="checkbox" name="aidesaisie" checked></td> <td class="normal">Aide à la saisie</td> </tr> </table> </form> <div id="divListe" style="position: absolute; border: outset 1px; padding: 0px; visibility: hidden"></div> </body> </html>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
393
Date d'inscription
mardi 2 décembre 2003
Statut
Membre
Dernière intervention
29 septembre 2008

salut
ca a l'air d'etre bien mais perso ca marche pas (ie5)
a la moindre lettre que je tape il sort une erreur
Messages postés
224
Date d'inscription
samedi 25 janvier 2003
Statut
Membre
Dernière intervention
17 juin 2006

paske ya pa bocoup de codes surement, j'utilise de bien plus grands tableaux en vérité et donc ça rame

et ça ne marche que sous FF, Mozilla et Epiphany
Messages postés
290
Date d'inscription
jeudi 26 août 2004
Statut
Membre
Dernière intervention
25 avril 2008

Chez moi, cela ne ralentis pas...

Il y a un petit 'bug', lors de l'insertion du code, le curseur ne se retrouve pas entre les ][,il se trouve ailleur, apres le [/ la plupart du temps.
Messages postés
224
Date d'inscription
samedi 25 janvier 2003
Statut
Membre
Dernière intervention
17 juin 2006

wow je sais pas si vous avez remarqué mais au bout d'à peine 5 lignes ça rame méchament...
Messages postés
224
Date d'inscription
samedi 25 janvier 2003
Statut
Membre
Dernière intervention
17 juin 2006

je viens juste de tester :

IE (Win) : ça marche car il n'y a pas de texte avant la textarea

FireFox 1.0 (Win), Mozilla (Linux), Epiphany (Linux) : ça marche mais liste en bas avec sélection cheloue

Konqueror (Linux) : marche pas
Afficher les 8 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.