Éditeur WYSIWYG avancé

L'éditeur WYSIWYG avancé combine un design léger avec de puissantes capacités d'édition de texte enrichis, prenant en charge une syntaxe Markdown spécifique. Il offre une expérience très visuelle et intuitive qui surpasse les éditeurs Markdown traditionnels tout en conservant plus de flexibilité que les éditeurs WYSIWYG.

ATTENTION

Les articles basculés de l'éditeur Markdown ou WYSIWYG vers l'éditeur WYSIWYG avancé ne peuvent pas être annulés.

Explorer l'éditeur WYSIWYG avancé

Utilisation de l'éditeur avancé WYSIWYG

Attribution d'un nom d'article

Lorsque vous rédigez un article, vous lui donnez un nom. Dans l' éditeur avancé WYSIWYG, le titre de l'article apparaît en haut de la zone de contenu de l'article. Cliquez sur le titre pour le modifier. Vous verrez les options suivantes :

Titre suggéré :

1. Eddy AI propose trois options de titre pour votre article. Sélectionnez le titre souhaité et modifiez-le si besoin.

2. Cliquez sur Générer plus de suggestions pour voir d'autres options de titre.

3. Utilisez les boutons J'aime () et « Je n'aime pas » () pour donner un retour sur les suggestions d'Eddy AI.

URL & Description :

1. URL : Modifiez l'URL de l'article dans ce champ. Par défaut, Document360 crée l'URL (également appelée slug) en fonction du titre de l'article au moment de la création. Par exemple, si le titre de l'article est « What is Document360 ? », l'URL devient what-is-document360.

   NOTE

   Pour plus d'informations, lisez l'article sur Change the URL of an article.

2. Description : Entrez une brève description de l'article.

NOTE

Pour modifier les métadonnées d'article telles que SEO settings, search visibility, tags, labels, attachmentsstatus indicatorfeatured imagerelated articlespreferences, , ou deprecation, cliquez sur l'icône Plus (⋯) en haut à droite de l'éditeur, puis sélectionnez Plus d'options d'article.

Vous pouvez utiliser le menu d'insertion rapide , la commande de barre oblique et la syntaxe spécifique Markdown pour créer et modifier du contenu dans l'éditeur WYSIWYG avancé.

Menu d'insertion rapide

Le menu Insertion rapide apparaît comme une option flottante dans un bloc vide. Cela permet aux utilisateurs d'ajouter rapidement des éléments couramment utilisés à leurs articles.

Les options disponibles dans le menu Insertion rapide sont :

• Eddy AI Writer () : Générez du contenu alimenté par l'IA directement dans votre article.

• Liste à puces () : Insérez une liste à puces. Utilisez le menu déroulant pour sélectionner par défaut, disque, carré ou cercle.

• Tableau () : Ajouter un tableau à la structure des données.

• Image () : Téléchargez et insérez une image.

  NOTE

  • Utilisez les outils disponibles pour formater l'image. Cliquez sur l'image pour ouvrir le menu de mise en forme flottant.

  • Vous pouvez aligner, recadrer, ajouter des bordures, des ombres, ajouter des légendes, et plus encore.

    Pour plus d'informations, lisez l'article sur Image formatting in the Advanced WYSIWYG editor.

• Lien () : Ajoutez un lien hypertexte. Vous pouvez aussi utiliser le Ctrl + K raccourci clavier.

• Bloc de code () : Insérer un bloc de code pour le contenu technique. Cliquez dans le bloc de code pour accéder à la barre d'outils contextuelle :

  • Menu déroulant de la langue : Sélectionnez la langue souhaitée

  • Copie : Pour copier le bloc de code

• Plus : Cliquez sur Plus pour accéder à des options de mise en forme supplémentaires via le menu Barre.

NOTE

• Le menu Insertion rapide n'apparaît que lorsque le bloc est vide.

• Il disparaît automatiquement quand tu commences à taper.

• Si vous effacez le contenu dans un bloc, le menu Insertion rapide réapparaît.

Commencez à écrire avec Eddy AI, choisissez un modèle et importez la documentation

Lorsque l'article dans l'éditeur WYSIWYG avancé est vide, vous pouvez commencer à créer votre contenu en utilisant les options suivantes :

un. Commencez à écrire avec Eddy AI

1. Cliquez sur Commencer à écrire avec Eddy AI.

2. Sélectionnez l'une des options disponibles :

   1. Rédigez un article

   2. Rédigez un plan d'article

   3. Créer un article à partir d'une vidéo

   4. Créer un article à partir d'une transcription média ou d'un fichier texte

