Comment ajouter le numero de la ligne

afficher le numero des lignes dans un editeur

danielonas

12 décembre 2018 à 13:01:21

Bonjour chers membres.

Bon je ne sais ce que vont penser certains, mais je n'éssais pas de rinventer la roue.

Mon problème est le suivant :

J'éssai d'écrire un éditeur de code en HTML5, CSS3, JavaScript.

Je confronté au problème suivant :

Je ne sais pas comment afficher le numero des lignes à gauche comme dans la plus part des éditeurs.

J'amerais avoir quelque chose de ce genre : Les numéros des lignes sont à gauche .

Voici le code de base :

<html>
<head>
<meta charset="utf-8">
<title>Bienenue sur mon editeur de texte en ligne</title>
</head>
<body>
<div id="editeur">
  <div id="editeur_code">
    <textarea id="code"></textarea>
  </div>
  <div id="line">
    <font>
      <font style="">1</font>
    </font>
  </div>
</div>
<div id="liveShow">

</div>
</body>
</html>

function wordCount( val ){
    let wom = val.match(/\S+/g);
    return {
        charactersNoSpaces : val.replace(/\s+/g, '').length,
        characters         : val.length,
        words              : wom ? wom.length : 0,
        lines              : val.split(/\r*\n/).length
    };
}


let textarea = document.getElementById("code");
let result   = document.getElementById("liveShow");

textarea.addEventListener("input", function(){
    let v = wordCount( this.value );
    result.innerHTML = (
        "<br>"+v.charactersNoSpaces +" Caractère(s) (avec sans espace) "+
        "<br>"+ v.characters + " Caractère(s) avec espace "+
        "<br>"+ v.words + " Mot(s) "+
        "<br>"+ v.lines +" Ligne(s) "
    );
}, false);

faso-dev

Arthur222

12 décembre 2018 à 22:02:57

salut, avec un table en html, une colonne pour les numeros, une colonne pour le code.

danielonas

13 décembre 2018 à 10:12:28

Avec un tableau en html, mais est-ce possible de mettre un textarea à intérieur d'une table ??

Par exemple, sur ce formulaire on a un champ ou on saisi nos message, voila je veux un truc comme ca mais avec les numero des lignes à gauche.

Explique moi si possible la démarche dont tu parles, si possible avec un bout de code

faso-dev

Arthur222

13 décembre 2018 à 16:46:36

Regarde peut etre le code source de jsfiddle, clic droit > examiner element, ils ont fait ce que tu veux faire.

danielonas

13 décembre 2018 à 20:43:03

Ok merci pour l'intervention.

Je vais voir sur le site dont tu parles si je pourai m'inspirer

faso-dev

Majoras16Forever

14 décembre 2018 à 22:02:18

Je pense que tu peux fare un truc avec while() ou for() en JS, donc t’a tes chiffres et après ton textarea:

1 [Champ de texte]

et tu incrémentes une variable et affiche sa valeur au début de la ligne