左側のパネルでのカスタムパネルの設定 id224JI200Y6F
Web エディターの左側のパネル内にカスタムパネルを追加するには、次の手順を実行します。
- clientlib フォルダーを作成し、JavaScriptと CSS ファイルをこのフォルダーに追加します。
- apps.fmdita.xml_editor.page_overrides の値を割り当てて、clientlib フォルダーのカテゴリプロパティを更新します。
カスタムパネルを設定するサンプルコード:
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)
}
})
});
親トピック: Web エディタのカスタマイズ
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178