左側のパネルでのカスタムパネルの設定
最終更新日： 2024年7月15日
- トピック：
- Web エディター設定
作成対象：
- 経験者
- 管理者
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 エディタのカスタマイズ
Experience Manager
