De bovenste balk en werkbalk aanpassen
Als u de knoppen topbar en toolbar wilt aanpassen, kunt u de id's topbar of toolbar gebruiken en dezelfde weergave, controlestructuur, volgen.
Hieronder ziet u een triviaal voorbeeld van het aanpassen van de werkbalk. Hier hebben we de knop Insert Numbered List verwijderd en de knop Insert Paragraph vervangen door onze eigen component met behulp van een aangepaste on-click handler.
Als u toegang wilt tot functies die onder het proxy -object worden weergegeven, moet u dit object benaderen met this.getValue , bijvoorbeeld voor het ophalen van een waarde.
Voor de AEM Guides 2502-release en hoger kunt u hieronder een voorbeeld bekijken voor het aanpassen van de werkbalk.
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"
}
)
}
}
}
Zodra aangepast, kan de definitieve output als volgt worden gezien:
Raadpleeg het onderstaande voorbeeld als u de werkbalk in AEM Guides 4.6.x-versie en in de vorige versie aanpast.
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" )
}
}
}
Zodra aangepast, kan de definitieve output als volgt worden gezien:
In een ander voorbeeld, zouden wij een knoop van de douanetoolbar tot stand brengen die rechtstreeks aan gewenste sub-opties van Verwijzing zoals E-mail, de verwijzing van het Dossier, Weblink, enz. kan springen.
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"
}
}
}
}
Hier is activeTabId de opsomming voor het selecteren van het juiste tabblad. Als u standaard het tabblad Kruisverwijzing selecteert, wordt file_link geopend. U kunt de activeTabId waarden op basis van de vereiste wijzigen in content_reference , conkey_reference , key_reference , file_link , web_link en email_link .