Éditeur WYSIWYG avancé

L'éditeur WYSIWYG avancé combine une conception légère avec des capacités d'édition de texte puissantes et riches, 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.

PRUDENCE

Les articles passés de l'éditeur Markdown ou WYSIWYG à l'éditeur WYSIWYG avancé ne peuvent pas être rétablis.

Exploration de l'éditeur WYSIWYG avancé

Utilisation de l'éditeur WYSIWYG avancé

Attribution d'un nom d'article

Lorsque vous créez un article, vous lui donnez un nom. Dans l' éditeur WYSIWYG avancé, le titre de l'article s'affiche en haut de la zone de contenu de l'article. Cliquez sur le titre pour le modifier. Vous verrez les options suivantes :

Suggérer le titre :

1. Eddy AI suggère trois options de titre pour votre article. Sélectionnez le titre souhaité et modifiez-le si nécessaire.

2. Cliquez sur Générer plus de suggestions pour afficher des options de titre supplémentaires.

3. Utilisez les boutons J'aime () et J'aime () pour donner votre avis sur les suggestions d'Eddy AI.

URL et 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 « Qu'est-ce que Document360 ? », l'URL devient what-is-document360.

   NOTE

   Pour plus d'informations, consultez 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'un article telles que SEO settings, , search visibilitytags, status indicatorfeatured imagerelated articlesattachmentslabelspreferencesou deprecation, cliquez sur l'icône Plus (⋯) dans le coin supérieur droit de l'éditeur, puis sélectionnez Plus d'options d'article.

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

Menu d'insertion rapide

Le menu d'insertion rapide apparaît sous la forme d'une option flottante dans un bloc vide. Il permet aux utilisateurs d'ajouter rapidement des éléments couramment utilisés à leurs articles.

Les options disponibles dans le menu d'insertion rapide sont les suivantes :

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

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

• Table () : Ajoutez une table pour structurer les 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, ajouter des ombres, ajouter des légendes, etc.

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

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

• Bloc de code () : Insérez un bloc de code pour le contenu technique. Cliquez à l'intérieur du bloc de code pour accéder à la barre d'outils contextuelle :

  • Liste déroulante des langues : Sélectionnez la langue souhaitée

  • Copier : Pour copier le bloc de code

• Plus : cliquez sur Plus pour accéder à des options de formatage supplémentaires à l'aide du menu barre oblique.

NOTE

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

• Il disparaît automatiquement lorsque vous commencez à taper.

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

Commencez à écrire avec Eddy AI, choisissez un modèle et importez des documents

Lorsque l'article dans l'éditeur WYSIWYG avancé est vide, vous pouvez commencer à créer votre contenu à l'aide des 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. Ecrire un article

   2. Créer un plan d'article

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

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

3. Entrez l'invite ou le sujet de votre choix.

   L'IA générera une ébauche initiale basée sur les options sélectionnées et les commentaires fournis.

NOTE

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

b. Choisissez un modèle

1. Cliquez sur Choisir un modèle.

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

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

3. Cliquez sur Utiliser ce  modèle pour structurervotre article avec un contenu prédéfini.

   Le nom et le slug de l'article seront automatiquement renseignés à l'aide du titre du modèle.

NOTE

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

C. Document d'importation

1. Cliquez sur Importer le document.

   Le panneau Importer apparaîtra.

2. Téléchargez un .docx fichier par glisser-déposer ou téléchargez un fichier  .

   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 des documents apparaîtront en évidence lorsque l'éditeur d'articles 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.

Commandes barre oblique

Tapez / dans l'éditeur, une liste d'options apparaît. Vous pouvez également rechercher les options en tapant les noms des commandes. Cliquez sur la commande souhaité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 les tapez immédiatement après un caractère. Vous pouvez naviguer dans chaque commande et section dans les commandes barre oblique à l'aide des touches fléchées haut, bas, droite et gauche.

Vous pouvez également accéder facilement à Eddy AI Writer directement depuis le haut du menu barre oblique. De plus, les options de la commande barre oblique sont classées en trois sections :

