Como adicionar um novo plug-in como uma guia ao ONLYOFFICE Docs
Com o lançamento do ONLYOFFICE Docs 8.1, introduzimos uma ampla gama de novos recursos criados para aumentar a versatilidade e simplificar a experiência do usuário. Entre esses aprimoramentos está a capacidade de exibir plug-ins em uma guia separada. Nesta postagem do blog, vamos orientá-lo nas etapas para aproveitar ao máximo esse novo recurso.
Do que se trata
Esse recurso permite que você crie uma guia dedicada na barra de ferramentas para um plug-in específico.
Essa guia pode conter funcionalidades adicionais para o seu plug-in, tornando-o facilmente acessível.
Implementação
Para ativar esse recurso em seu plug-in, será necessário fazer alterações em dois arquivos:
config.json – No arquivo config.json, você precisará assinar o evento onToolbarMenuClick adicionando o parâmetro events à configuração do plug-in.
"events" : ["onToolbarMenuClick"]
code.js – No arquivo code.js, você precisará usar o método AddToolbarMenuItem, que permite a criação de uma guia separada e exibe seus itens.
this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);
Exemplo de plug-in como guia
Vamos dar uma olhada mais de perto nessas alterações. Para fins de demonstração, criaremos um novo plug-in que insere vários objetos em um documento de texto, com as opções de inserção gerenciadas pelo menu da barra de ferramentas. O exemplo do plug-in pode ser encontrado neste link GitHub.
Modificando o arquivo config.json
Para registrar os eventos que acionam a criação de uma guia adicional, adicionamos o onToolbarMenuClick ao parâmetro events.
O arquivo 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"]
}
}
Modificação do arquivo code.js
Inicialização do plug-in e adição de itens da barra de ferramentas
Para inicializar o plug-in, usamos o método window.Asc.plugin.init. Esse método é o ponto de entrada do plug-in e é chamado automaticamente quando o plug-in é carregado.
window.Asc.plugin.init = function () {
this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);// the rest of the plugin code
}
executeMethod(“AddToolbarMenuItem”): Esse método adiciona a guia personalizada e seus itens à barra de ferramentas. Ele usa a configuração retornada pela função 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;
}
};
Essa função retorna o objeto de configuração que define a guia e seus botões:
- guid: Identificador exclusivo do plug-in.
- tabs: Matriz de objetos de guia, cada um contendo um ID, um rótulo de texto e uma matriz de itens.
- items: Matriz de configurações de botões, em que cada botão tem propriedades como id, tipo, texto, dica, ícones etc.
Manipulação de eventos de clique de itens da barra de ferramentas
Cada botão da barra de ferramentas em nossa guia personalizada aciona um evento quando clicado. Precisamos tratar esses eventos para executar as ações correspondentes. Isso é feito usando o método attachToolbarMenuClickEvent.
Quando o botão Inserir texto é clicado, executamos um comando para inserir um novo parágrafo com texto formatado:
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);
});
});
No botão Insert OLE Object (Inserir objeto OLE), um objeto OLE (por exemplo, um vídeo do YouTube) é inserido no 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");
});
});
O botão Insert image permite que os usuários insiram uma imagem:
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 ver esse plug-in em ação!
Esperamos que este artigo seja valioso ao integrar esse recurso inovador em seus plug-ins. No ONLYOFFICE, temos o compromisso de aprimorar continuamente a experiência do usuário com a introdução de novos recursos e melhorias.
Incentivamos os desenvolvedores a tirar proveito desses novos recursos criando plug-ins inovadores que os aproveitem. Estamos sempre abertos à colaboração e à discussão, portanto, sinta-se à vontade para compartilhar seus plugins conosco. Juntos, podemos continuar a tornar o ONLYOFFICE uma ferramenta ainda mais poderosa. Boa sorte em seus esforços exploratórios!
