通用編輯器事件 events
瞭解通用編輯器傳送的不同事件,您可用這些事件對遠端應用程式中的內容或UI變更做出反應。
簡介 introduction
應用程式對頁面或元件更新可能有不同的需求。 因此,Universal Editor會將定義的事件傳送給遠端應用程式。 如果遠端應用程式沒有已傳送事件的自訂事件接聽程式,則會執行universal-editor-cors
封裝所提供的遞補事件接聽程式。
所有事件都會在遠端頁面中受影響的DOM元素上叫用。 事件泡泡至BODY
元素,其中已註冊universal-editor-cors
封裝提供的預設事件接聽程式。 UI有內容和事件專用的事件。
所有事件都遵循命名慣例。
aue:<content-or-ui>-<event-name>
例如,aue:content-update
和aue:ui-select
事件包含請求和回應的裝載,並會在對應的呼叫成功時觸發。 如需呼叫及其裝載範例的詳細資訊,請參閱檔案通用編輯器呼叫。
內容更新事件 content-events
aue:content-add content-add
將新元件新增至容器時會觸發aue:content-add
事件。
裝載是來自通用編輯器服務的內容,且包含元件定義的遞補內容。
{
details: {
request: request payload; // what is sent to the service
response: { // what is returned by the service
resource: string; // newly created content resource
updates: [{
resource: string; // resource to update
type: string; // type of instrumentation
content?: string; // content to replace
}]
}
}
}
aue:content-details content-details
將元件載入屬性面板時,就會觸發aue:content-details
事件。
裝載是元件的內容,並可選擇是其結構。
{
details: {
content: object // content object
model: [object] // model object
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
aue:content-move content-move
移動元件時會觸發aue:content-move
事件。
裝載是元件、來源容器和目標容器。
{
details: {
from: string; // container we move the component from
component: string; // component we move
to: string; // container we move the component to
before: string; // before which component shall we place the component
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
aue:content-patch content-patch
當在屬性面板中更新元件的資料時,就會觸發aue:content-patch
事件。
裝載是已更新屬性的JSON修補程式。
{
details: {
patch: {
name: string; // attribute which is updated
value: string; // new value which is stored to the attribute
},
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
aue:content-remove content-remove
從容器移除元件時會觸發aue:content-remove
事件。
裝載是已移除元件的專案ID。
{
details: {
resource: string; // the resource which got removed
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
aue:content-update content-update
當在內容中更新元件的屬性時,就會觸發aue:content-update
事件。
裝載是更新的值。
{
details: {
value: string; // updated value
request: request payload; // what is sent to the service
response: response payload; // what is returned by the service
}
}
傳遞裝載 passing-payloads
對於所有內容更新事件,請求的裝載以及回應裝載會傳遞至事件。 例如,對於更新呼叫:
請求裝載:
{
"connections": [
{
"name": "aemconnection",
"protocol": "aem",
"uri": "https://author-p7452-e12433.adobeaemcloud.com"
}
],
"target": {
"resource": "urn:aemconnection:/content/dam/wknd-shared/en/magazine/arctic-surfing/aloha-spirits-in-northern-norway/jcr:content/data/master",
"type": "text",
"prop": "title"
},
"value": "Alhoa Spirit Northern Norway!"
}
回應裝載
{
"updates": [
{
"resource": "urn:aemconnection:/content/dam/wknd-shared/en/magazine/arctic-surfing/aloha-spirits-in-northern-norway/jcr:content/data/master",
"prop": "title",
"type": "text"
}
]
}
UI事件 ui-events
aue:ui-publish ui-publish
發佈內容時會觸發aue:ui-publish
事件(在BODY
層級進行引動)。
裝載是專案ID及其發佈狀態的清單。
aue:ui-select ui-select
選取元件時會觸發aue:ui-select
事件。
裝載是所選元件的專案ID、專案屬性和專案型別。
{
details: {
resource: string; // resource of the selected
prop: string; // prop of the selected
type: string; // type of the selected
selected: boolean; // was selected or unselected
}
}
aue:ui-preview ui-preview
當頁面的編輯模式變更為 預覽 時,就會觸發aue:ui-preview
事件。
此事件的裝載是空的。
{
details: {}
}
aue:ui-edit ui-edit
當頁面的編輯模式變更為 編輯 時,就會觸發aue:ui-edit
事件。
此事件的裝載是空的。
{
details: {}
}
aue:ui-viewport-change ui-viewport-change
檢視區大小變更時會觸發aue:ui-viewport-change
事件。
裝載是檢視區的維度。
{
details: {
height: number?; // height of the viewport. Undefined when fullscreen
width: number?; // width of the viewport. Undefined when fullscreen
}
}
aue:initialized initialized
會觸發aue:initialized
事件,讓遠端頁面知道它已成功載入通用編輯器中。
此事件的裝載是空的。
{
details: {}
}
遞補事件接聽程式 fallback-listeners
內容更新 content-update-fallbacks
aue:content-add
aue:content-details
aue:content-move
aue:content-patch
aue:content-remove
aue:content-update
innerHTML
UI事件 ui-event-fallbacks
aue:ui-publish
aue:ui-select
aue:ui-preview
class="adobe-ue-preview"
新增至HTML標籤aue:ui-edit
class=adobe-ue-edit"
新增至HTML標籤aue:ui-viewport-change
aue:initialized