3. Saisissez le sujet ou le sujet que vous souhaitez souhaiter.

   L'IA génère un premier brouillon basé sur les options sélectionnées et les informations fournies.

NOTE

Pour plus d'informations, lisez l'article sur AI Writer.

b. Choisissez un modèle

1. Cliquez sur Choisir un modèle.

   Un panneau apparaîtra avec des modèles disponibles.

2. Sélectionnez le modèle souhaité et prévisualisez-le.

3. Cliquez sur Utilisez ce  modèle pourstructurer votre article avec un contenu prédéfini.

   Le nom et le slug de l'article s'affichent automatiquement en utilisant le titre du modèle.

NOTE

Pour plus d'informations, lisez l'article sur Templates.

C. Document d'importation

1. Cliquez sur Importer le document.

   Le panneau d'Importation apparaîtra.

2. Téléverser un .docx fichier en utilisant le glisser-déposer ou téléverser un  fichier ouune option.

   Le nom de l'article et le slug seront générés automatiquement en fonction du nom du fichier téléchargé.

NOTE

• Les options Commencer à écrire avec Eddy AI, Choisir un modèle et Importer la documentation apparaîtront en bonne place lorsque l'éditeur d'article est vide.

• Une fois que vous commencez à taper manuellement, les options disparaissent.

• Si vous effacez le contenu dans l'éditeur, ces options réapparaissent pour un accès facile.

Ordres de barrage

Tapez / dans l'éditeur, une liste d'options apparaît. Vous pouvez aussi chercher les options en tapant les noms des commandes. Cliquez sur la commande désirée ou appuyez sur la touche Entrée pour sélectionner la commande.

NOTE

Assurez-vous de taper / au début d'une ligne ou après un espace. Les options n'apparaîtront pas si vous l'écrivez immédiatement après un personnage. Vous pouvez naviguer à travers chaque commande et section en barre à l'aide des flèches haut, bas, droite et gauche.

Vous pouvez aussi facilement accéder à Eddy AI Writer directement depuis le haut du menu barre postale. De plus, les options de commande de barre oblique sont réparties en trois sections :

NOTE

Tableaux

Lors de la sélection /table dans le menu barre, un sous-menu apparaît avec une palette en forme de grille :

• La sélection par défaut est un 3 × 3 tableau.

• Vous pouvez insérer jusqu'à une 10 × 10 table en utilisant la palette.

• Utilisez les touches du clavier ou de la souris pourmodifier la sélection.

• Après la création de table, vous pouvez ajouter plus de lignes et de colonnes en utilisant l' icône + . Pour plus d'informations, lisez le Tables in Advanced WYSIWYG editorfichier .

Séparateurs

Lors de la sélection /divider dans le menu barre oblique, un sous-menu apparaît affichant trois styles de séparation :

• Solide (par défaut)

• Pointé

• Pointillé

Syntaxe Markdown

L'éditeur WYSIWYG avancé prend en charge une large gamme de syntaxes Markdown ; pour une liste détaillée, lisez l'article sur les bases de Markdown.

Par exemple, si vous souhaitez ajouter un Titre 2, tapez la syntaxe suivante : ## Markdown syntax. La syntaxe sera rendue et l'En-tête 2 sera ajouté instantanément.

NOTE

• La syntaxe Markdown ne fonctionne que lorsque vous la tapez manuellement. Elle ne sera pas rendue lorsque vous copiez-collez la syntaxe.

• Pour consulter la liste des syntaxes Markdown non prises en charge, lisez l'article sur Advanced WYSIWYG editor basics.

Barre d'outils

Pour modifier la mise en page ou l'apparence du contenu, utilisez les options de formatage riches de l'éditeur Advanced WYSIWYG.

Lors de la modification dans l'éditeur WYSIWYG avancé, cliquez sur l' icône Formater () à droite du panneau éditeur.

NOTE

En sélectionnant l'option Épingler (), vous pouvez ancrer la barre d'outils sur le côté droit de l'interface de l'éditeur. Lorsque la barre d'outils est épinglée, l' arbre des catégories reste élargi au fur et à mesure que vous naviguez entre les articles, ce qui facilite le passage entre eux sans étendre l'arbre de catégories à chaque fois, tout en gardant la barre de mise en forme épinglée dans l'éditeur.

Sur les écrans plus petits (en dessous de 1280 px), l'arbre des catégories s'effondre automatiquement lorsque vous passez d'un article à l'autre.

1. Styles de texte

• Annuler () : Pour inverser la dernière action.

• Refaire () : Pour réappliquer la dernière action annulée.

