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