Personalizzazione della barra superiore e della barra degli strumenti
Per personalizzare topbar e toolbar, verranno utilizzati gli ID topbar o toolbar e verrà seguita la stessa visualizzazione, la stessa struttura del controller.
Di seguito è riportato un banale esempio di personalizzazione della barra degli strumenti. In questo caso, il pulsante Insert Numbered List è stato rimosso e sostituito dal pulsante Insert Paragraph con un componente personalizzato che utilizza un gestore di clic personalizzato.
Per accedere alla funzionalità esposta in proxy oggetto, dovremo accedervi utilizzando this.proxy.getValue, diciamo per recuperare un valore.
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