WYSIWYG HTML y estilos CSS inline compatibles

Los campos personalizados WYSIWYG de NinjaOne funcionan con una lista de elementos permitidos y estilos en línea compatibles que se pueden utilizar con dichos elementos. NinjaOne también proporciona clases CSS que los técnicos pueden utilizar para aplicar estilos en NinjaOne.

Índice:

Uso del editor WYSIWYG en NinjaOne
Uso de HTML y estilos en línea a través de la API y la CLI
Elementos HTML
Opciones de estilo en línea
Gráficos
Clases CSS de NinjaOne

Uso del editor WYSIWYG en NinjaOne:

La aplicación de documentación de NinjaOne ofrece campos WYSIWYG (lo que ves es lo que obtienes) tanto en la base de conocimientos como en forma de campo personalizado para las plantillas de documentos.

Funcionalidad WYSIWYG:

De forma predeterminada, cuando un campo HTML tiene más de 10 000 caracteres, se contrae y el usuario debe hacer clic en el botón de expandir para ver el contenido completo.
El límite máximo de caracteres para los campos WYSIWYG es de 200 000 caracteres.
No puede haber más de 20 campos personalizados WYSIWYG por formulario o plantilla de documento. Una vez alcanzado el límite, la selección de WYSIWYG para el tipo de campo se bloqueará.

Uso de HTML y estilos en línea a través de la API y la CLI:

Los administradores y técnicos del sistema NinjaOne pueden utilizar HTML y estilos en línea al crear campos personalizados de rol/globales y documentación de aplicaciones y servicios que utilicen el tipo de campo «WYSIWYG».

Estas opciones de estilo permiten una mayor flexibilidad y personalización a la hora de mostrar datos en NinjaOne. Por ejemplo, la captura de pantalla siguiente muestra cómo se vería si un campo personalizado contuviera widgets con hipervínculos:

Nota importante: Estas opciones de estilo deben aplicarse desde la API o la CLI y, por el momento, no pueden realizarse desde la consola de NinjaOne.

A continuación se muestra una lista completa de los elementos y clases CSS que se pueden utilizar para crear su contenido:

Elementos HTML:

Elemento	¿Admite clases de NinjaOne?
a	Sí
blockquote	Sí
leyenda	Sí
código
col	Sí
div	Sí
h1	Sí
h2	Sí
h3	Sí
h4	Sí
h5	Sí
h6	Sí
i	Sí
li	Sí
ol	Sí
p	Sí
pre
span	Sí
tabla	Sí
tbody	Sí
td	Sí
tfoot	Sí
th	Sí
thead	Sí
tr	Sí
ul	Sí

Opciones de estilo en línea:

