Cómo añadir un nuevo plugin como una pestaña a ONLYOFFICE Docs
Con el lanzamiento de ONLYOFFICE Docs 8.1, hemos introducido una amplia gama de nuevas características diseñadas para mejorar la versatilidad y agilizar la experiencia del usuario. Entre estas mejoras se encuentra la posibilidad de mostrar los plugins en una pestaña separada. En esta entrada del blog, te guiaremos a través de los pasos para sacar el máximo provecho de esta nueva característica.
De qué se trata
Esta característica te permite crear una pestaña dedicada en la barra de herramientas para un plugin específico.
Esta pestaña puede contener funcionalidades adicionales para tu plugin, haciéndolo fácilmente accesible.
Implementación
Para activar esta característica en tu plugin, necesitas hacer cambios en dos archivos:
config.json – En el archivo config.json necesitas suscribirte al evento onToolbarMenuClick añadiendo el parámetro events a la configuración de tu plugin.
"events" : ["onToolbarMenuClick"]
code.js – En el archivo code.js, tendrás que utilizar el método AddToolbarMenuItem, que permite crear una pestaña independiente y mostrar sus elementos.
this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);
Ejemplo de un plugin como pestaña
Vamos a echar un vistazo más de cerca a estos cambios. Como demostración, crearemos un nuevo plugin que inserte varios objetos en un documento de texto, con las opciones de inserción gestionadas a través del menú de la barra de herramientas. El ejemplo de plugin se puede encontrar en este repositorio de GitHub.
Modificación del archivo config.json
Para registrar los eventos que activan la creación de una pestaña adicional, añadimos onToolbarMenuClick al parámetro events.
El archivo config.json completo:
{
"name" : "Plugin as tab",
"guid" : "asc.{0616AE85-5DBE-4B6B-A0A9-455C4F1503AD}",
"baseUrl" : "",
"variations" : [
{
"description" : "Example of displaying a plugin in a separate tab",
"url" : "index.html",
"icons" : ["resources/img/icon.png", "resources/img/icon@2x.png"],
"isViewer" : false,
"EditorsSupport" : ["word"],
"isVisual" : false,
"isModal" : false,
"isInsideMode" : false,
"initDataType" : "none",
"initData" : "",
"isUpdateOleOnResize" : true,
"buttons" : [],
"events" : ["onToolbarMenuClick"]
}
],
"store": {
"background": {
"light": "radial-gradient(circle, #B5BCC3 0%, #737D87 100%)",
"dark": "radial-gradient(circle, #B5BCC3 0%, #737D87 100%)"
},
"icons": {
"light": "resources/store/icons",
"dark": "resources/store/icons"
},
"categories": ["specAbilities", "work"]
}
}
Modificación del archivo code.js
Inicialización del plugin y adición de elementos a la barra de herramientas
Para inicializar el plugin usamos el método window.Asc.plugin.init. Este método es el punto de entrada del plugin y se llama automáticamente cuando se carga el plugin.
window.Asc.plugin.init = function () {
this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);// the rest of the plugin code
}
executeMethod(“AddToolbarMenuItem”): Este método añade la pestaña personalizada y sus elementos a la barra de herramientas. Toma la configuración devuelta por la función getToolbarItems:
function getToolbarItems() {
console.log()
let items = {
guid: window.Asc.plugin.info.guid,
tabs: [{
id: "tab_1",
text: "Insert options",
items: [
{
id: "insertText",
type: "button",
text: "Insert text",
hint: "insert text into the document",
icons: "resources/buttons/icon_txt.png",
lockInViewMode: true,
enableToggle: false,
separator: false
},
{
id: "insertOleObject",
type: "button",
text: "Insert OLE Object",
hint: "Insert an OLE object into the document",
icons: "resources/buttons/icon_ole.png",
lockInViewMode: true,
enableToggle: false,
separator: false
},
{
id: "insertImage",
type: "button",
text: "Insert image",
hint: "Insert an image into the document",
icons: "resources/buttons/icon_img.png",
lockInViewMode: true,
enableToggle: false,
separator: false
}
]
}]
};
return items;
}
};
Esta función devuelve el objeto de configuración que define la pestaña y sus botones:
- guid: Identificador único para el plugin.
- tabs: Matriz de objetos de pestaña, cada uno de los cuales contiene un ID, una etiqueta de texto y una matriz de elementos.
- items: Matriz de configuraciones de botones, donde cada botón tiene propiedades como id, tipo, texto, iconos, etc.
Gestión de los eventos de clic de los elementos de la barra de herramientas
Cada botón de la barra de herramientas de nuestra pestaña personalizada desencadena un evento cuando se hace clic en él. Necesitamos manejar estos eventos para ejecutar las acciones correspondientes. Esto se hace utilizando el método attachToolbarMenuClickEvent.
Cuando se pulsa el botón Insertar texto, ejecutamos un comando para insertar un nuevo párrafo con texto formateado:
this.attachToolbarMenuClickEvent("insertText", function (data) {
this.callCommand(function () {
var oDocument = Api.GetDocument();
// Create a new paragraph
var oParagraph = Api.CreateParagraph();
// Add text to the paragraph
oParagraph.AddText("ONLYOFFICE Docs 8.1");
// Style the text as a title
oParagraph.SetBold(true); // Make the text bold
oParagraph.SetFontSize(24); // Increase the font size
oParagraph.SetJc("center"); // Align text to the center
// Insert the paragraph at the beginning of the document
oDocument.InsertContent([oParagraph],0);
});
});
Con el botón Insertar objeto OLE, se inserta un objeto OLE (por ejemplo, un vídeo de YouTube) en el documento:
this.attachToolbarMenuClickEvent("insertOleObject", function (data) {
this.callCommand(function () {
var oDocument = Api.GetDocument();
var oOleObject = Api.CreateOleObject("data:image/jpeg;base64,<Base64ImageCode>", 130 * 36000, 90 * 36000, "https://www.youtube.com/watch?v=oYlRfQ2zhaQ", "asc.{38E022EA-AD92-45FC-B22B-49DF39746DB4}");
var oParagraph = oDocument.GetElement(0);
oParagraph.AddDrawing(oOleObject);
oParagraph.SetJc("center");
});
});
El botón Insertar imagen permite a los usuarios insertar una imagen:
this.attachToolbarMenuClickEvent("insertImage", function (data) {
this.callCommand(function () {
var oDocument = Api.GetDocument();
var oParagraph = oDocument.GetElement(0);
var oDrawing = Api.CreateImage("data:image/jpeg;base64,<Base64ImageCode>", 150 * 36000, 90 * 36000);
oParagraph.SetJc("center");
oParagraph.AddDrawing(oDrawing);
});
});
¡Vamos a ver este plugin en acción!
Esperamos que este artículo te resulte valioso a la hora de integrar esta función innovadora en tus plugins. En ONLYOFFICE, estamos comprometidos a mejorar continuamente la experiencia del usuario mediante la introducción de nuevas características y mejoras.
Invitamos a los desarrolladores a aprovechar estas nuevas capacidades creando plugins innovadores que las aprovechen. Siempre estamos abiertos a la colaboración y el debate, así que no dudes en compartir tus plugins con nosotros. Podemos seguir haciendo de ONLYOFFICE una herramienta aún más potente. ¡Te deseamos mucha suerte en tus esfuerzos exploratorios!
