Hinzufügen eines neuen Plugins als Registerkarte zu ONLYOFFICE Docs
Mit der Veröffentlichung von ONLYOFFICE Docs 8.1 haben wir eine Vielzahl neuer Funktionen eingeführt, um die Vielseitigkeit zu erhöhen und die Benutzerfreundlichkeit zu verbessern. Eine dieser Verbesserungen ist die Möglichkeit, Plugins in einer separaten Registerkarte anzuzeigen. In diesem Blogbeitrag führen wir Sie durch die Schritte, mit denen Sie diese neue Funktion optimal nutzen können.
Worum es geht
Mit dieser Funktion können Sie eine eigene Registerkarte in der Symbolleiste für ein bestimmtes Plugin erstellen.
Diese Registerkarte kann zusätzliche Funktionen für Ihr Plugin enthalten, so dass diese leicht zugänglich sind.
Umsetzung
Um diese Funktion in Ihrem Plugin zu aktivieren, müssen Sie Änderungen an zwei Dateien vornehmen:
config.json – In der Datei config.json müssen Sie das onToolbarMenuClick-Ereignis abonnieren, indem Sie den Parameter events zu Ihrer Plugin-Konfiguration hinzufügen.
"events" : ["onToolbarMenuClick"]
code.js – In der Datei code.js müssen Sie die Methode AddToolbarMenuItem verwenden, die die Erstellung einer separaten Registerkarte ermöglicht und deren Elemente anzeigt.
this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);
Beispiel für ein Plugin als Registerkarte
Schauen wir uns diese Änderungen genauer an. Zu Demonstrationszwecken erstellen wir ein neues Plugin, das mehrere Objekte in ein Textdokument einfügt, wobei die Einfügeoptionen über das Menü der Symbolleiste verwaltet werden. Das Plugin-Beispiel finden Sie in diesem GitHub-Repository.
Ändern der Datei config.json
Um die Ereignisse zu registrieren, die die Erstellung einer zusätzlichen Registerkarte auslösen, fügen wir den onToolbarMenuClick zum Parameter events hinzu.
Die gesamte Datei config.json:
{
"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"]
}
}
Ändern der Datei code.js
Initialisierung des Plugins und Hinzufügen von Symbolleistenelementen
Um das Plugin zu initialisieren, verwenden wir die Methode window.Asc.plugin.init. Diese Methode ist der Einstiegspunkt des Plugins und wird automatisch aufgerufen, wenn das Plugin geladen wird.
window.Asc.plugin.init = function () {
this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);// the rest of the plugin code
}
executeMethod(“AddToolbarMenuItem”): Diese Methode fügt die benutzerdefinierte Registerkarte und ihre Elemente zur Symbolleiste hinzu. Sie übernimmt die von der Funktion getToolbarItems zurückgegebene Konfiguration:
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;
}
};
Diese Funktion gibt das Konfigurationsobjekt zurück, das die Registerkarte und ihre Schaltflächen definiert:
- guid: Eindeutiger Bezeichner für das Plugin.
- tabs: Array von Tab-Objekten, die jeweils eine ID, eine Textbeschriftung und ein Array von Elementen enthalten.
- items: Array von Schaltflächenkonfigurationen, wobei jede Schaltfläche Eigenschaften wie ID, Typ, Text, Hinweis, Symbole usw. hat.
Behandlung von Klick-Ereignissen für Symbolleistenelemente
Jede Schaltfläche der Symbolleiste auf unserer benutzerdefinierten Registerkarte löst ein Ereignis aus, wenn sie angeklickt wird. Wir müssen diese Ereignisse behandeln, um die entsprechenden Aktionen auszuführen. Dies geschieht mit der Methode attachToolbarMenuClickEvent.
Wenn die Schaltfläche Insert text (Text einfügen) angeklickt wird, führen wir einen Befehl zum Einfügen eines neuen Absatzes mit formatiertem Text aus:
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);
});
});
Bei der Schaltfläche Insert OLE Object (OLE-Objekt einfügen) wird ein OLE-Objekt (z. B. ein Youtube-Video) in das Dokument eingefügt:
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");
});
});
Mit der Schaltfläche Insert image (Bild einfügen) kann man ein Bild in das Dokument einfügen:
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);
});
});
Lassen Sie uns dieses Plugin in Aktion sehen!
Wir hoffen, dass dieser Artikel Ihnen bei der Integration dieser innovativen Funktion in Ihre Plugins hilft. Wir bei ONLYOFFICE sind bestrebt, die Benutzerfreundlichkeit durch die Einführung neuer Funktionen und Verbesserungen kontinuierlich zu verbessern.
Wir ermutigen Entwickler, die Vorteile dieser neuen Funktionen zu nutzen, indem sie innovative Plugins erstellen, die diese nutzen. Wir sind immer offen für Zusammenarbeit und Diskussionen, also teilen Sie uns gerne Ihre Plugins mit. Gemeinsam können wir ONLYOFFICE zu einem noch leistungsfähigeren Tool machen. Wir wünschen Ihnen viel Erfolg bei Ihren Erkundungen!