Estilo	Valores permitidos
color	Códigos de color RGB o hexadecimales. (ej.: RGB (240,30,50,.7), #f015ca)
color de fondo	Códigos de color RGB o hexadecimales. (ej.: 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
salto de palabra	normal, break-all, keep-all, break-word
tamaño-del-cuadro	border-box, content-box
espacio en blanco	normal, no-wrap, pre, pre-wrap, pre-line, break-spaces
desbordamiento	normal, break-word, pre, anywhere
alineación de texto	inicio, fin, izquierda, centro, derecha, justificado, justificado-todo, igualar-al-padre
ancho	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
altura	Valores de unidad CSS válidos (p. ej., 100 %, 400px, auto, 2em, etc.)
tamaño de fuente	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
familia de fuentes	serif, sans-serif, monospace, cursive, fantasy, system-ui, emoji
margin	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
margin-top	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
margin-right	Valores de unidad CSS válidos (p. ej., 100 %, 400px, auto, 2em, etc.)
margin-bottom	Valores de unidad CSS válidos (p. ej., 100 %, 400px, auto, 2em, etc.)
margin-left	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
padding	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
padding-top	Valores de unidad CSS válidos (p. ej., 100 %, 400px, auto, 2em, etc.)
padding-right	Valores de unidad CSS válidos (p. ej., 100 %, 400px, auto, 2em, etc.)
padding-bottom	Valores de unidad CSS válidos (p. ej., 100 %, 400px, auto, 2em, etc.)
padding-left	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
border-width	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
border-style	none, solid, dashed, inset, outset
border-color	Códigos de color RGB o hexadecimales (p. ej.: RGB(240,30,50,.7), #f015ca)
border-top	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
borde-derecho	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
border-bottom	Valores de unidad CSS válidos (p. ej., 100 %, 400px, auto, 2em, etc.)
border-left	Valores de unidad CSS válidos (p. ej., 100 %, 400px, auto, 2em, etc.)
border-radius	Valores de unidad CSS válidos (p. ej., 100 %, 400 px, auto, 2em, etc.)
border-collapse	collapse, separate

Gráficos:

NinjaOne es compatible con Charts.css, un nuevo marco de código abierto para la visualización de datos. Para obtener más información, consulta Introducción | Charts.css (chartscss.org).

NinjaOne recomienda utilizar los comandos Piped para configurar HTML en campos personalizados a través de la CLI.

$HTML | Ninja-Property-Set-Piped nombre_campo

Ejemplo:

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

Clases CSS de NinjaOne:

La documentación y los campos personalizados de NinjaOne son compatibles con el sistema de cuadrículas Bootstrap 5 y la biblioteca gratuita Font Awesome 6 para iconos. Además, ofrecemos varias clases para que los técnicos puedan acceder a los estilos de NinjaOne.

Tarjeta estándar
Tarjeta con acción
Tablas
Párrafos
Encabezados
Botones
Tarjetas de información
Etiquetas
Tarjetas estadísticas
Gráfico de líneas

Tarjeta estándar

<div class="card flex-grow-1">
 <div class="card-title-box">
   <div class="card-title"><i class="fas fa-building"></i>&nbsp;&nbsp;Detalles del inquilino</div>
 </div>
 <div class="card-body">
   <p class="card-text"></p>
   <p><b>Nombre del inquilino</b><br>Cliente de ejemplo</p>
   <p><b>Dominio predeterminado</b><br>example.onmicrosoft.com</p>
   <p><b>ID del inquilino</b><br>123456-123432-234324-432463452-123</p>
   <p><b>Fecha de creación</b><br>18/07/2023 10:51:46</p>
   <p><b>Dominios</b><br>example.onmicrosoft.com
   </p>
   <p><b>Usuarios administradores</b><br>EXO_App2, Administrador de MOD, Administrador de MOD, Cuenta de servicio de Microsoft, Allan
      Deyoung, Nestor Wilke, Isaiah Langer, Megan Bowen, Lidia Holloway</p>
   <p></p>
 </div>
</div>

Tarjeta con acción

<div class="card flex-grow-1">
 <div class="card-title-box">
   <div class="card-title"><i class="fas fa-shield-halved"></i>&nbsp;&nbsp;Normas aplicadas por el 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>Desactivar licencias de autoservicio (AllTenants)</span></li>
       <li><span>Habilitar nombres de usuario en lugar de nombres pseudoanonimizados en los informes
               (example.onmicrosoft.com)</span></li>
   </ul>
   <p></p>
 </div>
</div>

Tablas

<table>
 <thead>
   <tr>
      <th>Prueba</th>
      <th>Prueba</th>
      <th>Prueba</th>
      <th>Prueba</th>
      <th>Prueba</th>
      <th>Prueba</th>
      <th>Prueba</th>
      <th>Prueba</th>
      <th>Prueba</th>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba esta tiene un texto mucho más largo prueba prueba prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
   </tr>
   <tr class="danger">
      <td>Prueba</td>
      <td>Prueba esta tiene un texto mucho más largo prueba prueba prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
   </tr>
   <tr class="success">
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba esta tiene un texto mucho más largo prueba prueba prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
   </tr>
   <tr class="other">
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba; este tiene un texto mucho más largo; prueba, prueba, prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
   </tr>
   <tr class="warning">
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba esta tiene un texto mucho más largo prueba prueba prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
   </tr>
   <tr class="unknown">
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba esta tiene un texto mucho más largo prueba prueba prueba</td>
      <td>prueba</td>
      <td>Prueba</td>
      <td>Prueba</td>
      <td>prueba</td>
   </tr>
 </tbody>
</table>

Párrafos

<p>Este es un párrafo de ejemplo 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>Texto en negrita</strong> Lorem ipsum dolor sit
  amet, consectetur adipiscing elit.</p>

Encabezados

<h1>Encabezados</h1>
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<h3>Encabezado 3</h3>
<h4>Encabezado 4</h4>
<h5>Encabezado 5</h5>

Botones

<a href="https://example.com" target="_blank" class="btn">Botón principal</a>
<a href="https://example.com" target="_blank" class="btn secondary">Botón secundario</a>
<a href="https://example.com" target="_blank" class="btn danger">Botón de peligro</a>

Tarjetas informativas

<div class="info-card">
 <i class="info-icon fa-solid fa-circle-info"></i>
 <div class="info-text">
   <div class="info-title">Título informativo</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">Título del error</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">Título de la advertencia</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">Título de éxito</div>
   <div class="info-description">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   </div>
 </div>
</div>

Etiquetas

<div class="tag">Habilitado</div>
<div class="tag disabled">Deshabilitado</div>
<div class="tag expired">Caducado</div>

Tarjetas estadísticas

<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;">ANUNCIO</span>&nbsp;<span
                 style="white-space:nowrap;">Conectar</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;">Remitentes bloqueados</span></a></div>
</div>

Gráfico de líneas

<div class="p-3 linechart">
  <div style="width: 33.3333333333%; background-color: #55ACBF;"></div>
  <div style="width: 33.3333333333%; color de fondo: #3633B7;"></div>
  <div style="ancho: 33,3333333333%; color de fondo: #8063BF;"></div>
</div>
<ul class="sin estilo p-3" style="visualización: flex; justify-content: space-between; ">
  <li><span class="chart-key" style="background-color: #55ACBF;"></span><span>
     Con licencia (20)</span></li>
  <li><span class="chart-key" style="background-color: #3633B7;"></span><span>
     Sin licencia (20)</span></li>
  <li><span class="chart-key" style="background-color: #8063BF;"></span><span>
     Invitados (20)</span></li>
</ul>

Documentación relacionada:

WYSIWYG HTML y estilos CSS inline compatibles

Índice:

Uso del editor WYSIWYG en NinjaOne:

Uso de HTML y estilos en línea a través de la API y la CLI:

Elementos HTML:

Opciones de estilo en línea:

Gráficos:

Clases CSS de NinjaOne:

Tarjeta estándar

Tarjeta con acción

Tablas

Párrafos

Encabezados

Botones

Tarjetas informativas

Etiquetas

Tarjetas estadísticas

Gráfico de líneas

FAQ

Próximos pasos

Recursos

Empresa

Información de contacto