WYSIWYG Unterstütztes HTML und Inline-Styling

Die WYSIWYG-Benutzerdefinierten Felder von NinjaOne verwenden eine Positivliste von Elementen und unterstützten Inline-Stilen, die für die Elemente verwendet werden können. NinjaOne stellt auch CSS-Klassen bereit, die Techniker für das Styling in NinjaOne nutzen können.

Inhaltsverzeichnis:

Verwendung des WYSIWYG-Editors in NinjaOne
Verwendung von HTML und Inline-Styling über API und CLI
HTML-Elemente
Inline-Styling-Optionen
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 Dokumentenvorlagen.

WYSIWYG-Funktionalität:

Standardmäßig wird ein HTML-Feld zusammengeklappt, wenn es mehr als 10.000 Zeichen enthält. Der Benutzer muss auf die Schaltfläche "Erweitern" klicken, um den vollständigen Inhalt zu sehen.
Die maximale Zeichengrenze für WYSIWYGs beträgt 200 Tausend 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:

Systemadministratoren und Techniker von NinjaOne können HTML und Inline-Styling verwenden, wenn sie Dokumentation für Rollen/Globalen benutzerdefinierten Felder und Apps & Services erstellen, die den Feldtyp "WYSIWYG" verwenden.

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

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

Hier ist eine vollständige Liste von Elementen und CSS-Klassen, die verwendet werden können, um Ihren Inhalt zu erstellen:

HTML-Elemente:

Element	Unterstützt NinjaOne CSS-Klassen?
a:	Ja
blockquote	Ja
caption	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
pre
span	Ja
table	Ja
tbody	Ja
td	Ja
tfoot	Ja
.	Ja
thead	Ja
tr	Ja
ul	Ja

Inline-Styling-Optionen:

Stil	Erlaubte Werte
color	RGB- oder Hex-Farbcodes. (Bsp: RGB (240,30,50,.7), #f015ca)
background-color	RGB- oder Hex-Farbcodes. (Bsp: RGB (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
overflow-wrap	normal, break-word, pre, anywhere
text-align	start, end, left, center, right, justify, justify-all, match-parent
width	Gültige CSS-Einheitswerte (z. B. 100%, 400px, auto, 2em usw.)
height	Gültige CSS-Einheitswerte (z. B. 100%, 400px, auto, 2em usw.)
font-size	Gültige CSS-Einheitswerte (z. B. 100%, 400px, auto, 2em usw.)
font-family	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

NinjaOne CSS-Klassen:

Die NinjaOne-Dokumentation und benutzerdefinierte Felder unterstützen das Bootstrap 5 Grid-System und die Free Font Awesome 6 Library für Icons. Zusätzlich stellen wir mehrere Klassen zur Verfügung, damit Techniker auf die NinjaOne-Stile zugreifen können.

Standard Card
Card with Action
Tables
Paragraphen
Headings
Buttons
Info-Karten
Tags
Statistik-Karten
Line Chart

Standard-Karte

<div class="card flex-grow-1">
  <div class="card-title-box">
    <div class="card-title"><i class="fas fa-building"></i>&nbsp;&nbsp;Mieterdetails</div>
  </div>
  <div class="card-body">
    <p class="card-text"></p>
    <p><b>Mietername</b><br>Beispiel Kunde</p>
    <p><b>Default Domain</b><br>example.onmicrosoft.com</p>
    <p><b>Tenant ID</b><br>123456-123432-234324-432463452-123</p>
    <p><b>Erstellungsdatum</b><br>07/18/2023 10:51:46</p>
    <p><b>Domains</b><br>example.onmicrosoft.com
    </p>
    <p><b>Admin Users</b><br>EXO_App2, MOD Administrator, MOD Administrator, Microsoft Service Account, 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 Applied 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>Disable Self Service Licensing (AllTenants)</span></li>
        <li><span>Enable Usernames instead of pseudo anonymised names in reports
 (example.onmicrosoft.com)</span></li>
    </ul>
    <p></p>
  </div>
</div>

Tables

<>
  <>
    <><>
       <><>
       <><>
       <><>
       <>table>
       <thead>
       <tr>
       <th>Testing</th>
       <th>Testing</th>
       <th>Testing</th>
    <th>Testing</th>
  <th>Testing</th>
  <th>Testing</th>
    <th>Testing</th>
       <th>Testing</th>
       <th>Testing</th>
       </tr>
       </thead>
       < dieser hat einen viel längeren Text testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="danger">
       <td>Testing</td>
       <td>Testing dieser hier hat einen viel längeren Text testing testing testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="success">
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing dieses hier hat einen viel längeren Text testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="other">
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing dieser hat einen viel längeren text testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="warning">
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing dieser hat einen viel längeren Text testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="unknown">
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing diese Seite hat einen viel längeren Text testing testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
  </tbody>
</table>

Paragraphen

<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>Bold Text</strong> Lorem ipsum dolor sit
   amet, consectetur adipiscing elit.</p>

Headings

<h1>Headings</h1>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

Buttons

<a href="https://example.com" target="_blank" class="btn">Primäre Schaltfläche</a>
<a href="https://example.com" target="_blank" class="btn sekundär">Sekundäre Schaltfläche</a>
<a href="https://example.com" target="_blank" class="btn Gefahr">Schaltfläche Gefahr</a>

Info-Karten

<div class="info-card">
  <i class="info-icon fa-solid fa-circle-info"></i>
  <div class="info-text">
    <div class="info-title">Informativer Titel</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">Error title</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">Warning title</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">Success title</div>
    <div class="info-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

Statistik-Karten

<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;">Connect</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>
      Licensed (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>

Siehe auch: