WYSIWYG Unterstütztes HTML und Inline-Styling

Die benutzerdefinierten WYSIWYG-Felder von NinjaOne arbeiten mit einer Zulassungsliste von Elementen und unterstützten Inline-Stilen, die für diese Elemente verwendet werden können. NinjaOne stellt außerdem CSS-Klassen bereit, die Techniker für die Gestaltung in NinjaOne nutzen können.

Inhaltsverzeichnis:

Verwendung des WYSIWYG-Editors in NinjaOne
Verwendung von HTML und Inline-Styling über API und CLI
HTML-Elemente
Optionen für Inline-Styling
Diagramme
NinjaOne-CSS-Klassen

Verwendung des WYSIWYG-Editors in NinjaOne:

Die NinjaOne-Dokumentationsanwendung bietet WYSIWYG-Felder (What You See is What You Get) sowohl in der Wissensdatenbank als auch als benutzerdefiniertes Feld für Dokumentvorlagen.

WYSIWYG-Funktionalität:

Standardmäßig wird ein HTML-Feld, das mehr als 10.000 Zeichen enthält, ausgeblendet, und der Benutzer muss auf die Schaltfläche „Erweitern“ klicken, um den vollständigen Inhalt anzuzeigen.
Die maximale Zeichenanzahl für WYSIWYG-Felder beträgt 200.000 Zeichen.
Pro Formular oder Dokumentvorlage dürfen nicht mehr als 20 benutzerdefinierte WYSIWYG-Felder vorhanden sein. Sobald das Limit erreicht ist, wird die WYSIWYG-Auswahl für den Feldtyp gesperrt.

Verwendung von HTML und Inline-Styling über API und CLI:

NinjaOne-Systemadministratoren und -Techniker können HTML und Inline-Styling verwenden, wenn sie benutzerdefinierte Felder für Rollen/global sowie Dokumentationen für Apps und Dienste erstellen, die den Feldtyp „WYSIWYG“ verwenden.

Diese Styling-Optionen ermöglichen eine größere Flexibilität und Anpassungsmöglichkeiten bei der Anzeige von Daten in NinjaOne. Der folgende Screenshot zeigt beispielsweise, wie es aussehen würde, wenn ein benutzerdefiniertes Feld Widgets mit Hyperlinks enthalten würde:

Wichtiger Hinweis: Diese Styling-Optionen müssen über die API oder CLI angewendet werden und können derzeit nicht über die NinjaOne-Konsole vorgenommen werden.

Nachfolgend finden Sie eine vollständige Liste der Elemente und CSS-Klassen, die zum Erstellen Ihrer Inhalte verwendet werden können:

HTML-Elemente:

Element	Unterstützt NinjaOne-Klassen?
a	Ja
blockquote	Ja
Bildunterschrift	Ja
code
col	Ja
div	Ja
h1	Ja
h2	Ja
h3	Ja
h4	Ja
h5	Ja
h6	Ja
i	Ja
li	Ja
ol	Ja
p	Ja
vor
span	Ja
Tabelle	Ja
tbody	Ja
td	Ja
tfoot	Ja
th	Ja
thead	Ja
tr	Ja
ul	Ja

Optionen für Inline-Styling:

