Éditeur en ligne

Explication de l'éditeur en ligne.

Sur cette page

Cette page explique comment utiliser notre Éditeur en ligne.

L’éditeur en ligne doit être utilisé pour chaque problème et pull request !

Comment se connecter

La connexion est assez simple, il suffit de cliquer sur le bouton Se connecter avec GitHub en haut à droite et de vous connecter via GitHub.

Fonctionnalités de base et structure de la page

Notre éditeur en ligne a été conçu pour créer facilement des exemples/démonstrations pour bootstrap-table.

La page est structurée comme suit :

Nous avons 5 boutons :

Exécuter : Le bouton Exécuter affiche la version actuelle de votre exemple.
Enregistrer : Le bouton Enregistrer sauvegarde votre exemple. Après avoir cliqué sur Enregistrer, l’URL changera par exemple en https://live.bootstrap-table.com/code/<username>/<ID>.
Bibliothèques : Ce bouton ouvrira une page de configuration. Sur cette page, vous pouvez configurer l’environnement de l’exemple :
- Source Bootstrap Table : Cette option définit quelle source de version (CDN ou depuis GitHub en tant que source) doit être utilisée. Si vous choisissez Depuis GitHub src, vous pouvez définir une branche qui sera utilisée pour l’exemple. Pour les problèmes, vous utilisez normalement toujours Depuis CDN publié.
- Version CDN publiée : Ici, vous pouvez choisir la version de bootstrap-table pour créer un exemple pour les anciennes versions de bootstrap-table.
- Thème : Ici, vous pouvez choisir entre nos thèmes pris en charge, par exemple pour montrer un problème avec un thème particulier.
- Extensions : Si vous expliquez comment utiliser une extension, vous pouvez la sélectionner facilement ici. Cela signifie que vous n’avez pas besoin de l’inclure vous-même dans l’exemple !
Charger des exemples : Cette option ouvre une page, ici vous pouvez charger des exemples existants (c’est un “miroir” de notre page d’exemples).
Liens : Le dernier bouton contient simplement quelques liens, par exemple vers notre site web, notre page GitHub, etc.

Côté gauche

Vous pouvez écrire vos exemples. Y compris HTML, CSS et JavaScript (le CSS et le JavaScript nécessitent une balise <style></style> et/ou <script></script> !

Le modèle de base est :

<!-- Includes custom css and js files -->
<link rel="stylesheet" href="https://example.com/custom.css">
<script src="https://example.com/custom.js"></script>

<!-- Define custom style -->
<style>
</style>

<!-- No need to write <html> and <body> tags -->
<table id="table">
</table>

<script>
  $(function () {
    $('#table').bootstrapTable()
  })
</script>

Remarque : Vous devez placer la fonction d’initialisation dans $(function () {}) pour vous assurer que jquery et bootstrap-table ont été chargés.

Côté droit

Vous pouvez voir votre exemple en cours d’exécution (après avoir cliqué sur le bouton Exécuter).

Vous pouvez également cliquer sur Résultat (Plein écran) pour basculer en mode plein écran de l’exemple en cours d’exécution.

Flux de travail pour les problèmes

Chaque problème doit contenir un exemple (créé sur l’Éditeur en ligne) du problème.

Ouvrez l’éditeur en ligne.
Allez à la page Bibliothèques et configurez l’environnement de l’exemple.

Version
Thème
Extensions

Écrivez votre exemple (ou copiez-le depuis votre projet local).
Vérifiez si vous pouvez reproduire votre problème sur l’exemple.
Enregistrez l’exemple (cliquez sur le bouton Enregistrer) et copiez l’URL.
Ouvrez un problème avec l’URL de l’exemple.

(Peut-être pouvez-vous également utiliser notre bouton Charger des exemples pour charger un exemple existant, au lieu des points 2 et 3).

Flux de travail pour les pull requests

Le flux de travail pour les PR est assez similaire au flux de travail pour les problèmes.

La seule différence est que vous devez choisir votre branche (l’éditeur utilisera votre code pour créer l’exemple). Pour cela, vous devez ouvrir la page Bibliothèques, sélectionner Depuis GitHub src dans l’option Source Bootstrap Table et écrire le nom de votre branche dans le champ Branche GitHub src. La syntaxe pour le nom de la branche est <username>:<branch>. Vous pouvez également copier cette chaîne depuis la page de pull request.