IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Éditeur XML avec coloration syntaxique et numérotation des lignes


Sujet :

JavaScript

  1. #1
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    July 2017
    Messages
    325
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : July 2017
    Messages : 325
    Points : 64
    Points
    64
    Par défaut Éditeur XML avec coloration syntaxique et numérotation des lignes
    Bonjour,
    je cherche un champ de formulaire type textarea qui serve à rentrer du XML. Je veux la coloration syntaxique du XML et la numérotation des lignes.
    Merci de me dire si vous connaissez un composant le faisant.
    Bien cordialement

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    January 2011
    Messages
    16 921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : January 2011
    Messages : 16 921
    Points : 44 042
    Points
    44 042
    Par défaut
    Bonjour,
    regarde du côté de CodeMirror.

  3. #3
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    July 2017
    Messages
    325
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : July 2017
    Messages : 325
    Points : 64
    Points
    64
    Par défaut
    Merci cela dépasse mes espérances !

  4. #4
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    July 2017
    Messages
    325
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : July 2017
    Messages : 325
    Points : 64
    Points
    64
    Par défaut
    ah mince ! c'est du nodejs ! je n'utilise pas nodejs je voulais du javascript côté client SVP

  5. #5
    Membre éclairé
    Homme Profil pro
    Urbaniste
    Inscrit en
    August 2023
    Messages
    374
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Activité : Urbaniste

    Informations forums :
    Inscription : August 2023
    Messages : 374
    Points : 749
    Points
    749
    Par défaut
    Bonjour,

    il vous faut le compiler pour les navigateurs.

    https://codemirror.net/examples/bundle/

    Bonne journée.

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    January 2011
    Messages
    16 921
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : January 2011
    Messages : 16 921
    Points : 44 042
    Points
    44 042
    Par défaut
    Pas nécessairement, on peut utiliser cdnjs ou encore télécharger les fichiers.

    Exemple :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    <!DOCTYPE html>
    <html lang="fr">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeMirror: Theme Demo</title>
    <meta name="Author" content="NoSmoking">
    <meta name="DVP-discussion" content="d-------">
    <meta name="category" content="JS">
    <!--
    <base href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/">
    -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/mdn-like.min.css">
     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/edit/matchbrackets.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/addon/selection/active-line.min.js"></script>
     
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/xml/xml.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/css/css.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
    <style>
    html, body {margin: 0;padding: 0;font: 1em/1.5 Verdana,sans-serif;}
    h1, h2, h3 {margin: .25em 0;color: #069;}
    time {float: right;margin: .5em;font-size: 0.9em;color: #666;}
    main {display: block;margin: auto;max-width: 60em;}
    section {position: relative;margin: 0 1em 1em;}
    section > :not(h2) {margin-left: 1em !important;}
    .CodeMirror {border: 1px solid black;font-size:1rem;height: 15rem;}
    </style>
    <body>
    <main>
      <h1>CodeMirror exemples</h1>
      <section>
        <h2>Code XML</h2>
        <form>
          <textarea id="code-xml">
    &lt;phrase titre-livre=&quot;XML idiot&quot;&gt;
      &lt;paragraphe&gt;
        &lt;chapitre&gt;
          &lt;toto&gt;
            &lt;livre&gt;
              &lt;titi&gt;Informatique sans bon sens n’est que ruine de l&apos;âme et
                perte de temps.&lt;/titi&gt;
            &lt;/livre&gt;
          &lt;/toto&gt;
        &lt;/chapitre&gt;
      &lt;/paragraphe&gt;
    &lt;/phrase&gt;</textarea>
        </form>
      </section>
     
      <section>
      <h2>Code CSS</h2>
      <form><textarea id="code-css">
    .CodeMirror {
      font-family: monospace;
      height: 300px;
      color: #000;
      direction: ltr
    }
    .CodeMirror-lines {
      padding: 4px 0
    }
    .CodeMirror pre.CodeMirror-line,.CodeMirror pre.CodeMirror-line-like {
      padding: 0 4px
    }
    .CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler {
      background-color: #fff
    }</textarea>
        </form>
      </section>
     
      <section>
      <h2>Code JS</h2>
      <form><textarea id="code-js">
    function findSequence(goal) {
      function find(start, history) {
        if (start == goal)
          return history;
        else if (start > goal)
          return null;
        else
          return find(start + 5, "(" + history + " + 5)") ||
            find(start * 3, "(" + history + " * 3)");
      }
      return find(1, "1");
    }</textarea>
        </form>
      </section>
      <section>
        <h2>Ressources</h2>
        <ul>
          <li><a target="codemiror" href="https://codemirror.net/doc/5/manual.html">Documentation (v5)</a>
          <li><a target="codemiror" href="https://codemirror.net/5/demo/theme.html">Theme Demo</a>
          <li><a target="codemiror" href="https://cdnjs.com/libraries/codemirror">Tous les fichiers sont sur cdnjs</a>
        </ul>
      </section>
      </main>
    <script>
    "use strict";
    const editorXML = CodeMirror.fromTextArea(document.getElementById("code-xml"), {
      lineNumbers: true,
      styleActiveLine: true,
      selectionPointer: true,
      mode: "text/html",
    });
     
    const editorJS = CodeMirror.fromTextArea(document.getElementById("code-js"), {
      lineNumbers: true,
      styleActiveLine: true,
      selectionPointer: true,
      mode: "javascript",
    });
     
    const editorCSS = CodeMirror.fromTextArea(document.getElementById("code-css"), {
      lineNumbers: true,
      styleActiveLine: true,
      selectionPointer: true,
      theme: "mdn-like",
      mode: "css",
    });
    </script>
    </article>

  7. #7
    Membre du Club
    Homme Profil pro
    Développeur Web
    Inscrit en
    July 2017
    Messages
    325
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Vienne (Poitou Charente)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : July 2017
    Messages : 325
    Points : 64
    Points
    64
    Par défaut
    parfait NoSmoking ton exemple marche parfaitement !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réalisation un éditeur avec coloration syntaxique.
    Par Beginner. dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 01/06/2015, 02h41
  2. Réponses: 21
    Dernier message: 27/04/2013, 18h27
  3. Réponses: 1
    Dernier message: 01/02/2013, 15h53
  4. Éditeur avec coloration syntaxique
    Par Raylemon dans le forum C#
    Réponses: 17
    Dernier message: 28/05/2009, 12h23
  5. Recherche éditeur de texte simple avec coloration syntaxique
    Par Invité1 dans le forum EDI et Outils pour Java
    Réponses: 5
    Dernier message: 22/08/2008, 23h23

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo