Made a basique tuto when starting the editor

beta
anulax1225 ago%!(EXTRA string=2 days)
parent 9338826e7f
commit 45d3e1c948
  1. 12
      resources/css/tiptap.css
  2. 113
      resources/js/Components/Editor/Editor.vue

@ -53,6 +53,14 @@ .tiptap-editor {
margin-bottom: 0.5rem;
line-height: 1.4;
}
.tiptap-editor h4 {
font-size: 1.4rem;
font-weight: 600;
margin-top: 0.7rem;
margin-bottom: 0.3rem;
line-height: 0.6;
}
.tiptap-editor > p {
margin-top: 0.75rem;
@ -67,6 +75,10 @@ .tiptap-editor {
margin-bottom: 0.75rem;
}
.tiptap-editor ol {
list-style: decimal;
}
.tiptap-editor ul {
list-style: disc;
}

@ -34,32 +34,97 @@ const props = defineProps({
content: {
type: Object || String,
default: `
<h2>
Présentation du groupe
</h2>
<p>
Notre groupe compte aujourdhui près de 40 membres. Ils et elles sont réparti·es répartis dans quatre différentes branches :
</p>
<ul>
<h2 style="text-align: left">Bienvenue dans l'éditeur de page </h2>
<p style="text-align: left">Voici les fonctionnalités disponibles :</p>
<h3 style="text-align: left">1. Mise en forme de texte</h3>
<p style="text-align: left">Essayez les boutons de la barre d'outils pour :</p>
<ul>
<li><p style="text-align: left"><strong>Gras</strong> (Ctrl+B)</p></li>
<li><p style="text-align: left"><em>Italique</em> (Ctrl+I)</p></li>
<li><p style="text-align: left"><s>Barré</s></p></li>
<li><p style="text-align: left">et plein d'autre</p></li>
</ul>
<h3 style="text-align: left">2. Titres et hiérarchie</h3>
<p style="text-align: left">Utilisez le menu déroulant pour choisir parmi 4 niveaux de titres</p>
<h1 style="text-align: left">Titre 1</h1>
<h2 style="text-align: left">Titre 2</h2>
<h3 style="text-align: left">Titre 3</h3>
<h4 style="text-align: left">Titre 4</h4>
<h3 style="text-align: left">3. Listes</h3>
<ul>
<li><p style="text-align: left">Liste à puces</p></li>
<li>
<b>Branche Louveteaux (7 11 ans) :</b>
<p>
Dès 7 ans, un enfant peut participer à nos activités en tant que louveteaux ou louvette.Réparti·es en sizaines formant ainsi une meute, les louveteaux et les louvettes découvrent le scoutisme à travers lhistoire du livre de la jungle et réalisent des jeux, bricolages ou autres activités adaptées à leur âge.
</p>
<p style="text-align: left">Structurez votre contenu</p>
<ul>
<li><p style="text-align: left">Liste dans une liste </p></li>
</ul>
</li>
<li>
<b>Branche Eclais (11 15 ans) :</b>
<p>
A partir de 11 ans, les jeunes de notre groupe font partie de la branche éclais. Ils et elles sont séparé·es en patrouilles qui forment une troupe. Durant les activités préparées et encadrées par les responsables, ils et elles apprennent à devenir autonome en approfondissant certains domaines comme les techniques de corde, topographie, cuisine, etc.
Les plus grand·es éclais ont également la possibilité dorganiser eux·elles-mêmes des activités ou même des petits camps pour leurs patrouilles. Les responsables sont pour leur expliquer comment planifier ces activités et encadrer des enfants plus jeunes.
</p>
</li>
</ul>
<p>
Envie de faire découvrir le scoutisme à votre enfant ? Pas de problème! Il est possible de rejoindre notre groupe à nimporte quel moment de lannée.
Il suffit de venir à nos locaux durant lune de nos activités. Nous recommandons aux enfants de venir essayer nos activités pendant plusieurs séances avant de décider sil souhaite sinscrire au groupe ou non.
Nhésitez pas à nous contacter si vous souhaitez avoir plus dinformations concernant notre groupe ou nos séances.
</p>
</ul>
<ol>
<li><p style="text-align: left">Liste numérotée</p></li>
<li><p style="text-align: left">Étapes séquentielles</p></li>
</ol>
<h3 style="text-align: left">4. Element (Conteneur)</h3>
<p style="text-align: left">Les <em>conteneurs </em>structurent les éléments visuels de manière <strong>isolée</strong> et <strong>cohérente</strong>.</p>
<p style="text-align: left">Quelques examples :</p>
<blockquote>
<p style="text-align: left">Voici une citation</p>
<p style="text-align: left">- Vinayak Ambigapathy 2025</p>
</blockquote>
<p style="text-align: left"><br class="ProseMirror-trailingBreak"></p>
<pre>
<code>Voici une note </code>
</pre>
<p style="text-align: left">Dautre element arriverons bientot pour vous permettre de faire des page manifique.</p>
<h3>5. Tableaux structurés</h3>
<p>Créez des tableaux :</p>
<table class="demo-table">
<thead>
<tr>
<th>Fonctionnalité</th>
<th>Raccourci</th>
<th>Exemple</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ligne horizontale</td>
<td>Ctrl+Shift+H</td>
<td><hr></td>
</tr>
<tr>
<td>Cellule de titre</td>
<td>Toujour en gras et au bord du tableau avec la cellule grisé</td>
<th>Titre</th>
</tr>
<tr>
<td>Cellule standard</td>
<td>La classique</td>
<td>Contenu</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Astuce : Utilisez Tab pour naviguer entre les cellules</td>
</tr>
</tfoot>
</table>
<p>Fonctionnalités disponibles :</p>
<ul>
<li>Insertion/suppression de lignes/colonnes</li>
<li>Fusion/séparation de cellules</li>
<li>Alignement du contenu</li>
</ul>
<p>Certaines de ces fonctionnalité ne fonctionne pas encore au mieux mais cela devrait changer bientot.</p>
<h3 style="text-align: left">6. Raccourcis clavier</h3>
<p style="text-align: left">Voici quelque racourci clavier. Essayez ces combinaisons :</p>
<ul>
<li><p style="text-align: left">Ctrl+Z Annuler</p></li>
<li><p style="text-align: left">Ctrl+Shift+Z Rétablir</p></li>
<li><p style="text-align: left">Ctrl+Shift+8 Liste à puces</p></li>
<li><p style="text-align: left">Ctrl+Shift+7 Liste numérotée</p></li>
</ul>
`
},
editable: {

Loading…
Cancel
Save