WYSIWYG HTML et styles CSS inline compatibles

Les champs personnalisés WYSIWYG de NinjaOne fonctionnent avec 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 personnaliser l'apparence de 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 CLI
Éléments HTML
Options de styles en ligne
Graphiques
Classes CSS NinjaOne

Utilisation de l'éditeur WYSIWYG dans NinjaOne :

L'application de documentation NinjaOne propose des champs WYSIWYG (What You See is What You Get) à 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 se 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 la limite atteinte, la sélection WYSIWYG pour le type de champ sera verrouillée.

Utilisation du HTML et des styles en ligne via l'API et l'interface CLI :

Les administrateurs système et les techniciens NinjaOne peuvent utiliser le HTML et le style 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 personnalisation 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 hyperliens :

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
caption	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 : RVB (240,30,50,.7), #f015ca)
background-color	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
coupe-mot	normal, break-all, keep-all, break-word
box-sizing	border-box, content-box
espace	normal, no-wrap, pre, pre-wrap, pre-line, break-spaces
retour-à-la-ligne	normal, break-word, pre, anywhere
alignement du texte	début, fin, gauche, centre, droite, justifié, tout-justifié, aligner-sur-parent
largeur	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
hauteur	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
taille-de-police	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
font-family	serif, sans-serif, monospace, cursive, fantasy, system-ui, emoji
margin	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
margin-top	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
margin-right	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
margin-bottom	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
margin-left	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
padding	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, auto, 2em, etc.)
padding-top	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, 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 %, 400px, auto, 2em, etc.)
padding-left	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, 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é CSS valides (par ex. 100 %, 400px, auto, 2em, etc.)
border-right	Valeurs d'unité CSS valides (par ex. 100 %, 400px, 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 %, 400px, auto, 2em, etc.)
border-radius	Valeurs d'unité CSS valides (par exemple, 100 %, 400px, 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 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 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 pour permettre aux techniciens d'accéder aux styles NinjaOne.

Carte 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 CIPP appliquées</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>Ceci est 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 informatif</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;">AD</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 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