JdBEdit BÊTA  
A PROPOS
JdBEdit
  • Nouveau Ctrl + Alt + N
  • Ouvrir Ctrl + Alt + O
  • Enregistrer Ctrl + S
  • Enregistrer sur Drive
  • Enregistrer un brouillon Ctrl + B
  • Notes
  • Télécharger
  • Télécharger au format Word
  • Dupliquer
  • Partager
  • Supprimer Ctrl + Shift + S
  • Annuler Ctrl + Z
  • Rétablir Ctrl + Y
  • Effacer l'historique Alt + W
  • Séléctioner tout Ctrl + A
  • Commenter/Décommenter
    <!-- BlaBla -->
  • Ajouter un extrait de code
  • Ajouter une ressource externe
  • Ouvrir dans CodePen
  • Plein écran F11
  • Info Masqués
  • Outils
    • Encodeur & décodeur d'URL
    • Sélecteur de couleur
  • Console Ctrl + Alt + C
  • Paramètres Ctrl + Alt + S
  • Rechercher Ctrl + F
  • Trouver le suivant Ctrl + G
  • Trouver le précedent Ctrl + Shift + G
  • Remplacer [..] Ctrl + Shift + F
  • Remplacer tout Ctrl + Shift + R
  • Supprimer la ligne ←
  • Supprimer la ligne →
  • Supprimer la ligne entière
  • Aller à la nème ligne Alt + G
  • Aller à la 1ère ligne Ctrl + Home
  • Aller à la dernière ligne Ctrl + End
  • Nouvelle ligne et retrait Entrée
  • Faire un rétrait Tab
  • Faire un rétrait automatiqueShift + Tab
  • Qui êtes-vous ?
  • Raccourcis Ctrl + Alt + K
  • Documentation
  • Paramètres URL
  • État du service
  • Notes de mise à jour
  • Règles de sauvegarde
  • Conditions
  • Cookies
  • Faire un don
Exécuter Mode : text/html Taille du cadre d'aperçu :  705 x 599
Ligne 0, colonne 0 Total ligne 0 0 sélectionné 0 sélection
lecture seule : Tabs : Thème : Mode : Version : 2.21.0
35
1
<!DOCTYPE html>
2
<html lang="fr">
3
<head>
4
  <title>JdBEdit - Demo</title>
5
  <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
6
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
7
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
8
  <style type="text/css">
9
    body {
10
      font-family: Arial, Helvetica, sans-serif
11
    }
12
    h1 {
13
      color: #779dBE
14
    }
15
  </style>
16
</head>
17
<body>
18
  <!-- Contenu à afficher -->
19
  <h1>Hello World</h1>
20
  <p>Bienvenue sur JdBEdit</p>
21
  <p>Cliquez sur le bouton ci-dessous pour le désactiver.</p>
22
  <input type="button" value="Cliquez pour désactiver"/>
23
  <script type="text/javascript">
24
    // Ouvrez la console (Ctrl + Shift + I ou F12)
25
    // pour voir le texte ci-dessous
26
    console.log("Et voilà !");
27
​
28
    var btns = document.querySelectorAll("input[type=button]");
29
    btns[0].onclick = function() {
30
      this.setAttribute("disabled", true);
31
      this.value = "Bouton désactivé";
32
    };
33
  </script>
34
</body>
35
</html>

avec & par José dBruxelles. © 2025 JdBEdit

Menu B

Options
Ouvrir un fichier Enregistrer le fichier Télécharger le fichier Signaler un problème
A propos

Créé en 2017, JdBEdit est maintenu et amélioré par José dBruxelles.

Logo JdBEdit

JdBEdit est un éditeur de code à portée de main développé à l'aide du langage de programmation JavaScript.

Version2.21.0
Dernière mise à jour il y a un an
CréditsLicence

Conditions / Copyright © 2025

Portail de connexion

Connexion

Connectez-vous avec l'un des éléments suivants pour pouvoir enregistrer votre code en votre nom :

En vous connectant à JdBEdit avec votre compte GitHub, vous reconnaissez avoir lu et acceptez ces Conditions.

Vous n'avez pas de compte GitHub ? Inscrivez-vous

Enregistrer votre code

Sauvegardez votre travail dès maintenant. Vous pourrez revenir à des versions précédemment sauvegardées.

En cliquant sur le bouton "Enregistrer", votre code sera enregistré en tant qu'une nouvelle version et vous obtiendrez des liens que vous pourrez partager avec d'autres personnes ou intégrez dans un site web. Vous acceptez par la même occasion les termes et conditions de JdBEdit.

Signaler un bug

Détails du fichier

Charger à partir de Gist

Si vous souhaitez ouvrir un fichier gist, vous pouvez le faire en insérant son adresse du lien ou tout simplement son ID dans le champ ci-dessous :

