Benutzerdefiniertes Bedienfeld im linken Bereich konfigurieren id224JI200Y6F
Führen Sie die folgenden Schritte aus, um ein benutzerdefiniertes Bedienfeld im linken Bereich des Web-Editors hinzuzufügen:
- Erstellen Sie einen Ordner clientlib und fügen Sie Ihre JavaScript- und CSS-Datei in diesen Ordner ein.
- Aktualisieren Sie die categories-Eigenschaft des Ordners clientlib , indem Sie ihm den Wert apps.fmdita.xml_editor.page_overrides zuweisen.
Beispielcode zum Konfigurieren eines benutzerdefinierten Bedienfelds:
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)
}
})
});
Übergeordnetes Thema: Web-Editor anpassen
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178