NOTE

Tables

Lorsque vous effectuez une sélection /table dans le menu barre oblique, un sous-menu s'affiche avec une palette de style grille :

• La sélection par défaut est une 3 × 3 table.

• Vous pouvez insérer jusqu'à un 10 × 10 tableau à l'aide de la palette.

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

• Après la création de la table, vous pouvez ajouter d'autres lignes et colonnes à l'aide de l'icône + . Pour plus d'informations, consultez le Tables in Advanced WYSIWYG editor.

Diviseurs

Lorsque vous effectuez une sélection /divider dans le menu barre oblique, un sous-menu s'affiche avec trois styles de séparateur :

• Solide (par défaut)

• Pointillé

• Pointillés

Syntaxe Markdown

L'éditeur WYSIWYG avancé prend en charge un large éventail 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 le titre 2 sera ajouté instantanément.

NOTE

• La syntaxe Markdown ne fonctionnera que si vous la saisissez manuellement. Il ne sera pas affiché lorsque vous copiez et collez la syntaxe.

• Pour voir 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 mise en forme enrichie de l'éditeur WYSIWYG avancé.

Lors de l'édition dans l'éditeur WYSIWYG avancé, cliquez sur l'icône Format () sur le côté droit du panneau de l'é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' arborescence des catégories reste développée lorsque vous naviguez entre les articles, ce qui facilite le passage de l'un à l'autre sans développer l'arborescence des catégories à chaque fois, tout en conservant la barre d'outils de formatage épinglée dans l'éditeur.

Sur les écrans plus petits (en dessous de 1280 px), l'arborescence des catégories se réduira automatiquement lorsque vous passerez d'un article à l'autre.

1. Styles de texte

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

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

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

• Effacer () : pour supprimer tous les styles du texte sélectionné.

• Casse-lettres () : Pour changer la casse 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 () : Pour appliquer le style de paragraphe standard au texte sélectionné.

3. Typographie

• Famille de polices : pour sélectionner la police de caractères 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 est défini sur Verdana par défaut.

• Pour modifier les paramètres de police dans l'ensemble de votre base de connaissances, accédez à () dans la barre de navigation de gauche.

• Dans le volet de navigation de gauche, accédez à Knowledge base site > Customize site.

• Dans la liste déroulante Police du site , sélectionnez la police souhaitée.

4. Palette

• Couleur de la 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. Formatage et listes

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

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

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

• Barré () : Pour appliquer un barré 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 de gauche.

• Centre () : Pour centrer votre contenu textuel.

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

• Justify () : Pour répartir le contenu du texte uniformément 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 numérotée pour chaque élément.

• Liste de numérotation à plusieurs niveaux () : Pour ajouter une liste indiquée par une numérotation à plusieurs niveaux pour chaque élément.

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

6. Commandes

• Augmenter le retrait () : pour éloigner le contenu de la marge.

• Réduire l'indentation () : pour rapprocher le contenu de la marge.

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

• Exposant () : 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 modifier 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 lors de l'exportation du contenu au format PDF.

CONSEIL DE PRO

Pour modifier le niveau de votre liste à puces ou numérotée, vous pouvez utiliser les commandes Augmenter le retrait () ou Diminuer le retrait () de la barre d'outils. Vous pouvez également utiliser les raccourcis clavier Tab pour augmenter le retrait ou Maj+Tab pour réduire le retrait.

Trouver et remplacer

Pour utiliser la fonction Rechercher et remplacer dans l'éditeur WYSIWYG avancé :

1. Cliquez sur l'icône Plus () dans le coin supérieur droit.

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

NOTE

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

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

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

1. Naviguez jusqu'à l'emplacement souhaité dans l'article.  

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

   Document360 ajoute trois modèles de FAQ accordéon à 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 de FAQ en fonction de vos préférences.

   2. Développer/Réduire () : Cliquez pour développer ou réduire les accordéons de la 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 AI.

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

Affichage du code ()

• Vous permet d'afficher et de modifier le contenu au format de code HTML.