Importer de cet appareil

Importer ou faites glisser et déposer un ou plusieurs fichiers ici

Vous pouvez aussi glisser et déposer vos codes directement à l'endroit voulu dans l'éditeur.

Historique

Options de téléchargement

Sélectionnez les types de fichier à télécharger ou importez une sauvegarde

 Fichiers ouverts (0)

Fichier(s) ouvert(s) sur ce navigateur
NomID

Fichiers dupliqués (0)

Fichier(s) dupliqué(s) sur ce navigateur
NomID

Fichiers supprimés (0)

Fichier(s) supprimé(s) sur ce navigateur

Lorsque vous supprimez un élément de ce tableau, veuillez le supprimer également des deux autres tableaux ci-dessus, pour éviter qu'il réapparaisse.

NomID

Les raccourcis clavier


Gagnez du temps en utilisant les raccourcis clavier les plus courants et ceux personnalisés pour JdBEdit.

Basculez les modes d'affichage, sauvegarde, embellissement, exécution, décalage de lignes, zoom et plein d'autres actions pratiques sans que vos mains ne quittent le clavier.

63 raccourcis trouvé

ActionsCombinaison de touches
CopierCtrl + C
CouperCtrl + X
CollerCtrl + V
AnnulerCtrl + Z
RefaireCtrl + Y
Nouveau fichierCtrl + Alt + N
Ouvrir un fichier (Gist Github)Ctrl + Alt + O
Sauvegarder le code actuel en ligneCtrl + S
Sauvegarder le code actuel entant que brouillonCtrl + B
Supprimer le fichier actuel (s'il vous appartient)Ctrl + Shift + S
Embellir le codeCtrl + Enter
Edition en mode plein écranF11
Aperçu en mode plein écranCtrl + Alt + F
Quitter l'édition ou l'aperçu en mode plein écranF11 ou Echap
Activer ou désactiver le mode lecture seuleCtrl + Shift + L
Afficher ou fermer les raccourisAlt + S
Exécuter le code (Editeur ou Console)Alt + E
Effacer l'historique des modificationsAlt + W
Sélectionner toutCtrl + A
Sélectionner la ligneCtrl + L
Refaire la sélectionCtrl + U
Annuler la sélectionEchap
Commenter ou décommenter la sélectionCtrl + /
Rechercher(Ctrl + F) ou (Ctrl + G)
Trouver le suivantCtrl + G
Trouver le précédentCtrl + Shift + G
Trouver le (groupe de) mot suivant similaire à celui sélectionnéCtrl + F3
Trouver le (groupe de) mot précédent similaire à celui sélectionnéCtrl + Shift + F3
Remplacer(Ctrl + H) ou (Ctrl + Shift + F)
Remplacer toutCtrl + Shift + R
Recherche persistante (La boîte de dialogue reste active)Alt + F

Enter = trouver le Suivant,

Maj + Enter = trouver le précédent.
Activer ou désactiver le mode lecture seuleCtrl + Alt + L
AutocomplétionCtrl + Espace
Autocomplétion à partir du document (Force)Ctrl + Alt + Espace
Aperçu en plein écranCtrl + Alt + F
Plier/Déplier la balise activeCtrl + Q
Aller à la ligne ...Alt + G
Aller au début du documentCtrl + Home
Aller à la fin du documentCtrl + End
Fusionner les lignesCtrl + J
Ajouter une ligne au dessusCtrl + Shift + Enter
Ajouter une ligne au dessousCtrl + Enter
Supprimer la ligne activeCtrl + Shift + K
Supprimer la partie droite du curseurCtrl + K
Supprimer la tabulation devant la ligne activeShift + Tab
Surligner une répétitionCtrl + D
Décaler d'une ligne vers le basCtrl + Shift + Haut (↑)
Décaler d'une ligne vers le hautCtrl + Shift + Bas (↓)
Dupliquer une ligneCtrl + Shift + D
Sélectionner la ligneCtrl + L
Transposer des caractèresCtrl + T
Center la ligne sur l'écranCtrl + K C
Faire une majusculeCtrl + K U
Faire une minusculeCtrl + K L
Afficher le Menu ACtrl + Alt + A
Afficher le Menu BCtrl + Alt + B
Afficher les paramètresCtrl + Alt + S
Afficher le panneau des raccourisCtrl + Alt + K
Afficher le panneau des notificationsCtrl + Alt + 0
Afficher la Console Ctrl + Alt + C
Afficher le panneau des librairiesCtrl + Alt + L
Afficher le panneau des fonctionnalitésCtrl + Alt + D
Développer l'abréviation Emmet(Ctrl + E) ou Tab

Signaler un problème


Votre commentaire est toujours le bienvenu. En conséquence, ne vous énervez pas si je mets du temps à vous répondre, voir si j’oublie carrément de répondre. Normalement, tous les messages sont lus dans les 24h.

Signaler le bug via GitHub (récommandé) - Ignorer

Combien font 4 + 21 + 1 =  ?

Valider le captcha

Afin de m'assurer que vous êtes une vraie personne et de me protéger contre le spam et les abus, veuillez valider le captcha ci-dessus.

Vous avez oublié quelque chose? Pas de panique, car vous pouvez encore apporter des modifications au formulaire. Si tout est bon, cliquez sur "Envoyer" pour confirmer l'envoie.

Paramètres JdBEdit

Vous pouvez ajoutez une balise meta description à au code:

Rendre public le code ? Les fichiers privés sont cachés des moteurs de recherche mais peuvent être consultés par tous les utilisateurs disposant du lien.

Saisir une police système

<script type="text/javascript">
  /* Aperçu de la police */
  function getLength (text) {
    return text ? text.length : 0;
  }
  var text = getLength("Wetrafa");
  console.log(text) // => 7
</script>

URL Encoder

URL - Uniform Resource Locator

Les navigateurs Web demandent des pages à partir de serveurs Web en utilisant une URL.
L'URL est l'adresse d'une page Web, comme : https://code.wetrafa.xyz.

L'encodage d'URL convertit les caractères en un format qui peut être transmis sur Internet.


Le décodage d'URL convertit les caractères du format Web en format lisible.

JdBEdit Console

Vous pouvez tester vos scripts JavaScript ici

Saisissez le code JavaScript à exécuter
xxxxxxxxxx

Sélecteur de couleur

Aucune couleur n'est sauvegardée pour le moment.

COULEUR SURVOLÉE :

HSL : hsl(213, 33%, 25%)

RGB : rgb(43, 62, 85)

HEX : #2b3e55

Extraits de code

<!-- Ajoutez votre commentaire ici -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<table class="jdb-table-all">
  <tr>
    <th>En-tête</th>
    <th>En-tête</th>
  </tr>
  <tr>
    <td>Valeur</td>
    <td>Valeur</td>
  </tr>
</table>
<img class="jdb-img" height="auto" width="100%" src="lib/img/code.exemple.jpg"/>
<ol>
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ol>
<ul class="jdb-ul">
  <li>Élément 1</li>
  <li>Élément 2</li>
  <li>Élément 3</li>
</ul>
<form action="/" method="POST">
  <label for="first-name">Prénom</label><br/>
  <input id="first-name" type="text" name="firstname"><br/>
  <label for="last-name">Nom</label><br/>
  <input id="last-name" type="text" name="lastname"><br/>
  <label for="message">Message</label><br/>
  <textarea id="message" placeholder="Texte"></textarea><br/>
  <input type="submit" value="Envoyer">
</form>
<script src="lib/js/script.js" type="text/javascript"></script>
<link href="lib/css/style.css" rel="stylesheet" type="text/css"/>
<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Votre navigateur ne prend pas en charge la balise vidéo.
</video>
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Votre navigateur ne prend pas en charge la balise audio.
</audio>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.0.1/mustache.min.js"></script>

<div class="mus-template" style="display:none">
  <h1>{{header}}</h1>
  {{#bug}} {{/bug}}

  {{#items}}
    {{#first}}
      <li><strong>{{name}}</strong></li>
    {{/first}}
    {{#link}}
      <li><a href="{{url}}">{{name}}</a></li>
    {{/link}}
  {{/items}}

  {{#empty}}
    <p>The list is empty.</p>
  {{/empty}}
</div>
<div class="mus-json" style="display:none">
  {
    "header": "Couleurs",
    "items": [
      {"name": "Rouge", "first": true, "url": "#Rouge"},
      {"name": "Vert", "link": true, "url": "#Vert"},
      {"name": "Bleu", "link": true, "url": "#Bleu"}
    ],
    "empty": false
  }
</div>
<div class="render-mus-template"></div>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function() {
    var e, html, json, emplate;
    try {
      template = document.querySelector(".mus-template").innerHTML;
      json = JSON.parse(document.querySelector(".mus-json").innerHTML);
      html = Mustache.render(template, json).replace(/^\s*/mg, "");
    } catch (e) {
      html = e.toString();
    }
    document.querySelector(".render-mus-template").innerHTML = html;
    });
</script>
<style type="text/css">
  .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
  }
  .embed-container iframe,
  .embed-container object,
  .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="embed-container">
  <iframe src="https://www.youtube.com/embed/8IQbF0IK-f4" frameborder="0" allowfullscreen></iframe>
</div>

Avant d'insérer un code CSS, assurez-vous que le curseur est bien dans une balise <style></style>

/* Ajoutez votre commentaire ici */
p {
  font-size: 20px;
}
.className {
  background-color: green;
}
#idName {
  background-color: green;
}
/* L’élément auquel appliquer l’animation */
.animated {
  animation-name: animationName;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}

/* Le code de l’animation */
@keyframes animationName {
  0%   { background-color: red;    }
  50%  { background-color: orange; }
  100% { background-color: yellow; }
}
/* Style de base */
a:link {
  color: RoyalBlue;
  text-decoration: none;
}

/* Visités */
a:visited {
  color: Orchid;
}

/* Actifs */
a:active {
  color: OrangeRed;
}

/* Survolés */
a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 320px) {
  /* Règles appliquées lorsque la largeur de l’écran est supérieure à 320 px */
}

@media screen and (min-width: 321px) and (max-width: 768px) {
  /* Règles appliquées lorsque la largeur de l’écran est entre 321 px et 768 px */
}

@media screen and (min-width: 769px) {
  /* Règles appliquées lorsque la largeur de l’écran est supérieure à 768 px */
}
@font-face {
  font-family: mapolice;
  src: url(sensation.woff);
  font-weight: bold;
}
/* Ajoute une flèche avant chaque élément doté de class="arrow" */
.arrow::before {
  content: "→";
  background: DodgerBlue;
  color: white;
}

Avant d'insérer un code JavaScript, assurez-vous que le curseur est bien dans une balise

// Ajoutez votre commentaire ici
/* ou encore ici pour
 * faire plusieurs lignes
 */
function sayHello (name) {
  console.log("Bonjour, " + name);
}

sayHello("David");
var names = [
  { id: 5796, name: "David" },
  { id: 9835, name: "Jean" },
  { id: 2957, name: "Catherine" }
];

console.table(names);
var person = {
  name: "Jean",
  skills: ["JS", "HTML"]
};
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var text = "<ul>";

for (var i = 0; i < fruits.length; i++) {
  text += "<li>" + fruits[i] + "</li>";
}

text += "</ul>";
document.write(text);
var i, meta_info = {
  "short_name": "JdBEdit",
  "start_url": "https://code.wetrafa.xyz",
  "icons": [
    { "src": "icon_16.png",  "type": "image/png", "sizes": "16x16" },
    { "src": "icon_128.png", "type": "image/png", "sizes": "128x128" },
    { "src": "icon_144.png", "type": "image/png", "sizes": "144x144" },
    { "src": "icon_192.png", "type": "image/png", "sizes": "192x192" }
  ],
  "theme_color": "#557baa"
};

console.log("Name: " + meta_info.short_name);

for (i = 0; i < meta_info.icons.length; i++) {
  console.log("link: " + meta_info.icons[i].src
    + " / size: " + meta_info.icons[i].sizes
    + " / type: " + meta_info.icons[i].type)
}
var count = 5;

while (count > 0) {
  console.log(count);
  count = count - 1;
}
var name = "Jean";

if (name === "Jean") {
  console.log("Bonjour, " + name);
} else if (name === "Catherine") {
  console.log("Bonjour, " + name);
} else {
  console.log("Bonjour, inconnue");
}
var name = "Jean";

switch (name) {
  case "Jean":
    console.log("Bonjour, " + name);
    break;
  case "Catherine":
    console.log("Bonjour, " + name);
    break;
  default:
    /* Faire quelque chose si aucune condition n’est satisfaite */
    console.log("Bonjour, inconnue");
}
/* Sélectionne l’élément avec l’identifiant id="button" */
var element = document.querySelector("#button");

element.addEventListener("click", function() {
  console.log("Click!");
});
/* Sélectionne l’élément avec id="alert" */
var element = document.querySelector("#alert");

element.style.background = "OrangeRed";

Rechercher des librairies

CDNJS constitue un réseau de distribution de contenu stable, fiable, à grande vitesse et disponible dans le monde entier pour les bibliothèques open-source les plus populaires. Il est recommandé de toujours utiliser le protocole https.

raccourcis trouvé


Ajout rapide :

Notes

Il n'y a aucune note enregistrée.
Centre des notifications

Aucune nouvelle notification

Utilisation des cookies

En utilisant JdBEdit, vous indiquez ne pas être un robot et accepter l'utilisation des cookies sur ce navigateur web. Plus


Wetrafa utilise des cookies et Google Analytics afin d'analyser le trafic, d'enregistrer vos paramètres pour ce site sur ce navigateur et de personnaliser votre expérience et les publicités sur l'ensemble de ses sites web. Moins

9h 41' 27" 

Partager ce code







Récuperer l'URL de ce fichier sans l'enregistrer.

Veuillez sauvegarder votre code pour voir s'ajouter plus de liens à partager.