WYSIWYG HTML et styles CSS inline compatibles

Les champs personnalisés WYSIWYG de NinjaOne fonctionnent selon une liste blanche d'éléments et de styles en ligne pris en charge pouvant être utilisés pour ces éléments. NinjaOne fournit également des classes CSS que les techniciens peuvent utiliser pour la mise en forme dans NinjaOne.

Table des matières :

Utilisation de l'éditeur WYSIWYG dans NinjaOne
Utilisation du HTML et des styles en ligne via l'API et l'interface en ligne de commande (CLI)
Éléments HTML
Options de styles en ligne
Graphiques
Classes CSS de NinjaOne

Utilisation de l'éditeur WYSIWYG dans NinjaOne :

L'application de documentation NinjaOne propose des champs WYSIWYG (What You See Is What You Get, « ce que vous voyez est ce que vous obtenez ») à la fois dans la base de connaissances et en tant que champ personnalisé pour les modèles de documents.

Fonctionnalité WYSIWYG :

Par défaut, lorsqu'un champ HTML contient plus de 10 000 caractères, il est réduit et l'utilisateur doit cliquer sur le bouton d'agrandissement pour voir l'intégralité du contenu.
La limite maximale de caractères pour les champs WYSIWYG est de 200 000 caractères.
Il ne peut y avoir plus de 20 champs personnalisés WYSIWYG par formulaire ou modèle de document. Une fois cette limite atteinte, le choix du type de champ « WYSIWYG » sera verrouillé.

Utilisation du HTML et des styles en ligne via l'API et l'interface en ligne de commande (CLI) :

Les administrateurs système et les techniciens NinjaOne peuvent utiliser le HTML et les styles en ligne lors de la création de champs personnalisés de rôle/globaux et de la documentation des applications et services qui utilisent le type de champ « WYSIWYG ».

Ces options de mise en forme offrent une plus grande flexibilité et permettent une personnalisation accrue lors de l’affichage des données dans NinjaOne. Par exemple, la capture d’écran ci-dessous montre à quoi cela ressemblerait si un champ personnalisé contenait des widgets avec des liens hypertextes :

Remarque importante : ces options de mise en forme doivent être appliquées via l’API ou la CLI et ne peuvent pas être définies depuis la console NinjaOne pour le moment.

Vous trouverez ci-dessous la liste complète des éléments et des classes CSS pouvant être utilisés pour créer votre contenu :

Éléments HTML :

Élément	Prend-il en charge les classes NinjaOne ?
a	Oui
blockquote	Oui
légende	Oui
code
col	Oui
div	Oui
h1	Oui
h2	Oui
h3	Oui
h4	Oui
h5	Oui
h6	Oui
i	Oui
li	Oui
ol	Oui
p	Oui
pre
span	Oui
table	Oui
tbody	Oui
td	Oui
tfoot	Oui
th	Oui
thead	Oui
tr	Oui
ul	Oui

Options de mise en forme en ligne :

