Éditeur de modèle WYSIWYG

Cette page vous guidera à travers le processus de création d'un modèle PDF à l'aide de notre éditeur WYSIWYG glisser-déposer. Après avoir lu cette documentation, vous serez capable de concevoir un modèle HTML avec des styles et des polices personnalisés ainsi que du contenu dynamique.

Créer un nouveau modèle

Pour créer un nouveau modèle, connectez-vous à votre compte et accédez à la page "Templates". Ici, vous pouvez créer un nouveau modèle ou modifier un modèle existant. Cliquez sur "Créer un modèle" et sélectionnez "Blank HTML Template" pour commencer à partir de zéro.

Aperçu

Voici un aperçu rapide de l'éditeur WYSIWYG :

L'éditeur est divisé en quatre sections principales :

1. Barre d'outils (en haut) : La barre d'outils contient les principales actions pour gérer le modèle, telles que le mode curseur, les boutons d'aperçu et de sauvegarde. Selon l'élément sélectionné, la barre d'outils affichera différentes options pour éditer les propriétés de l'élément.
2. Canvas (au centre) : Le canvas est la zone principale où vous pouvez concevoir le modèle. C'est ici que vous pouvez faire glisser et déposer des éléments, les redimensionner et les déplacer. Vous pouvez sélectionner plusieurs éléments en cliquant et en faisant glisser la souris sur eux.
3. Calques (à gauche) : Le panneau des calques affiche la hiérarchie des pages et des éléments sur le canvas. Vous pouvez sélectionner un élément en cliquant dessus dans le panneau des calques, et vous pouvez également changer l'ordre des éléments en les faisant glisser vers le haut ou vers le bas. Le survol d'un élément dans le panneau des calques mettra en surbrillance l'élément sur le canvas.
4. Propriétés (à droite) : Le panneau des propriétés affiche les propriétés de l'élément sélectionné. Vous pouvez modifier les propriétés de l'élément, telles que le texte, la police, la couleur et la taille.

Mode Curseur

Le mode curseur est le mode par défaut pour interagir avec le canvas. Vous pouvez sélectionner des éléments, les déplacer et les redimensionner. Vous pouvez également sélectionner plusieurs éléments en cliquant et en faisant glisser la souris sur eux. Il existe 3 modes de curseur :

• Sélectionner : C'est le mode par défaut pour interagir avec le canvas. Ce mode vous permet de sélectionner un ou plusieurs éléments. Certains éléments, tels que les cellules de tableau ou le texte, peuvent être édités directement sur le canvas.
• Déplacer : Ce mode vous permet de déplacer des éléments sur le canvas. Cliquez et faites glisser un élément pour le déplacer vers une nouvelle position.
• Redimensionner : Ce mode vous permet de redimensionner des éléments. Cliquez et faites glisser les poignées d'un élément pour le redimensionner.

Pages

Pour ajouter une nouvelle page au modèle, cliquez sur le bouton "Ajouter une page" dans le "Panneau des calques". Vous pouvez ajouter autant de pages que nécessaire. Chaque page peut avoir des tailles et des orientations différentes. Dans le panneau des propriétés, vous pouvez définir un nom pour la page, modifier sa taille et son orientation (portrait ou paysage), et définir les marges. Vous pouvez supprimer une page en survolant celle-ci dans le panneau des calques et en cliquant sur le bouton "Corbeille".

Importer vos propres fichiers PDF

Vous pouvez importer vos propres fichiers PDF et les utiliser comme point de départ pour vos modèles. Cliquez sur le bouton "Importer un PDF" dans le "Panneau des calques" et sélectionnez le fichier PDF que vous souhaitez importer. Chaque page du PDF sera importée comme une nouvelle page dans le modèle.

Éléments

Vous pouvez ajouter des éléments au modèle en cliquant sur le bouton "Ajouter un élément" dans le "Panneau des calques". Sélectionnez le type d'élément que vous souhaitez ajouter, tel que du texte, une image ou un tableau. Une fois ajouté, vous pouvez redimensionner et déplacer l'élément sur le canvas. Vous pouvez également modifier les propriétés de l'élément dans le panneau des propriétés. Il existe plusieurs types d'éléments que vous pouvez ajouter au modèle :

