Guía para desarrolladores sobre las API de estilo y color en ONLYOFFICE

Desarrollar plugins para ONLYOFFICE suele implicar mejorar la forma en que los usuarios interactúan con los documentos, ya sea añadiendo resaltadores, limpiadores de formato o elementos de interfaz con temas personalizados.

Para ayudarte a trabajar de manera más eficiente, hemos recopilado los métodos clave de las API de estilo y color que permiten a los desarrolladores controlar fácilmente la apariencia de sus plugins.

Esta publicación del blog ofrece explicaciones claras, ejemplos prácticos y consejos para una experiencia de desarrollo más fluida.

Comprendiendo el contexto de estilo

Las API de plugins de ONLYOFFICE ofrecen formas flexibles de personalizar la apariencia de los documentos mediante objetos como ApiRange, ApiParagraph y ApiTextPr.

Estas interfaces permiten a los desarrolladores modificar atributos de fuente, alineación de párrafo, colores y otras propiedades visuales directamente desde los scripts de los plugins.

Un ejemplo sencillo de aplicación de estilos de texto:

const oDocument = Api.GetDocument();

const oRange = oDocument.GetRangeBySelect();

const oTextPr = oRange.GetTextPr();

oTextPr.Bold(true);

oTextPr.Italic(true);

oTextPr.SetColor(255, 0, 0); // RGB red

Este fragmento muestra cómo se pueden combinar varios estilos para lograr un formato dinámico.

Métodos comunes de estilo y color

Al desarrollar plugins de ONLYOFFICE que trabajan con el estilo de documentos —como resaltadores, limpiadores de formato o elementos de interfaz basados en temas, los desarrolladores suelen necesitar métodos claros y listos para usar que manejen colores, fuentes y atributos de texto.

Para simplificar este proceso, hemos reunido las API de estilo y color más prácticas, junto con consejos y ejemplos para una integración fluida.

Método	Descripción	Ejemplo
SetColor(r, g, b)	Establece el color del texto usando valores RGB.	oTextPr.SetColor(0, 102, 204)
SetHighlight(sColor)	Aplica un color de resaltado o fondo al texto.	oRange.SetHighlight("lightGray")
SetBackgroundColor(r, g, b)	Aplica un color de fondo a un párrafo.	oParagraph.SetBackColor(230, 230, 230)
SetBold(true/false)	Aplica un color de fondo a un párrafo.	oTextPr.SetBold(true)
SetItalic(true/false)	Activa o desactiva el estilo de negrita.	oTextPr.SetItalic(true)
SetUnderline(true/false)	Activa o desactiva la cursiva.	oTextPr.SetUnderline(true)
SetFontSize(nSize)	Añade o elimina el subrayado.	oTextPr.SetFontSize(14)
SetFontName(name)	Cambia el tamaño de la fuente en puntos.	oTextPr.SetFontName("Calibri")
ApiCell	Define la familia tipográfica.	const cell = sheet.GetRange("A1");
SetCellColor(r, g, b)	Establece el color de fondo de una celda de hoja de cálculo.	cell.SetCellColor(255, 230, 191)

Para el estilo de párrafos, puedes usar métodos análogos mediante la interfaz ApiParagraph:

const oParagraph = oRange.GetParagraph(0);

oParagraph.SetBackColor(230, 230, 230); // Light gray background

oParagraph.SetAlign("center");

Estos métodos forman la base del formato de texto y párrafos en los plugins de ONLYOFFICE. Las celdas de las hojas de cálculo usan API conceptualmente similares, como ApiCell y SetCellColor, siguiendo la misma lógica de estilo.

Trabajando con objetos de color

ONLYOFFICE utiliza definiciones de color basadas en RGB para sus métodos de estilo. Si tu proyecto usa códigos de color HEX (comunes en sistemas de diseño o temas de marca), puedes convertirlos fácilmente usando una pequeña función auxiliar:

function hexToRGB(hex) {

const bigint = parseInt(hex.replace("#", ""), 16);

const r = (bigint >> 16) & 255;

const g = (bigint >> 8) & 255;

const b = bigint & 255;

return [r, g, b];

}

// Example use:

const [r, g, b] = hexToRGB("#3498db");

oTextPr.SetColor(r, g, b);
This allows seamless integration between design resources and plugin functionality.

Consejos y trucos para un estilo confiable

• Vuelve a seleccionar el rango del documento antes de aplicar los cambios para asegurar la precisión después de las acciones en la interfaz de usuario.
• Usa llamadas de función separadas para cada operación de estilo, en lugar de encadenar demasiados métodos a la vez.
• Realiza comprobaciones de validación siempre, por ejemplo, confirma que GetRangeBySelect() devuelve un objeto válido.
• Adapta los valores de color dinámicamente para admitir modos de tema utilizando Asc.plugin.getTheme().

Estos pequeños ajustes ayudan a crear un comportamiento de plugin más estable y coherente con los temas del editor.

Conclusión

Las API de estilo en ONLYOFFICE mantienen un enfoque coherente entre los distintos editores, ya trabajes con documentos, presentaciones o hojas de cálculo.

Al reutilizar los mismos conceptos, aplicación de color, ajuste de fuente, alineación de párrafos, los desarrolladores pueden adaptar su código entre editores mientras mantienen una lógica de estilo unificada.

Al reunir toda esta información en un solo lugar, nuestro objetivo es hacer que el desarrollo de plugins sea más rápido, fluido e intuitivo para todos los que construyen con ONLYOFFICE.

Si tienes preguntas o sugerencias, no dudes en ponerte en contacto con nosotros. Juntos, podemos seguir mejorando la documentación de ONLYOFFICE.