• Le passage en mode 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 en mode Code :

  • Appuyez sur Entrée pour accéder à l'occurrence suivante du terme de recherche.

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

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

NOTE

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

• Les listes ordonnées et non ordonnées ne sont pas classées dans l'ordre séquentiel.

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

  • Lorsque le contenu est copié et collé.

  • Dans certains scénarios de migration de contenu.

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

1. Accédez à l'article de votre choix 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 () dans le menu flottant.

4. Utilisez des outils de formatage de base tels que le gras et les listes. De plus, utilisez le symbole @ pour mentionner les membres de votre équipe de projet si nécessaire.

5. Une fois cela fait, cliquez sur l'icône Envoyer ().

NOTE

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

Dans le volet de navigation de gauche, accédez à Outils de contenu > Concepteur de flux de travail. Passez la souris sur l'état souhaité et cliquez sur l'icône Modifier (✎) et désactivez le bouton bascule Lecture seule .

Pour afficher tous les commentaires d'un article :

1. Naviguez jusqu'à l'article souhaité.

2. Cliquez sur l'icône Commentaire () située sur le côté droit près du bouton de publication.

3. Le panneau Commentaires apparaîtra. Utilisez la liste déroulante 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 à plusieurs niveaux dans l'éditeur WYSIWYG avancé

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

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

Vous pouvez créer une liste numérotée à l'aide de l'une des méthodes suivantes :

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

Méthode 2 :
Utilisez la commande barre oblique (/) :

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

• /multi-level list – pour ajouter une liste à plusieurs niveaux. Passez la souris sur Liste à plusieurs niveaux dans le menu barre oblique pour afficher la liste des options de liste à plusieurs 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 liste numérotée

Les styles de liste numérotés suivants sont disponibles :

Formats de liste à plusieurs niveaux

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

Peintre de formats dans l'éditeur WYSIWYG avancé

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

Vous pouvez accéder à l'outil de reproduction des formats à partir des emplacements suivants dans l'éditeur WYSIWYG avancé :

• Menu Format

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

Utilisation du peintre de formats

Pour utiliser le peintre de format :

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

2. Cliquez sur l'icône Peintre de format () dans le menu Format ou à bulles.

3. Le curseur se transforme en icône de pinceau, indiquant que le peintre de format est actif.

4. Appliquez la mise en forme copiée en procédant comme suit :

   • Cliquer sur un mot ou une lettre dans le texte cible (s'applique uniquement au mot entier).

   • Faites glisser la souris pour mettre en surbrillance une sélection.

   • Sélection d'un bloc de texte entier.

Une fois la mise en forme appliquée ou l'outil de peinture de format 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 comprend :

• Type, taille et couleur de la police

• Gras, Italique, Souligné, Barré

• Espacement des lettres

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

NOTE

• Pour les en-têtes, la balise d'en-tête sera également copiée, mais seulement si le bloc entier est sélectionné.

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

Annulation du Format Painter

Le peintre de formats sera désactivé si vous :

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

• Appuyez sur Échap.

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

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

NOTE

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

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

Raccourcis clavier pour Format painter

Les raccourcis clavier permettant d'utiliser l'outil de reproduction de format sont les suivants :

Choix de formatage pour le collage à partir de Microsoft Word

Lorsque vous collez du contenu à partir de Microsoft Word, vous pouvez conserver ou effacer la mise en forme, y compris des éléments tels que des listes, des tableaux, des indentations et des polices.

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

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

Dépannage

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

Ce problème se produit lorsqu'un article est converti de l'éditeur WYSIWYG à 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 les articles de l'éditeur WYSIWYG standard vers l'éditeur WYSIWYG avancé.

2. Au lieu de cela, importez ou copiez-collez du contenu directement dans l'éditeur WYSIWYG avancé pour éviter les problèmes de formatage.

3. Si le problème s'est déjà produit, vérifiez l'affichage du code de l'article et supprimez toutes les balises HTML non prises en charge. Ces balises sont généralement encapsulées dans la <editor360-custom-block> balise. La suppression de cette balise rétablira 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>