トップバーとツールバーのカスタマイズ
topbarとtoolbarをカスタマイズするには、ID : topbarまたはtoolbarを使用し、同じビュー、コントローラ構造に従います。
NOTE
2502 リリースのExperience Manager Guides以降、ID toolbarの名前が editor toolbar に変更されました。 以前のバージョンを使用している場合は、ツールバー IDを使用してツールバーをカスタマイズできます。 現在、topbarというIDはなく、代わりに editor_tab_bar を使用しています。
以下は、ツールバーのカスタマイズの簡単な例です。 ここでは、Insert Numbered List ボタンを削除し、カスタマイズされたクリック時のハンドラーを使用して、Insert Paragraph ボタンを独自のコンポーネントに置き換えました。
TIP
editor_toolbarはボタンをレンダリングするように設計されているため、ウィジェットを追加すると、CSSと応答性が損なわれる可能性があります。 ボタンまたはラベルなどの基本的なコンポーネントのみを含めることをお勧めします。
proxy オブジェクトの下に公開されている機能にアクセスするには、this.getValueを使用してアクセスする必要があります。値を取得するにはと言います。
AEM Guides 2502 リリース以降については、以下のツールバーのカスタマイズ例を参照してください。
const toolbarExtend = {
id: "editor_toolbar",
view: {
items: [
{
component: "div",
target: {
key:"title",value: "Insert Numbered List",
viewState: VIEW_STATE.REPLACE
}
},
{
"component": "button",
"icon": "textParagraph",
"variant": "action",
"quiet": true,
"title": "Insert Paragraph",
"on-click": "INSERT_P",
target: {
key:"title",value: "Insert Paragraph",
viewState: VIEW_STATE.REPLACE
}
},
{
"component": "button",
"icon": "fileHTML",
"variant": "action",
"quiet": true,
"title": "URL Link Customization",
"on-click": "openExternalLinkDialog",
target: {
key: "title", value: "Insert Bulleted List",
viewState: VIEW_STATE.REPLACE
}
}
]
},
controller: {
init: function() {
console.log(this.getValue("canUndo"))
this.subscribeAppEvent({
key: "editor.preview_rendered",
next: async function (e) {
console.log(this.getValue("canUndo"))
}.bind(this)
})
},
INSERT_P(){
this.appEventHandlerNext("AUTHOR_INSERT_ELEMENT", "p" )
},
openExternalLinkDialog() {
this.appEventHandlerNext("AUTHOR_INSERT_ELEMENT",
{
args: "<xref href='' scope='external' format = 'dita' ></xref>", activeTabId: "conkey_reference"
}
)
}
}
}
カスタマイズが完了すると、最終的な出力は次のようになります。
AEM Guides 4.6.x リリースおよび以前のバージョンでツールバーをカスタマイズする場合は、次の例を参照してください。
const topbarExtend = {
id: "toolbar",
view: {
items: [
{
component: "div",
target: {
key:"title",value: "Insert Element",
viewState: VIEW_STATE.REPLACE
}
},
{
component: "div",
target: {
key:"title",value: "Insert Paragraph",
viewState: VIEW_STATE.REPLACE
}
},
{
component: "div",
target: {
key:"title",value: "Insert Numbered List",
viewState: VIEW_STATE.REPLACE
}
},
{
component: "div",
target: {
key:"title",value: "Insert Bulleted List",
viewState: VIEW_STATE.REPLACE
}
},
{
"component": "button",
"extraclass": "insert-multimedia",
"icon": "more",
"variant": "action",
"quiet": true,
"holdAffordance": true,
"title": "More Insert Options",
"elementID": "toolbar_insert",
"on-click": {
"name": "APP_SHOW_OPTIONS_POPOVER",
"args":{
"target": "toolbar_insert",
"extraclass": "new_options_buttons",
"items": [
{
"component": "button",
"icon": "add",
"variant": "action",
"quiet": true,
"title": "Insert Element",
"on-click": "AUTHOR_SHOW_INSERT_ELEMENT_UI"
},
{
"component": "button",
"icon": "textParagraph",
"variant": "action",
"quiet": true,
"title": "Insert Paragraph",
"on-click": "INSERT_P"
},
{
"component": "button",
"icon": "textNumbered",
"variant": "action",
"quiet": true,
"title": "Insert Numbered List",
"on-click": "AUTHOR_INSERT_REMOVE_NUMBERED_LIST"
},
{
"component": "button",
"icon": "textBulleted",
"variant": "action",
"quiet": true,
"title": "Insert Bulleted List",
"on-click": "AUTHOR_INSERT_REMOVE_BULLETED_LIST"
},
{
"component": "button",
"icon": "table",
"variant": "action",
"quiet": true,
"title": "Insert Table",
"on-click": "AUTHOR_INSERT_ELEMENT",
}
]
},
},
target: {
key:"title",value: "Insert Table",
viewState: VIEW_STATE.REPLACE
}
},
]
},
controller: {
init() {
console.log(this.proxy.getValue('canUndo'))
this.proxy.subscribeAppEvent({
key: "editor.preview_rendered",
next: async function (e) {
console.log(this.proxy.getValue('canUndo'))
}.bind(this)
})
},
INSERT_P(){
this.next("AUTHOR_INSERT_ELEMENT", "p" )
}
}
}
カスタマイズが完了すると、最終的な出力は次のようになります。
別の例では、電子メール、ファイル参照、Weblinkなどの 相互参照 の任意のサブオプションに直接ジャンプできるカスタムツールバーボタンを作成します。
const toolbarExtend = {
id: "editor_toolbar",
view: {
items: [
{
"component": "button",
"icon": "fileHTML",
"variant": "action",
"quiet": true,
"title": "External URL Link",
"on-click": "openExternalLinkDialogP",
target: {
key:"title",value: "Insert Bulleted List",
viewState: VIEW_STATE.REPLACE
}
}
]
},
controller: {
openExternalLinkDialog() {
tcx.eventHandler.next ("AUTHOR_INSERT_ELEMENT")
t{
args:"<xref href='' scope='external' format = 'dita' ></xref>",activeTabId:"conkey_reference"
}
}
}
}
ここでは、activeTabIdは正しいタブを選択するための列挙です。 デフォルトでは、「相互参照」タブを選択すると、file_linkが開きます。 activeTabIdの値は、要件に基づいてcontent_reference、conkey_reference、key_reference、file_link、web_linkおよび email_linkに変更できます。
recommendation-more-help
experience-manager-guides-help-product-guide