Style	Valeurs autorisées
couleur	Codes de couleur RVB ou hexadécimaux. (ex. : RGB (240,30,50,.7), #f015ca)
couleur-d'arrière-plan	Codes de couleur RVB ou hexadécimaux. (ex. : RVB (240,30,50,.7), #f015ca)
display	block, inline, inline-block, flex, inline-flex
justify-content	center, start, end, flex, flex-start, flex-end, left, right, normal, space-between, space-around, space-evenly
align-items	center, start, end, flex, flex-start, flex-end, left, right, normal, stretch
word-break	normal, break-all, keep-all, break-word
box-sizing	border-box, content-box
white-space	normal, no-wrap, pre, pre-wrap, pre-line, break-spaces
débordement	normal, break-word, pre, anywhere
text-align	début, fin, gauche, centre, droite, justifié, tout justifié, aligner sur le parent
width	Valeurs d'unités CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
hauteur	Valeurs d'unités CSS valides (par exemple : 100 %, 400px, auto, 2em, etc.)
taille de police	Valeurs d'unités CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
font-family	serif, sans-serif, monospace, cursive, fantasy, system-ui, emoji
margin	Valeurs d'unités CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
margin-top	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
margin-right	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
margin-bottom	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
margin-left	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
padding	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
padding-top	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
padding-right	Valeurs d'unité CSS valides (par exemple : 100 %, 400px, auto, 2em, etc.)
padding-bottom	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
padding-left	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
border-width	Valeurs d'unité CSS valides (par exemple : 100 %, 400px, auto, 2em, etc.)
border-style	none, solid, dashed, inset, outset
border-color	Codes de couleur RVB ou hexadécimaux (ex. : RVB(240,30,50,.7), #f015ca)
border-top	Valeurs d'unités CSS valides (par ex. : 100 %, 400 px, auto, 2 em, etc.)
border-right	Valeurs d'unité CSS valides (par ex. : 100 %, 400 px, auto, 2em, etc.)
border-bottom	Valeurs d'unité CSS valides (par exemple : 100 %, 400px, auto, 2em, etc.)
border-left	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
border-radius	Valeurs d'unité CSS valides (par exemple : 100 %, 400 px, auto, 2em, etc.)
border-collapse	collapse, separate

Graphiques :

NinjaOne prend en charge Charts.css, un nouveau framework open source dédié à la visualisation des données. Pour plus d'informations, veuillez consulter la page Introduction | Charts.css (chartscss.org).

NinjaOne recommande d'utiliser les commandes Piped pour définir du code HTML dans les champs personnalisés via l'interface de ligne de commande (CLI).

$HTML | Ninja-Property-Set-Piped nom_du_champ

Exemple :

<div class="row g-3">
<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">
<table class="charts-css column show-heading">


<tbody>
<tr>
<td style="--size: 0.4"> <span class="data"> 40 % </span> </td>
</tr>
<tr>
<td style="--size: 0.6"> <span class="data"> 60 % </span> </td>
</tr>
<tr>
<td style="--size: 0.75"> <span class="data"> 75 % </span> </td>
</tr>
<tr>
<td style="--size: 0.9"> <span class="data"> 90 % </span> </td>
</tr>
<tr>
<td style="--size: 1"> <span class="data"> 100 % </span> </td>
</tr>
</tbody>

</table>

</div>

<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">

<table class="charts-css column show-data-on-hover show-heading">
<tbody>
<tr>
<td style="--size: 0.4"> <span class="data"> 40 % </span> </td>
</tr>
<tr>
<td style="--size: 0.6"> <span class="data"> 60 % </span> </td>
</tr>
<tr>
<td style="--size: 0.75"> <span class="data"> 75 % </span> </td>
</tr>
<tr>
<td style="--size: 0.9"> <span class="data"> 90 % </span> </td>
</tr>
<tr>
<td style="--size: 1"> <span class="data"> 100 % </span> </td>
</tr>
</tbody>

</table>

</div>

<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">

<table class="charts-css bar show-heading">
<tbody>
<tr>
<td style="--size: 0.4"> <span class="data"> 40 % </span> </td>
</tr>
<tr>
<td style="--size: 0.6"> <span class="data"> 60 % </span> </td>
</tr>
<tr>
<td style="--size: 0.75"> <span class="data"> 75 % </span> </td>
</tr>
<tr>
<td style="--size: 0.9"> <span class="data"> 90 % </span> </td>
</tr>
<tr>
<td style="--size: 1"> <span class="data"> 100 % </span> </td>
</tr>
</tbody>

</table>

</div>


<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12">
<div class="row g-3">
<div class="col-12">
<table
class="charts-css line multiple show-data-on-hover show-labels show-primary-axis show-10-secondary-axes show-heading">
<tbody>
<tr>
<th scope="row"> 21-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.8; --end: 0.7;"><span class="data"> 70 </span></td>
<td style="--start: 0.7; --end: 0,9;"><span class="data"> 100 </span></td>
</tr>
<tr>
<th scope="row"> 20-03 </th>
<td style="--start: 0,3; --end: 0,1;"><span class="data"> 10 </span></td>
<td style="--start: 0,4; --end: 0,6;"><span class="data"> 60 </span></td>
<td style="--start: 0,7; --end: 0,9;"><span class="data"> 90 </span></td>
<td style="--start: 0,9; --end: 0,7;"><span class="data"> 70 </span></td>
</tr>
<tr>
<th scope="row"> 19-03 </th>
<td style="--start: 0,1; --end: 0,3;"><span class="data"> 30 </span></td>
<td style="--start: 0,6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.9; --end: 0.8;"><span class="data"> 80 </span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> 18-03 </th>
<td style="--start: 0.3; --end: 0.1;"><span class="data"> 10 </span></td>
<td style="--start: 0.4; --end: 0.6;"><span class="data"> 60 </span></td>
<td style="--start: 0.8; --end: 0.8;"><span class="data"> 80 </span></td>
<td style="--start: 0.9; --end: 0.9;"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> 17-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0,4;"><span class="data"> 40 </span></td>
<td style="--start: 0,8; --end: 1,0;"><span class="data"> 100 </span></td>
<td style="--start: 0,9; --end: 0,7;"><span class="data"> 70 </span></td>
</tr>
</tbody>
</table>

</div>
<div class="col-12">

<ul class="charts-css legend legend-inline legend-rectangle">
<li> C: </li>
<li> D: </li>
<li> CPU </li>
<li> Mémoire </li>
</ul>

</div>
</div>
</div>




<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex">

<table class="charts-css area show-heading">
<tbody>
<tr>
<th scope="row"> 21-03 </th>
<td style="--start: 0.1; --end: 0.3;"><span class="data"> 30 </span></td>
<td style="--start: 0.6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.8; --end: 0,7;"><span class="data"> 70 </span></td>
<td style="--start: 0,7; --end: 0,9;"><span class="data"> 100 </span></td>
</tr>
<tr>
<th scope="row"> 20-03 </th>
<td style="--start: 0,3; --end: 0,1;"><span class="data"> 10 </span></td>
<td style="--start: 0,4; --end: 0,6;"><span class="data"> 60 </span></td>
<td style="--start: 0,7; --end: 0,9;"><span class="data"> 90 </span></td>
<td style="--start: 0,9; --end: 0,7;"><span class="data"> 70 </span></td>
</tr>
<tr>
<th scope="row"> 19-03 </th>
<td style="--start: 0,1; --end: 0,3;"><span class="data"> 30 </span></td>
<td style="--start: 0,6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.9; --end: 0.8;"><span class="data"> 80 </span></td>
<td style="--start: 0.7; --end: 0.9;"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> 18-03 </th>
<td style="--start: 0.3; --end: 0.1;"><span class="data"> 10 </span></td>
<td style="--start: 0.4; --end: 0.6;"><span class="data"> 60 </span></td>
<td style="--start: 0.8; --end: 0,8;"><span class="data"> 80 </span></td>
<td style="--start: 0,9; --end: 0,9;"><span class="data"> 90 </span></td>
</tr>
<tr>
<th scope="row"> 17-03 </th>
<td style="--start: 0,1; --end: 0,3;"><span class="data"> 30 </span></td>
<td style="--start: 0,6; --end: 0.4;"><span class="data"> 40 </span></td>
<td style="--start: 0.8; --end: 1.0;"><span class="data"> 100 </span></td>
<td style="--start: 0.9; --end: 0,7;"><span class="data"> 70 </span></td>
</tr>
</tbody>
</table>
</div>




<div class="col-xl-4 col-lg-6 col-md-12 col-sm-12 d-flex" style="height:300px; width: 300px;">

<table class="charts-css pie show-heading">
<tbody>
<tr>
<th scope="row"> 21-03 </th>
<td style="--start: 0; --end: 0.2;"><span class="data"> 30 </span></td>
</tr>
<tr>
<th scope="row"> 20-03 </th>
<td style="--start: 0.2; --end: 0,3;"><span class="data"> 10 </span></td>
</tr>
<tr>
<th scope="row"> 19-03 </th>
<td style="--start: 0,3; --end: 0,55;"><span class="data"> 30 </span></td>
</tr>
<tr>
<th scope="row"> 18-03 </th>
<td style="--start: 0,55; --end: 0,75;"><span class="data"> 10 </span></td>
</tr>
<tr>
<th scope="row"> 17-03 </th>
<td style="--start: 0,75; --end: 1;"><span class="data"> 30 </span></td>
</tr>
</tbody>
</table>
</div>
</div>

Classes CSS NinjaOne :

La documentation NinjaOne et les champs personnalisés prennent en charge le système de grille Bootstrap 5 et la bibliothèque gratuite Font Awesome 6 pour les icônes. De plus, nous fournissons plusieurs classes permettant aux techniciens d’accéder aux styles NinjaOne.

Fiche standard
Carte avec action
Tableaux
Paragraphes
Titres
Boutons
Fiches d'information
Balises
Fiches statistiques
Graphique linéaire

Carte standard

<div class="card flex-grow-1">
 <div class="card-title-box">
   <div class="card-title"><i class="fas fa-building"></i>&nbsp;&nbsp;Détails du locataire</div>
 </div>
 <div class="card-body">
   <p class="card-text"></p>
   <p><b>Nom du locataire</b><br>Exemple de client</p>
   <p><b>Domaine par défaut</b><br>example.onmicrosoft.com</p>
   <p><b>ID du locataire</b><br>123456-123432-234324-432463452-123</p>
   <p><b>Date de création</b><br>18/07/2023 10:51:46</p>
   <p><b>Domaines</b><br>example.onmicrosoft.com
   </p>
   <p><b>Utilisateurs administrateurs</b><br>EXO_App2, Administrateur MOD, Administrateur MOD, Compte de service Microsoft, Allan
      Deyoung, Nestor Wilke, Isaiah Langer, Megan Bowen, Lidia Holloway</p>
   <p></p>
 </div>
</div>

Fiche avec action

<div class="card flex-grow-1">
 <div class="card-title-box">
   <div class="card-title"><i class="fas fa-shield-halved"></i>&nbsp;&nbsp;Normes appliquées par le CIPP</div>
   <div class="card-link-box"><a
          href="https://localhost:4280/tenant/standards/list-applied-standards?customerId=1e593540-8f80-4831-87a9-f1f95804a206"
          target="_blank" class="card-link" rel="nofollow noopener noreferrer"><i
             class="fas fa-arrow-up-right-from-square" style="color: #337ab7;"></i></a></div>
 </div>
 <div class="card-body">
   <p class="card-text"></p>
   <ul>
       <li><span>Désactiver les licences en libre-service (AllTenants)</span></li>
       <li><span>Activer les noms d'utilisateur à la place des noms pseudo-anonymisés dans les rapports
               (example.onmicrosoft.com)</span></li>
   </ul>
   <p></p>
 </div>
</div>

Tableaux

<table>
 <thead>
   <tr>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
      <th>Test</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test : celui-ci contient un texte beaucoup plus long test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
   </tr>
   <tr class="danger">
      <td>Test</td>
      <td>Test : celui-ci contient un texte beaucoup plus long. Test, test, test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
   </tr>
   <tr class="success">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test : celui-ci contient un texte beaucoup plus long. test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
   <tr class="other">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test : celui-ci contient un texte beaucoup plus long test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
   <tr class="warning">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test : celui-ci contient un texte beaucoup plus long test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
   <tr class="unknown">
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test : celui-ci contient un texte beaucoup plus long test test test</td>
      <td>test</td>
      <td>Test</td>
      <td>Test</td>
      <td>test</td>
   </tr>
 </tbody>
</table>

Paragraphes

<p>Voici un exemple de paragraphe : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit
  amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Texte en gras</strong> Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.</p>

Titres

<h1>Titres</h1>
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>

Boutons

<a href="https://example.com" target="_blank" class="btn">Bouton principal</a>
<a href="https://example.com" target="_blank" class="btn secondary">Bouton secondaire</a>
<a href="https://example.com" target="_blank" class="btn danger">Bouton d'urgence</a>

Fiches d’information

<div class="info-card">
 <i class="info-icon fa-solid fa-circle-info"></i>
 <div class="info-text">
   <div class="info-title">Titre d’information</div>
   <div class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>
</div>


<div class="info-card error">
 <i class="info-icon fa-solid fa-circle-exclamation"></i>
 <div class="info-text">
   <div class="info-title">Titre de l'erreur</div>
   <div class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>
</div>


<div class="info-card warning">
 <i class="info-icon fa-solid fa-triangle-exclamation"></i>
 <div class="info-text">
   <div class="info-title">Titre de l'avertissement</div>
   <div class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>
</div>


<div class="info-card success">
 <i class="info-icon fa-solid fa-circle-check"></i>
 <div class="info-text">
   <div class="info-title">Titre de réussite</div>
   <div class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>
</div>

Balises

<div class="tag">Activé</div>
<div class="tag disabled">Désactivé</div>
<div class="tag expired">Expiré</div>

Fiches statistiques

<div class="stat-card">
 <div class="stat-value"><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><span
             style="color: #CCCCCC;"><i class="fas fa-circle-xmark"></i></span></a></div>
 <div class="stat-desc"><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><span
             style="font-size: 18px;"><span style="white-space:nowrap;">PUBLICITÉ</span>&nbsp;<span
                 style="white-space:nowrap;">Se connecter</span></span></a></div>
</div>

<div class="stat-card">
 <div class="stat-value"><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"
           style="color: #008001;">0</a></div>
 <div class="stat-desc"><a href="https://example.com" target="_blank" rel="nofollow noopener noreferrer"><span
             style="font-size: 18px;">Expéditeurs bloqués</span></a></div>
</div>

Graphique linéaire

<div class="p-3 linechart">
  <div style="width: 33.3333333333%; background-color: #55ACBF;"></div>
  <div style="width: 33.3333333333%; background-color: #3633B7;"></div>
  <div style="width: 33,3333333333 %; background-color: #8063BF;"></div>
</div>
<ul class="unstyled p-3" style="display: flex; justify-content: space-between; ">
  <li><span class="chart-key" style="background-color: #55ACBF;"></span><span>
     Sous licence (20)</span></li>
  <li><span class="chart-key" style="background-color: #3633B7;"></span><span>
     Sans licence (20)</span></li>
  <li><span class="chart-key" style="background-color: #8063BF;"></span><span>
     Invités (20)</span></li>
</ul>

Documentation associée :

WYSIWYG HTML et styles CSS inline compatibles

Table des matières :

Utilisation de l'éditeur WYSIWYG dans NinjaOne :

Utilisation du HTML et des styles en ligne via l'API et l'interface en ligne de commande (CLI) :

Éléments HTML :

Options de mise en forme en ligne :

Graphiques :

Classes CSS NinjaOne :

Carte standard

Fiche avec action

Tableaux

Paragraphes

Titres

Boutons

Fiches d’information

Balises

Fiches statistiques

Graphique linéaire

FAQ

Pour aller plus loin

Ressources

Entreprise

Contact

NinjaOne pour l'IT d'entreprise

WYSIWYG HTML et styles CSS inline compatibles

Table des matières :

Utilisation de l'éditeur WYSIWYG dans NinjaOne :

Utilisation du HTML et des styles en ligne via l'API et l'interface en ligne de commande (CLI) :

Éléments HTML :

Options de mise en forme en ligne :

Graphiques :

Classes CSS NinjaOne :

Carte standard

Fiche avec action

Tableaux

Paragraphes

Titres

Boutons

Fiches d’information

Balises

Fiches statistiques

Graphique linéaire

FAQ

Pour aller plus loin