Anpassa verktygsfältet
Om du vill anpassa topbar och toolbar använder vi ID:n topbar eller toolbar och följer samma vy, kontrollenhetsstruktur.
Nedan finns ett enkelt exempel på anpassning av verktygsfält. Här har vi tagit bort knappen Insert Numbered List och ersatt knappen Insert Paragraph med vår egen komponent med en anpassad klickhanterare.
För att komma åt funktioner som exponeras under objektet proxy måste vi komma åt det med hjälp av this.proxy.getValue låt säga för att hämta ett värde.
const toolbarExtend = {
id: "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
}
},
]
},
controller: {
init: function() {
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" )
}
}
}
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178