WYSIWYG HTML y estilos CSS inline compatibles

Los campos personalizados WYSIWYG de NinjaOne gestionan una lista de elementos permitidos y estilos CSS inline compatibles que se pueden utilizar para el contenido. NinjaOne también proporciona clases CSS que los técnicos pueden utilizar para aplicar diversos estilos en NinjaOne.

Índice

Usar el editor WYSIWYG en NinjaOne
Usar HTML y estilos CSS inline a través de API y CLI
Elementos HTML
Opciones de estilo inline
Clases CSS de NinjaOne

Usar el editor WYSIWYG en NinjaOne

La aplicación NinjaOne Documentation ofrece campos WYSIWYG (What You See is What You Get), en la base de conocimientos y como campo personalizado para plantillas de documentos.

Funcionalidad WYSIWYG

Por defecto, cuando un campo HTML tiene más de 10.000 caracteres, se reduce y el usuario tiene que hacer clic en el botón "Expandir" para ver el contenido completo.
El límite máximo de caracteres para los 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, ya no es posible seleccionar la opción WYSIWYG como tipo de campo.

Usar HTML y estilos CSS inline a través de API y CLI

Los administradores y técnicos del sistema NinjaOne pueden utilizar el HTML y el estilo CSS inline al crear campos personalizados Rol/Global y la documentación de Apps y servicios que utilizan los campos de tipo "WYSIWYG".

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

Nota importante: Estas opciones de estilo se deben aplicar desde la API o la CLI y, por el momento, no se pueden hacer a partir de la consola NinjaOne.

A continuación encontrarás una lista completa de los elementos y las clases de CSS que pueden utilizarse para darle forma a tu contenido:

Elementos HTML:

Elemento	¿Es compatible con las clases de NinjaOne?
R:	Sí
blockquote	Sí
caption	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í
table	Sí
tbody	Sí
td	Sí
tfoot	Sí
th	Sí
thead	Sí
tr	Sí
ul	Sí

Opciones de estilo inline

Estilo	Valores permitidos
color	Códigos de color RVA o hexadecimales. (Ej: RVA (240,30,50,.7), #f015ca)
background-color	Códigos de color RVA o hexadecimales. (Ej: RVA (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	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
height	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
font-size	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
font-family	serif, sans-serif, monospace, cursive, fantasy, system-ui, emoji
margin	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
margin-top	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
margin-right	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
margin-bottom	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
margin-left	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
padding	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
padding-top	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
padding-right	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
padding-bottom	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
padding-left	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
border-width	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
border-style	ninguno, sólido, discontinuo, intercalado, none, solid, dashed, inset, outset
borde-color	Códigos de color RVA o hexadecimales. (Ej: RVA (240,30,50,.7), #f015ca)
border-top	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
border-right	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
border-bottom	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
border-bottom	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
border-radius	Valores de unidad CSS válidos (por ejemplo, 100%, 400px, auto, 2em, etc.)
border-collapse	collapse, separate

Clases CSS de NinjaOne

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

Ficha estándar
Ficha con acción
Tablas
Párrafos
Rúbricas
Botones
Fichas informativas
Etiquetas
Fichas estadísticas
Gráfico lineal

Ficha 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 inquilinoo</b><br>Ejemplo de cliente</p>
    <p><b>Dominio por defecto</b><br>exemple.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>ejemplo.onmicrosoft.com
    </p>
    <p><b>Usuarios administradores</b><br>EXO_App2, Administrador MOD, Administrador MOD, Cuenta de servicio Microsoft, Allan
       Deyoung, Nestor Wilke, Isaiah Langer, Megan Bowen, Lidia Holloway</p>
    <p></p>
  </div>
</div>

Ficha 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;Estándares CIPP aplicadps</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
 (exemple.onmicrosoft.com)</span></li>
    </ul>
    <p></p>
  </div>
</div>

Tablas

<>
  <>
    <><>
       <><>
       <><>
       <><>
       <>tabla>
       <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>
       < este tiene un texto mucho más largo testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</td>
    </tr>
    <tr class="danger">
       <td>Testing</td>
       <td>Testing este tiene un texto mucho más largo 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 este tiene un texto mucho más largo 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 este tiene un texto mucho más largo 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 este tiene un texto mucho más largo 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 este tiene un texto mucho más largo testing testing</td>
       <td>testing</td>
       <td>Testing</td>
       <td>Testing</td>
       <td>testing</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>Bold Text</strong> Lorem ipsum dolor sit
   amet, consectetur adipiscing elit.</p>

Rúbricas

<h1>Rúbricas</h1>
<h1>Rúbrica 1</h1>
<h2>Rúbrica 2</h2>
<h3>Rúbrica 3</h3>
<h4>Rúbrica 4</h4>
<h5>Rúbrica 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 secundario">Botón secundario</a>
<a href="https://example.com" target="_blank" class="btn peligro">Botón de emergencia</a>

Fichas 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 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 del éxito</div>
    <div class="info-description">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</div>

Etiquetas

<div class="tag">Activado</div>
<div class="tag disabled">Desactivado</div>
<div class="tag expired">Expirado</div>

Fichas 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;">AD</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 lineal

<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>
      Unlicensed (20)</span></li>
   <li><span class="chart-key" style="background-color: #8063BF;"></span><span>
      Guests (20)</span></li>
</ul>

Documentación relacionada: