Éditeur Web

Introduction

L'éditeur web Nuxt Studio est une interface visuelle dans le navigateur pour créer, éditer et relire votre documentation. Il offre une expérience de prévisualisation tout en gardant votre travail synchronisé avec votre dépôt Git.

Éditeur Web vs. CLI

L'éditeur web de Nuxt Studio vous permet de gérer toute votre documentation depuis votre navigateur. Aucun outil de développement local ou commande terminal n'est nécessaire. C'est idéal pour maintenir votre documentation à un seul endroit, avec un outil simple sans aucune compétence Markdown requise.

Le CLI (Command Line Interface), quant à lui, est un outil local destiné aux développeurs qui préfèrent travailler dans leur propre IDE.

Deux éditeurs distincts

Nuxt Studio offre un espace de travail polyvalent pour les développeurs et les rédacteurs de contenu, leur permettant de choisir entre deux éditeurs distincts pour la création et la gestion du contenu : l'éditeur Markdown et l'éditeur visuel.

Vous pouvez sélectionner votre éditeur préféré depuis la page des paramètres de votre projet.

Éditeur Markdown

L'éditeur Markdown de Nuxt Studio offre un contrôle total sur votre contenu, vous permettant de rédiger directement votre documentation en Markdown et d'intégrer des composants Vue avec la syntaxe MDC.

Lorsque votre fichier est sauvegardé avec l'éditeur Markdown, le contenu est stocké exactement comme vous l'avez écrit, en préservant toute la syntaxe et la mise en forme spécifique. Cet éditeur est idéal pour les utilisateurs à l'aise avec Markdown qui souhaitent un contrôle précis sur la mise en page et la structure de leur contenu.

Éditeur visuel

L'éditeur Nuxt Studio s'inspire fortement de Notion, reconnu pour son design intuitif et sa flexibilité. Comme un éditeur de texte standard, l'éditeur Studio est conçu pour être familier et facile à utiliser.

Cependant, il se distingue par ses fonctionnalités supplémentaires qui améliorent l'expérience d'écriture :

Barre d'outils

Sélectionnez votre texte pour faire apparaître la barre d'outils, donnant accès à toutes les fonctionnalités d'édition de texte standard fournies par la syntaxe Markdown :

• Mise en forme des titres
• Gras
• Italique
• Barré
• Code
• Lien
• Classe
• Liste à puces
• Liste numérotée

Le raccourci /

Tapez simplement / n'importe où dans l'éditeur pour accéder à toutes les fonctionnalités de Studio.

Fonctionnalités de mise en forme

• Mise en forme des titres
• Saut de ligne
• Règle horizontale
• Bloc de code
• Paragraphe
• Gras & italique

Composants

L'une des fonctionnalités phares de Studio est sa capacité à intégrer et personnaliser n'importe quel composant complexe directement dans l'éditeur.

En d'autres termes, tous les composants Nuxt UI sont utilisables et peuvent être intégrés directement depuis l'éditeur. Un éditeur peut également ajuster les propriétés, slots et styles du composant.

Tapez simplement / pour accéder à la liste de tous les composants disponibles.

Images

Avec le raccourci /, vous pouvez rapidement insérer une image en sélectionnant l'option Image. Une modale s'ouvrira pour choisir le média à insérer.

Depuis la modale média, vous pouvez définir l'attribut alt pour le SEO et l'accessibilité.

Vidéos

Avec le raccourci /, vous pouvez rapidement insérer une vidéo en sélectionnant le choix Vidéo et en renseignant l'URL de la vidéo.

Dès qu'une vidéo est ajoutée, un onglet s'ouvre automatiquement avec tous les champs de propriétés disponibles par défaut, pour renseigner l'URL et personnaliser votre média.

Aperçu en direct

Une fois votre documentation déployée, elle propose une fonctionnalité d'aperçu en direct qui vous permet de voir instantanément les mises à jour de votre projet.

Nous utilisons votre site de production pour surcharger les contenus et afficher le nouveau visuel. C'est pourquoi l'URL doit être définie dans la section deploy.

Lorsque vous éditez votre site avec Studio, l'aperçu en direct peut s'afficher à droite de votre écran. Vous obtenez un retour instantané lors de la saisie. L'aperçu se synchronise selon vos brouillons.

Effectuer des modifications

Pour éditer votre documentation :

1. Parcourez les fichiers via l'explorateur de fichiers.
2. Ouvrez un fichier en cliquant dessus.
3. Modifiez le contenu en mode visuel ou Markdown. Toutes les modifications sont automatiquement enregistrées en tant que brouillons.
4. Prévisualisez vos modifications pour voir leur rendu avant publication.

Publier les modifications

Quand vous êtes prêt à publier :

• Cliquez sur le bouton Publier en haut à droite de l'éditeur.
• Vos modifications seront poussées directement sur la branche de déploiement et seront mises en ligne immédiatement.