• Format painter () : Copier et appliquer la mise en forme d'une partie du texte à une autre.

• Clear () : Pour supprimer tout style du texte sélectionné.

• Lettercase () : Pour changer la maiuscule du texte.

2. Titres

• : Pour appliquer le style H2 (Titre 2) au texte sélectionné.

• : Pour appliquer le style H3 (Titre 3) au texte sélectionné.

• : Pour appliquer le style H4 (Titre 4) au texte sélectionné.

• Paragraphe () : Appliquer le style de paragraphe standard au texte sélectionné.

3. Typographie

• Famille de polices : Pour sélectionner la police du texte.

• Taille de la police : Pour ajuster la taille du texte sélectionné.

NOTE

Lorsque vous insérez le contenu dans l'éditeur WYSIWYG avancé, le type de police sera défini par défaut sur Verdana .

• Pour modifier les paramètres de police dans votre base de connaissances, naviguez jusqu'à () dans la barre de navigation de gauche.

• Dans le panneau de navigation de gauche, naviguez jusqu' Knowledge base site à > Customize site.

• Dans le menu déroulant de la police du site , sélectionnez la police souhaitée.

4. Palette

• Couleur de police : Pour changer la couleur du texte sélectionné.

• Couleur d'arrière-plan : Pour définir une couleur d'arrière-plan pour le texte sélectionné.

5. Mise en forme et listes

• Gras () : Mettre en gras le texte sélectionné.

• Italique () : Pour mettre en italique le texte sélectionné.

• Souligner () : Pour souligner le texte sélectionné.

• Barrage () : Pour appliquer un passage rayé au texte sélectionné.

• Inline code () : Pour ajouter du code en ligne au texte.

• Aligner à gauche () : Pour aligner le contenu du texte avec la marge gauche.

• Centre () : Pour centrer votre contenu textuel.

• Aligner à droite () : Pour aligner le contenu du texte avec la marge droite.

• Justifier () : Répartir le contenu textuel équitablement entre les marges.

• Liste à puces () : Pour ajouter une liste indiquée par des symboles pour chaque élément.

• Liste numérotée () : Pour ajouter une liste notée par la numérotation pour chaque élément.

• Liste de numérotation multi-niveaux () : Pour ajouter une liste notée par une numérotation multi-niveaux pour chaque élément.

• Liste de contrôle () : Pour ajouter une liste indiquée de cases à cocher que les utilisateurs peuvent marquer comme complète ou incomplète.

6. Commandes

• Augmenter le recoin () : Pour éloigner le contenu de la marge.

• Diminuer le retrait () : Pour rapprocher le contenu de la marge.

• Indice () : Pour abaisser le texte sous la ligne de base.

• Exposer () : Pour élever le texte au-dessus de la ligne de base.

• Hauteur de ligne () : Pour choisir l'espacement entre les lignes.

• Espace des lettres () : Pour changer l'espacement entre les lettres.

• Saut de ligne () : Pour passer à la ligne suivante.

• Saut de page () : Pour spécifier où terminer la page actuelle et commencer la page suivante tout en exportant le contenu en PDF.

ASTUCE PRO

Pour changer le niveau de votre liste à puces ou numérotée, vous pouvez utiliser soit les contrôles Augmenter le indentation () soit Diminuer le retrait () depuis la barre d'outils. Sinon, utilisez les raccourcis clavier Tab pour augmenter l'indentation ou Shift+Tab pour diminuer l'indentation.

Trouver et remplacer

Pour utiliser la fonction Trouver et Remplacer dans l'éditeur avancé WYSIWYG :

1. Cliquez sur l' icône Plus () en haut à droite.

2. Sélectionnez Trouver et remplacer dans le menu.

NOTE

Pour plus d'informations, lisez l'article sur Find and replace.

Insertion de modèles FAQ dans l'éditeur WYSIWYG avancé

Pour insérer des modèles FAQ dans l'éditeur WYSIWYG avancé :

1. Naviguez vers l'emplacement souhaité dans l'article.  

2. Tapez la commande /FAQs Barre et sélectionnez la FAQ dans la liste.

   Document360 ajoute trois modèles d'accordéon FAQ à votre article.

3. Dans les modèles de FAQ insérés, vous pouvez effectuer les options suivantes :

   1. Paramètres () : Cliquez pour personnaliser les modèles FAQ selon vos préférences.

   2. Expand/Collapse () : Cliquez pour agrandir ou faire combler les accordéons FAQ.

   3. Supprimer () : Cliquez pour supprimer toute la section FAQ.

   4. Ajouter une question () : Cliquez entre les FAQ pour insérer des FAQ personnalisées supplémentaires.

