通用編輯器事件

最後更新： 2025年3月6日

建立對象：

  • 管理員
  • 開發人員

瞭解通用編輯器傳送的不同事件，您可用這些事件對遠端應用程式中的內容或UI變更做出反應。

簡介

應用程式對頁面或元件更新可能有不同的需求。 因此，Universal Editor會將定義的事件傳送給遠端應用程式。 如果遠端應用程式沒有已傳送事件的自訂事件接聽程式，則會執行universal-editor-cors封裝所提供的遞補事件接聽程式。

所有事件都會在遠端頁面中受影響的DOM元素上叫用。 事件泡泡至BODY元素，其中已註冊universal-editor-cors封裝提供的預設事件接聽程式。 UI有內容和事件專用的事件。

所有事件都遵循命名慣例。

  • aue:<content-or-ui>-<event-name>

例如，aue:content-update和aue:ui-select

事件包含請求和回應的裝載，並會在對應的呼叫成功時觸發。 如需呼叫及其裝載範例的詳細資訊，請參閱檔案通用編輯器呼叫。

內容更新事件

aue：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

將元件載入屬性面板時，就會觸發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

移動元件時會觸發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

當在屬性面板中更新元件的資料時，就會觸發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

從容器移除元件時會觸發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

當在內容中更新元件的屬性時，就會觸發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
    }
}

傳遞裝載

對於所有內容更新事件，請求的裝載以及回應裝載會傳遞至事件。 例如，對於更新呼叫：

請求裝載：

{
  "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事件

aue：ui-preview

當頁面的編輯模式變更為​ 預覽 ​時，就會觸發aue:ui-preview事件。

此事件的裝載是空的。

{
    details: {}
}

aue：ui-edit

當頁面的編輯模式變更為​ 編輯 ​時，就會觸發aue:ui-edit事件。

此事件的裝載是空的。

{
    details: {}
}

aue：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

會觸發aue:initialized事件，讓遠端頁面知道它已成功載入通用編輯器中。

此事件的裝載是空的。

{
    details: {}
}