ONLYOFFICE Docsに新しいプラグインをタブとして追加する方法
ONLYOFFICE Docs 8.1のリリースでは、汎用性を高め、ユーザーエクスペリエンスを合理化するために設計された幅広い新機能を導入しました。これらの改良点の中には、プラグインを別のタブに表示する機能があります。今回のブログ投稿では、この新機能を最大限に活用するための手順をご説明します。
機能概要
この機能により、ツールバーに特定のプラグイン専用のタブを作成することができます。
このタブにはプラグインの追加機能を含めることができ、簡単にアクセスできるようになります。
実装
プラグインでこの機能を有効にするには、2つのファイルを変更する必要があります。
config.json–config.jsonファイルで、プラグイン設定にeventsparameterを追加して、onToolbarMenuClickイベントを購読する必要があります。
"events" : ["onToolbarMenuClick"]
code.js–code.jsファイルでは、AddToolbarMenuItemメソッドを使用する必要があります。
this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);
タブの例としてのプラグイン
これらの変更を詳しく見てみましょう。デモンストレーションのために、テキスト文書に複数のオブジェクトを挿入する新しいプラグインを作成し、挿入オプションをツールバーメニューで管理することにします。プラグインのサンプルはGitHub リポジトリにあります。
config.json ファイルの変更
追加タブの作成をトリガーするイベントを登録するために、eventsparameterに onToolbarMenuClickを追加します。
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"]
}
}
code.jsファイルの修正
プラグインの初期化とツールバーアイテムの追加
プラグインを初期化するには、window.Asc.plugin.init メソッドを使用します。このメソッドはプラグインのエントリポイントで、プラグインがロードされると自動的に呼び出されます。
window.Asc.plugin.init = function () {
this.executeMethod("AddToolbarMenuItem", [getToolbarItems()]);// the rest of the plugin code
}
executeMethod(“AddToolbarMenuItem”)： このメソッドは、カスタム・タブとその項目をツールバーに追加します。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;
}
};
この関数は、タブとそのボタンを定義する設定オブジェクトを返します：
- guid：プラグインの一意な識別子
- tabs：タブオブジェクトの配列。各オブジェクトは ID、テキストラベル、アイテムの配列を含みます。
- items：ボタンの設定の配列。各ボタンには ID、タイプ、テキスト、ヒント、アイコンなどのプロパティがあります。
ツールバーアイテムのクリックイベントの処理
カスタムタブの各ツールバーボタンは、クリックされるとイベントをトリガーします。対応するアクションを実行するために、これらのイベントを処理する必要があります。これは、attachToolbarMenuClickEventメソッドを使用して行います。
「テキストの挿入」ボタンがクリックされると、書式付きテキストで新しい段落を挿入するコマンドを実行します。
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);
});
});
「OLE オブジェクトの挿入」ボタンの場合、OLE オブジェクト (たとえばYouTube動画) がドキュメントに挿入されます：
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");
});
});
「画像挿入」ボタンで画像を挿入できます：
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);
});
});
このプラグインを実際に使ってみましょう！
この記事が、あなたのプラグインにこの革新的な機能を統合する際に役立つことを願っています。ONLYOFFICEでは、新しい機能や改善を導入することで、ユーザーエクスペリエンスを継続的に向上させることにコミットしています。
私たちは開発者の方々に、それらを活用した革新的なプラグインを作成することによって、これらの新しい機能を活用することを奨励しています。私たちは常にコラボレーションとディスカッションをオープンにしていますので、あなたのプラグインをお気軽に私たちと共有してください。一緒にONLYOFFICEをさらにパワフルなツールにしていきましょう。