NOTE

• Les modèles de FAQ sont différents du générateur de FAQ IA.

• Pour plus d'informations, lisez l'article AI FAQ generator.

Vue de code ()

• Permet de visualiser et modifier le contenu au format HTML.

• Lorsque vous passez en vue code, l'éditeur formate automatiquement le HTML pour une meilleure lisibilité. Cette mise en forme standardise l'indentation et l'espacement sans modifier la structure HTML sous-jacente.

• La mise en forme automatique s'exécute à chaque fois que vous entrez en vue code. Les blocs HTML et script personnalisés ne sont pas affectés, et la mise en forme n'est pas appliquée lors de la sauvegarde ou de la publication.

• Passer à la vue Code vous permet d'ajouter des éléments HTML personnalisés, d'appliquer des styles en ligne ou d'effectuer des ajustements précis.

• Utilisez Ctrl + F pour effectuer une recherche persistante dans la vue Code :

  • Appuyez sur Entrée pour accéder à la prochaine occurrence du terme de recherche.

  • Appuyez sur Majers + Entrée pour accéder à l'occurrence précédente.

• Dans le panneau de vue Code , l' More icône () est désactivée.

NOTE

• Vous devez cliquer sur le bouton Enregistrer pour enregistrer les modifications effectuées dans la vue du code.

• Les listes Ordered et Unordered manquent d'ordre séquentiel.

• Les types de listes imbriquées ne sont pas pris en charge dans les scénarios suivants :

  • Quand le contenu est copié-collé.

  • Dans certains scénarios de migration de contenu.

Ajout d'un commentaire en ligne dans l'éditeur WYSIWYG avancé

1. Naviguez vers l'article souhaité dans le portail de la base de connaissances.

2. Sélectionnez le texte souhaité pour ajouter un commentaire, et un menu flottant apparaîtra.

3. Cliquez sur l' icône Commentaire () depuis le menu flottant.

4. Utilisez des outils de mise en forme basiques comme le gras et les listes. De plus, utilisez le symbole @ pour mentionner les membres de votre équipe projet si nécessaire.

5. Une fois terminé, cliquez sur l' icône Envoyer ().

NOTE

Pour désactiver ce mode, allez au portail de la base de connaissances, Documentation () dans la barre de navigation de gauche.

Dans le panneau de navigation de gauche, naviguez vers Outils de contenu > Concepteur de workflow. Passez la souris sur le statut souhaité, cliquez sur l'icône Modifier (✎) et désactivez le bouton de lecture seule .

Pour consulter tous les commentaires d'un article :

1. Naviguez vers l'article souhaité.

2. Cliquez sur l' icône Commentaire () située à droite, près du bouton de publication.

3. Le panneau Commentaires apparaîtra. Utilisez le menu déroulant en haut pour filtrer les options, telles que Tous les commentaires, commentaires mentionnés, commentaires ouverts et commentaires résolus.

Ici, vous pouvez répondre aux commentaires.

NOTE

Pour plus d'informations, lisez l'article sur Reviewing an article using Inline comments

Utilisation de listes numérotées et multi-niveaux dans l'éditeur avancé WYSIWYG

Dans l' éditeur avancé WYSIWYG, vous pouvez ajouter à la fois des listes numérotées et des listes multi-niveaux pour organiser efficacement votre contenu.

Création d'une liste numérotée

Vous pouvez créer une liste numérotée en utilisant l'une des méthodes suivantes :

Méthode 1 :
Tapez l'un des éléments suivants suivi d'un espace, selon vos besoins :
1., a., A.i., , I., (α)., , 1), a), oui)

Méthode 2 :
Utilisez la commande de barrage (/) :

• /numbered list – pour ajouter une liste numérotée. Passez la souris sur la liste numérotée dans le menu barre oblique pour voir les options de liste disponible.

• /multi-level list – pour ajouter une liste à plusieurs niveaux. Passez la souris sur la liste multi-niveaux dans le menu à barre oblique pour voir la liste des options de liste multi-niveaux.

Méthode 3 :

• Sélectionnez le contenu souhaité et appuyez sur Ctrl + Shift + O ou.Ctrl + Shift + 7

• Par défaut, la liste numérotée commence par 1., 2., 3., et ainsi de suite.

Styles de liste disponibles

Formats de listes numérotées

Les styles de listes numérotées suivants sont disponibles :

Formats de listes multi-niveaux

Vous pouvez choisir parmi quatre types de listes à niveaux multiples :

