ONLYOFFICE Docsの右パネルにプラグインを追加する方法

カスタマイズにより、ツールをニーズに合わせて調整できるため、生産性が向上します。最新のアップデートにより、ONLYOFFICEプラグインはさらに柔軟性が高まりました。前回の記事では、プラグインをタブとして表示する方法をご紹介しました。もう一つの便利なカスタマイズオプションは、エディタの左側または右側にプラグインパネルを配置できることです。今回のブログ記事では、この機能について詳しく説明し、実装方法をステップバイステップでご案内します。

何が変わったのか?

以前は、config.jsonファイルでいくつかのパラメータを使用して、プラグインの機能管理や、isInsideMode、isModal、isSystem、isVisual、menuなどのエディタ内での表示を決定していました。

現在、config.jsonファイルで使用されていた古いパラメータは、typeという単一のパラメータに置き換えられました。この新しいパラメータは、以下のオプションを提供することで、プラグインの設定を簡素化します。

• system：常にアクティブで無効にできないシステムレベルのプラグイン。
• background：起動すると継続的に動作するバックグラウンドプラグイン。その状態(有効/無効)はセッション間で維持されます。
• window：起動するとスタンドアロンウィンドウとして動作するプラグイン。
• panel：左側のパネルで開くプラグイン。
• panelRight：右側のパネルで開くプラグイン。
• 不可視：起動時に不可視のプラグイン。

このブログ記事では、panelRightオプションについて詳しく見ていきます。このオプションを使用すると、パネルをエディタの右側に配置することができます。

実装方法

例として、Zoteroサービスを使用して文献目録を作成できるZoteroプラグインを使用します。プラグインのインストールが完了したら、sdkjs-pluginsディレクトリ内のZoteroプラグインフォルダに移動し、config.jsonファイルを修正します。非推奨のパラメータを使用します。

 "isVisual": true,
 "isModal": false,
 "isInsideMode": true,

そして、それらを次のように置き換えます。

 "type": "panelRight",

編集後のconfig.jsonファイルは以下のようになります。

{
    "name": "Zotero",
    "nameLocale": {
        "ru": "Zotero",
        "fr": "Zotero",
        "es": "Zotero",
        "pt-BR": "Zotero",
        "de": "Zotero"
    },
    "guid": "asc.{BFC5D5C6-89DE-4168-9565-ABD8D1E48711}",
    "version": "1.0.3",
    "minVersion": "7.3.3",
    "variations": [
        {
            "description": "Create bibliographies in the required style using Zotero service.",
            "descriptionLocale": {
                "ru": "Оформляйте библиографические списки в нужном стиле с помощью Zotero.",
                "fr": "Créez des bibliographies dans le style nécessaire avec Zotero.",
                "es": "Cree bibliografías en el estilo requerido utilizando el servicio Zotero.",
                "pt-BR": "Crie bibliografias no estilo desejado usando o serviço Zotero.",
                "de": "Erstellen Sie Literaturverzeichnisse im gewünschten Stil mittels Zotero."
            },
            "url": "index.html",
            "icons": [
                "resources/light/icon.png",
                "resources/light/icon@2x.png"
            ],
            "icons2": [
                {
                    "style": "light",
                    "100%": {
                        "normal": "resources/light/icon.png"
                    },
                    "125%": {
                        "normal": "resources/light/icon@1.25x.png"
                    },
                    "150%": {
                        "normal": "resources/light/icon@1.5x.png"
                    },
                    "175%": {
                        "normal": "resources/light/icon@1.75x.png"
                    },
                    "200%": {
                        "normal": "resources/light/icon@2x.png"
                    }
                },
                {
                    "style": "dark",
                    "100%": {
                        "normal": "resources/dark/icon.png"
                    },
                    "125%": {
                        "normal": "resources/dark/icon@1.25x.png"
                    },
                    "150%": {
                        "normal": "resources/dark/icon@1.5x.png"
                    },
                    "175%": {
                        "normal": "resources/dark/icon@1.75x.png"
                    },
                    "200%": {
                        "normal": "resources/dark/icon@2x.png"
                    }
                }
            ],
            "isViewer": false,
            "EditorsSupport": [
                "word"
            ],
            "initDataType": "text",
            "initData": "",
            "type": "panelRight",
            "isUpdateOleOnResize": false,
            "initOnSelectionChanged": false,
            "store": {
                "background": {
                    "light": "#2D3037",
                    "dark": "#2D3037"
                },
                "screenshots": [
                    "resources/store/screenshots/screen_1.png",
                    "resources/store/screenshots/screen_2.png"
                ],
                "icons": {
                    "light": "resources/store/icons",
                    "dark": "resources/store/icons"
                },
                "categories": [
                    "specAbilities"
                ]
            }
        }
    ]
}

すべての修正を完了すると、プラグインは次のようになります。

ご注意！パネルを左側に配置するには、panelRightオプションをpanelに更新します。

このブログ記事が、ONLYOFFICE内のプラグインのカスタマイズ方法の理解に役立ったことを願っています。ONLYOFFICEでは、お客様のニーズに正確に合うように、製品をよりユーザーフレンドリーでカスタマイズしやすくするよう努めています。これには、お客様のワークフローに合わせてプラグインを柔軟に調整できることが含まれます。

独自のプラグイン開発をぜひお試しください。また、ご質問やご提案もいつでも歓迎いたします。コラボレーションやディスカッションも歓迎いたします。ONLYOFFICEの体験を一緒に向上させていきましょう。 探究的な取り組みに幸運を祈ります。