• Texte : Cet élément vous permet d'ajouter un bloc de texte au modèle. Vous pouvez éditer le texte directement sur le canvas. Vous pouvez personnaliser la police, la taille, la couleur et l'alignement dans le panneau des propriétés. Un élément de texte peut avoir une couleur de fond et des bordures.
• Tableau : Cet élément vous permet d'ajouter un tableau au modèle. Vous pouvez éditer le tableau directement sur le canvas. Vous pouvez personnaliser le nombre de lignes et de colonnes, la largeur des colonnes et l'alignement des cellules dans le panneau des propriétés. Vous pouvez également ajouter des bordures au tableau et aux cellules. Vous pouvez définir des lignes et des colonnes répétitives pour créer un tableau dynamique.
• Image : Cet élément vous permet d'ajouter une image au modèle. Vous pouvez télécharger une image depuis votre ordinateur. Vous pouvez redimensionner l'image et modifier ses propriétés dans le panneau des propriétés.
• Rectangle : Cet élément vous permet d'ajouter un rectangle au modèle. Vous pouvez personnaliser la couleur de fond, les bordures et la taille dans le panneau des propriétés.
• Ligne horizontale : Cet élément vous permet d'ajouter une ligne horizontale au modèle. Vous pouvez personnaliser la couleur, la largeur et l'alignement dans le panneau des propriétés.
• Ligne verticale : Cet élément vous permet d'ajouter une ligne verticale au modèle. Vous pouvez personnaliser la couleur, la largeur et l'alignement dans le panneau des propriétés.
• Code-barres / QR Code : Cet élément vous permet d'ajouter un code-barres ou un QR Code au modèle. Vous pouvez personnaliser le type, la valeur et la taille dans le panneau des propriétés. Nous prenons en charge plusieurs types de codes-barres, tels que Code 128, Code 39 et QR Code.
• Champ de texte : Cet élément vous permet d'ajouter un champ de texte au modèle. Les champs de texte peuvent être utilisés pour créer des formulaires PDF remplissables.
• Case à cocher : Cet élément vous permet d'ajouter une case à cocher au modèle. Les cases à cocher peuvent être utilisées pour créer des formulaires PDF remplissables.
• Bouton radio : Cet élément vous permet d'ajouter un bouton radio au modèle. Les boutons radio peuvent être utilisés pour créer des formulaires PDF remplissables.

Contenu dynamique

Lors de la conception d'un modèle, vous pouvez ajouter du contenu dynamique au modèle en utilisant des espaces réservés. Les espaces réservés sont des variables qui seront remplacées par des données réelles lors de la génération du PDF. Un espace réservé est une chaîne de caractères encadrée d'accolades, telle que {name}. Vous pouvez ajouter des espaces réservés aux éléments de texte et aux cellules de tableau dans le modèle. Si vous souhaitez répéter une ligne de tableau pour chaque élément d'une liste, vous devez cliquer sur n'importe quelle cellule de la ligne et cliquer sur "Ligne répétable" dans le panneau des propriétés. Les lignes répétables doivent avoir une "clé répétable" qui sera utilisée pour faire correspondre les données lors de la génération du PDF. Par exemple, si vous avez une liste d'éléments avec des propriétés "nom" et "prix", vous pouvez ajouter un tableau avec deux colonnes et ajouter des espaces réservés {name} et {price} aux cellules. Ensuite, vous pouvez cliquer sur n'importe quelle cellule de la ligne et cliquer sur "Ligne répétable" dans le panneau des propriétés. Vous pouvez définir la "clé répétable" sur "items", puis lors de la génération du PDF, vous pouvez passer un objet JSON avec les données suivantes pour remplacer les espaces réservés.

{
    "items": [
        { "name": "Article 1", "price": 100 },
        { "name": "Article 2", "price": 200 }
    ]
}

Pour en savoir plus sur le contenu dynamique, consultez la documentation sur la Génération de PDF.