Configurare un pannello personalizzato nel pannello a sinistra id224JI200Y6F
Per aggiungere un pannello personalizzato nel pannello sinistro dell’editor web, effettua le seguenti operazioni:
- Crea una cartella clientlib e aggiungi il file JavaScript e CSS in questa cartella.
- Aggiorna la proprietà Categories della cartella clientlib assegnandole il valore di apps.fmdita.xml_editor.page_overrides.
Codice di esempio per configurare un pannello personalizzato:
tcx.ready(function () { //Ready will call the callback after editor code is set for events and global variable excess
// APP_ADD_AUTHOR_LEFT_TAB event will add a new left tab in the left panel, user can show hide it using editor settings
tcx.eventHandler.next(tcx.eventHandler.KEYS.APP_ADD_AUTHOR_LEFT_TAB, {
id: 'my_panel',
class: 'my-panel-tab',
icon: 'file', //Any valid Adobe Spectrum icon name https://spectrum.adobe.com/page/icons/
label: 'My Tab',
prevTabID: 'repository_panel' //Existing tab ids are 'collection_panel', 'repository_panel', 'map_panel', 'outline_panel', 'conref_panel', 'glossary_panel', 'condition_panel', 'subject_scheme_panel', 'snippet_panel', 'template_panel', 'search_panel'
})
// APP_PANEL_DID_MOUNT event will be called after user has selected the panel and panel is rendered in the DOM
tcx.eventHandler.subscribe({
key: tcx.eventHandler.KEYS.APP_PANEL_DID_MOUNT,
next: function(opts) {
// TODO create panel ui inside $el
let $el = opts.$el //$el is Tab panel content html node
let id = opts.id //id is tab panel id (my_panel)
console.log("mounted", opts)
}
})
// APP_PANEL_WILL_UNMOUNT will be called before destorying the new left panel
tcx.eventHandler.subscribe({
key: tcx.eventHandler.KEYS.APP_PANEL_WILL_UNMOUNT,
next: function(opts) {
//TODO do some cleanup
let id = opts.id //id is tab panel id (my_panel)
console.log("unmounted", opts)
}
})
});
Argomento padre: Personalizza editor Web
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178