Stil	Zulässige Werte
Farbe	RGB- oder Hex-Farbcodes. (z. B.: RGB (240,30,50,.7), #f015ca)
Hintergrundfarbe	RGB- oder Hex-Farbcodes. (z. B.: RGB (240,30,50,.7), #f015ca)
Anzeige	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
Worttrennung	normal, break-all, keep-all, break-word
box-sizing	border-box, content-box
Leerzeichen	normal, no-wrap, pre, pre-wrap, pre-line, break-spaces
Überlauf-Umbruch	normal, Wortumbruch, pre, beliebig
text-align	start, end, left, center, right, justify, justify-all, match-parent
Breite	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
Höhe	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
Schriftgröße	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
Schriftfamilie	serif, sans-serif, monospace, cursive, fantasy, system-ui, emoji
margin	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
margin-top	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
margin-right	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
margin-bottom	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
margin-left	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
padding	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
padding-top	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
padding-right	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
padding-bottom	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
padding-left	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
border-width	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
border-style	none, solid, dashed, inset, outset
border-color	RGB- oder Hex-Farbcodes (z. B.: RGB(240,30,50,.7), #f015ca)
border-top	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
border-right	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
border-bottom	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
border-left	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
border-radius	Gültige CSS-Einheitswerte (z. B. 100 %, 400px, auto, 2em usw.)
border-collapse	collapse, separate

Diagramme:

NinjaOne unterstützt Charts.css, ein neues Open-Source-Framework für die Datenvisualisierung. Weitere Informationen finden Sie unter Einführung | Charts.css (chartscss.org).

NinjaOne empfiehlt die Verwendung der Piped-Befehle zum Festlegen von HTML in benutzerdefinierten Feldern über die CLI.

$HTML | Ninja-Property-Set-Piped Feldname

Beispiel:

<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> Speicher </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>

NinjaOne-CSS-Klassen:

Die NinjaOne-Dokumentation und benutzerdefinierte Felder unterstützen das Bootstrap 5 Grid System und die kostenlose Font Awesome 6-Bibliothek für Symbole. Darüber hinaus stellen wir mehrere Klassen bereit, damit Techniker auf die NinjaOne-Stile zugreifen können.

Standardkarte
Karte mit Aktion
Tabellen
Absätze
Überschriften
Schaltflächen
Infokarten
Tags
Statistikkarten
Liniendiagramm

Standardkarte

<div class="card flex-grow-1">
 <div class="card-title-box">
   <div class="card-title"><i class="fas fa-building"></i>&nbsp;&nbsp;Mandantendetails</div>
 </div>
 <div class="card-body">
   <p class="card-text"></p>
   <p><b>Mandantenname</b><br>Beispielkunde</p>
   <p><b>Standarddomäne</b><br>example.onmicrosoft.com</p>
   <p><b>Mandanten-ID</b><br>123456-123432-234324-432463452-123</p>
   <p><b>Erstellungsdatum</b><br>18.07.2023 10:51:46</p>
   <p><b>Domänen</b><br>example.onmicrosoft.com
   </p>
   <p><b>Administratoren</b><br>EXO_App2, MOD-Administrator, MOD-Administrator, Microsoft-Dienstkonto, Allan
      Deyoung, Nestor Wilke, Isaiah Langer, Megan Bowen, Lidia Holloway</p>
   <p></p>
 </div>
</div>

Karte mit Aktion

<div class="card flex-grow-1">
 <div class="card-title-box">
   <div class="card-title"><i class="fas fa-shield-halved"></i>&nbsp;&nbsp;CIPP Angewandte Standards</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>Self-Service-Lizenzierung deaktivieren (AllTenants)</span></li>
       <li><span>Benutzernamen anstelle von pseudo-anonymisierten Namen in Berichten aktivieren
               (example.onmicrosoft.com)</span></li>
   </ul>
   <p></p>
 </div>
</div>

Tabellen

<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 – dieser hier hat viel längeren Text – 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 – dieser hier hat viel längeren Text – 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 – dieser hier hat viel längeren Text – 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 – dieser hier hat viel längeren Text – 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 – dieser hier hat viel längeren Text – 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 – dieser hier hat viel längeren Text – Test Test Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
      <td>Test</td>
   </tr>
 </tbody>
</table>

Absätze

<p>Dies ist ein Beispielabsatz 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>Fettgedruckter Text</strong> Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.</p>

Überschriften

<h1>Überschriften</h1>
<h1>Überschrift 1</h1>
<h2>Überschrift 2</h2>
<h3>Überschrift 3</h3>
<h4>Überschrift 4</h4>
<h5>Überschrift 5</h5>

Schaltflächen

<a href="https://example.com" target="_blank" class="btn">Primäre Schaltfläche</a>
<a href="https://example.com" target="_blank" class="btn secondary">Sekundäre Schaltfläche</a>
<a href="https://example.com" target="_blank" class="btn danger">Gefahren-Schaltfläche</a>

Infokarten

<div class="info-card">
 <i class="info-icon fa-solid fa-circle-info"></i>
 <div class="info-text">
   <div class="info-title">Informationstitel</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">Fehlertitel</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">Warntitel</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">Erfolgstitel</div>
   <div class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>
</div>

Statistikkarten

<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;">Verbinden</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;">Blockierte Absender</span></a></div>
</div>

Liniendiagramm

<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>
     Lizenziert (20)</span></li>
  <li><span class="chart-key" style="background-color: #3633B7;"></span><span>
     Nicht lizenziert (20)</span></li>
  <li><span class="chart-key" style="background-color: #8063BF;"></span><span>
     Gäste (20)</span></li>
</ul>

Zugehörige Dokumentation:

WYSIWYG Unterstütztes HTML und Inline-Styling

Inhaltsverzeichnis:

Verwendung des WYSIWYG-Editors in NinjaOne:

Verwendung von HTML und Inline-Styling über API und CLI:

HTML-Elemente:

Optionen für Inline-Styling:

Diagramme:

NinjaOne-CSS-Klassen:

Standardkarte

Karte mit Aktion

Tabellen

Absätze

Überschriften

Schaltflächen

Infokarten

Tags

Statistikkarten

Liniendiagramm

FAQ

Nächste Schritte

Ressourcen

Unternehmen

Kontaktinformationen