WebEditor ツールバーにアクションにつながる新しいカスタムボタンを追加する
この記事では、webeditor ツールバーに新しいカスタムボタンを追加し、javascript を呼び出して、目的のカスタム操作を実行する方法について説明します。
実用的なボタンを Webeditor に追加するには、次の手順に従います。
- ボタンを ui_config.json 必要な位置に
- クリック時にユーザーがアクションを実行できるように、ボタンのオンクリックイベントを Webeditor に登録する。
例を見て実装する
作成者がトピックのプロローグセクションに jira 参照を追加する例を使用して、この点を理解してみましょう。 jira reference-id が埋め込まれた prolog セクションは、次のようになります。
JIRA ID を含む「change-request-id」要素は、API から取得する必要があります(例えば、アプリケーションで表される特定の JIRA クエリに基づいています)。 ユーザーがプロログセクションを作成している場合、ユーザーは、ボタンをクリックして、Web エディターのツールバーから jira 参照 ID を挿入できるはずです。次に例を示します。
ユーザーがボタンをクリックすると、次のようなオプションを取り込み、ユーザーが目的の JIRA ID を選択できるようにするダイアログが表示されます。
次に、「change-request-id」をプロログに追加します。
この実装
ボタンをで設定して、Webeditor に追加します。 ui_config.json
フォルダープロファイルを使用して、 ui_config.json 「XML Editor Configuration」タブの下で、ボタン設定 JSON を「toolbar」グループの目的のセクションに追加します。
{
"on-click":"insertJIRARef",
"icon":"linkCheck",
"variant":"quiet",
"type":"button",
"title":"Insert JIRA Reference"
}
このリンクを使用して、フォルダープロファイルと ui_config.json の設定に関する詳細を確認できます
新しいボタンのクリック時イベントを処理します
注意:以下に示す手順は、この投稿に添付されたパッケージとして利用できます
- フォルダープロファイルを保存した後、プロジェクトディレクトリ(の下)に「cq:ClientLibraryFolder」を作成します。 /apps) をクリックし、以下のスクリーンショットに示すように、プロパティを追加します。
This example uses "coralui3" library to show a dialog as it is used in the Javascript sample we presented.
You may use different library of your choice.
-
このクライアントライブラリフォルダーの下に、以下に示すように 2 つのファイルを作成します。
- overrides.js:「insertJIRARef」のオンクリックイベントを処理する javascript コードを持つ(この javascript のコンテンツを取得するには添付のパッケージを使用)
- js.txt:この javascript を有効にする「overrides.js」を含みます。
-
変更を保存すると、テストの準備が整います。
テスト
- Web-editor を開く
- ユーザーの環境設定から、カスタム ui_config.json. Global プロファイルに追加した場合は、既に使用されている可能性があります。
- トピックを開くと、ツールバーに新しいボタン「Insert Jira Reference」が表示されます。
- 次に、以下に示すようにプロログセクションをトピックに追加し、プロログ要素「change-request-reference」内の「Insert Jira Reference」ボタンをクリックしてみてください。
<prolog>
<change-historylist>
<change-item>
<change-request-reference>
</change-request-reference>
<change-completed></change-completed>
<change-summary></change-summary>
</change-item>
</change-historylist>
</prolog>
以下のスクリーンショットを参照して、どのように表示されるかを確認してください。
添付ファイル
- ツールバーボタンのアクション用の JavaScript コードを持つ webeditor クライアントライブラリをインストールする、サンプルの clientlibs パッケージです。 このリンクを使用してダウンロード
- サンプル ui_config.json 次のフォルダープロファイルにアップロードできます。 サンプル ui_config.json をダウンロード
Please note this is compatible to AEM 6.5 and AEM Guides version 4.2.
If you are using a different version please add the toolbar button to the ui_config.json manually.