Format painter dans l'éditeur WYSIWYG avancé

Le Format Painter dans Document360 vous aide à copier et appliquer rapidement la mise en forme du texte d'une section à une autre, ce qui fait gagner du temps et garantit la cohérence de votre contenu.

Vous pouvez accéder au Format Painter depuis les emplacements suivants dans l'éditeur WYSIWYG avancé :

• Menu de format

• Menu bulles qui apparaît lorsque vous sélectionnez du texte

Utilisation du Format Paintre

Pour utiliser le Format Painter :

1. Dans l'éditeur WYSIWYG avancé, sélectionnez le texte source dont vous souhaitez copier.

2. Cliquez sur l'icône Formater () depuis le menu de formatage ou bulle.

3. Le curseur changera en icône de pinceau, indiquant que le Format est actif.

4. Appliquez la mise en page copiée en :

   • Cliquer sur un mot ou une lettre dans le texte cible (cela concerne uniquement le mot entier).

   • En glissant la souris pour surligner une sélection.

   • Sélectionner un bloc entier de texte.

Une fois la mise en forme appliquée ou le Format painter annulé, le curseur revient à la normale.

Mise en forme qui sera copiée

Seule la mise en forme au niveau du texte sera copiée. Cela inclut :

• Type, taille et couleur de police

• Gras, Italique, Souligné, Barré

• Espacement des lettres

• Couleur d'arrière-plan (surligne)

NOTE

• Pour les titres, l'étiquette d'en-tête sera également copiée, mais seulement si l'ensemble du bloc est sélectionné.

• Le style copié est basé sur le premier caractère du texte source sélectionné.

Annulation du Format Painter

Le Format Painter sera désactivé si vous :

• Cliquez n'importe où en dehors de l'éditeur.

• Appuyez sur Esc.

• Effectuez toute autre action dans l'éditeur ou Categories & Articles le volet.

• Cliquez sur l'icône active Formater Painter dans le menu Format.

NOTE

• Appuyez ou Ctrl + Z cliquez sur l'icône Annuler () dans le menu Formatage pour annuler la mise en forme appliquée.

• Appuyez ou Alt + Shift + V cliquez sur l'icône Effacer () dans le menu Formatage pour effacer la mise en forme du texte sélectionné.

Raccourcis clavier pour Format Painter

Les raccourcis clavier pour utiliser Format Painter sont :

Choix de mise en forme pour coller depuis Microsoft Word

En collant du contenu depuis Microsoft Word, vous pouvez conserver ou effacer la mise en forme, y compris des éléments comme des listes, des tableaux, des indentations et des polices.

1. Cliquez sur Coller avec la mise en forme pour conserver le format du contenu depuis Microsoft Word.

2. Cliquez sur Coller en texte brut pour effacer le format du contenu depuis Microsoft Word.

Dépannage

Impossible de modifier la section article en raison de balises HTML non prises en charge

Ce problème survient lorsqu'un article est converti de l'éditeur WYSIWYG vers l'éditeur WYSIWYG avancé, ce qui entraîne des balises HTML non prises en charge.

Étapes à résoudre :

1. Pour éviter cela, évitez de convertir des articles de l'éditeur WYSIWYG standard vers l'éditeur WYSIWYG avancé.

2. À la place, importez ou copier-collez directement du contenu dans l'éditeur WYSIWYG avancé pour éviter les problèmes de mise en forme.

3. Si le problème s'est déjà produit, examinez la vue de code de l'article et supprimez toute balise HTML non prise en charge. Ces tags sont généralement enveloppés dans le <editor360-custom-block> tag. Supprimer cette balise restaurera la fonctionnalité d'édition et résoudra le problème.

.onehope {
    display: flex;
    flex-direction: row;
    width: 100%;
    font-size: smaller;
    background-color: white;
}
.onehope .onehope_left {
    flex: 1;
    margin-right: 0.5vw;
    margin-top: 25px;
    margin-left: 0.2vw;
    text-align: justify;
}
.onehope .onehope_right {
    flex: 1;
    margin-right: 0vw;
    margin-left: 1vw;
    max-width: 30%;
    text-align: justify;
} 

<div class="onehope">
    <div class="onehope_left">
        <h3>How to reset your password</h3>
        <p>If you forget your password, click <b>Forgot Password</b> on the login page. 
        Enter your registered email, and you’ll receive a password reset link.</p>
    </div>
    <div class="onehope_right">
        <h4>Tip</h4>
        <p>For better security, choose a password with at least 8 characters, 
        including numbers and special symbols.</p>
    </div>
</div>