使用 Universal Editor 編寫內容 authoring

了解內容作者使用 Universal Editor 建立內容有多簡單和直覺。

簡介 introduction

Universal Editor 支援在任意實作中編輯任何方面的內容,以便提供卓越的體驗、提高內容速度並提供最先進的開發人員體驗。

為此,Universal Editor 為內容作者提供直觀的 UI,只需要最基本的培訓就能立即進入狀況並開始編輯內容。本文件說明了 Universal Editor 的編寫體驗。

TIP
如需 Universal Editor 的更詳細介紹,請參閱 Universal Editor 簡介文件。

準備應用程式 prepare-app

為了使用 Universal Editor 編寫應用程式的內容,應用程式必須由開發人員進行檢測以支援編輯器。

TIP
請參閱 AEM 中 Universal Editor 快速入門,了解設定 AEM 應用程式以使用 Universal Editor 的範例。

存取通用編輯器 accessing

一旦將應用程式檢測為可使用通用編輯器後,您便可在AEM as a Cloud Service記憶體取通用編輯器,且無需存取AEM即可直接存取。

在AEM as a Cloud Service中存取 accessing-aem

  1. 登入您的AEM as a Cloud Service編寫執行個體。
  2. 使用​Sites ​主控台瀏覽至與您要編輯的通用編輯器一起使用的頁面。
  3. 編輯頁面。
  4. 「通用編輯器」會開啟以編輯所選頁面。
NOTE
在​網站 ​主控台中編輯頁面時,主控台將開啟適合頁面範本:的編輯器,可以是本檔案中說明的通用編輯器,或頁面編輯器。

直接存取 accessing-directly

  1. 登入通用編輯器。 您需要Adobe ID才能登入,才能存取通用編輯器。

  2. 登入後,請在位置列中輸入您要編輯的頁面 URL。這樣一來,您就可以開始編輯內容,例如文字內容媒體內容

了解 UI ui

UI分為以下幾個主要區域。

Universal Editor UI

Experience Cloud 標頭 experience-cloud-header

Experience Cloud 標頭會始終顯示在畫面頂端。這是一個錨點,說明您在 Experience Cloud 中的位置,並幫助您導覽到其他 Experience Cloud 應用程式。

Experience Cloud 標頭

Experience Manager experience-manager

選取標頭左側的 Adobe Experience Cloud 連結,導覽至 Experience Manager 解決方案的根目錄,以存取 Cloud ManagerCloud Acceleration ManagerSoftware Distribution 等工具。

全域導覽按鈕

組織 organization

這將顯示您目前登入的組織。如果您的Adobe ID與多個組織相關聯,請選取以切換至其他組織。

組織指示器

解決方案 solutions

點選或按一下解決方案切換器可讓您快速跳轉到其他 Experience Cloud 解決方案。

解決方案切換器

說明 help

說明圖示可快速存取學習和支援資源。

說明

通知 notifications

此圖示會標有目前已指派之未完成的通知數量。

通知

使用者屬性 user-properties

選取代表您使用者的圖示以存取您的使用者設定。如果您沒有設定使用者圖片,則會隨機分配圖示。

使用者屬性

通用編輯器工具列 universal-editor-toolbar

Universal Editor工具列一律出現在熒幕頂端Experience Cloud標頭正下方。它可讓您快速存取,以導覽到另一個頁面進行編輯和發佈目前的頁面。

通用編輯器工具列

首頁按鈕 home-button

首頁按鈕可帶您回到通用編輯器的起始頁

漢堡選單

在開始頁面上,您可以輸入要用通用編輯器編輯的網站URL。

起始頁

NOTE
您要使用通用編輯器編輯的任何頁面都必須進行檢測以支援通用編輯器。

位置列 location-bar

位置列會顯示您正在編輯頁面的網址。選取「 」即可輸入其他頁面要編輯的位址。

位置列

TIP
使用快速鍵 L 打開網址列。
NOTE
您要使用通用編輯器編輯的任何頁面都必須進行檢測以支援通用編輯器。

驗證標題設定 authentication-settings

如果您需要設定本機開發目的的自訂驗證標頭,請選取驗證標頭設定圖示。

驗證標題設定按鈕

模擬器設定 emulator

選取模擬圖示以定義Universal Editor呈現頁面的方式。

模擬器圖示

點選或按一下模擬圖示即可顯示選項。

模擬選項

依預設,編輯器會在案頭版面配置中開啟,其中高度和寬度會由瀏覽器自動定義。

您也可以選擇在 Universal Editor 中模擬行動裝置:

  • 定義其方向
  • 定義寬度和高度
  • 變更方向

預覽模式 preview-mode

在預覽模式下,在編輯器中呈現的頁面就是發佈服務所顯示的樣子。這可讓內容作者按一下連結等方式來導覽內容。

預覽模式

TIP
使用快速鍵P切換至預覽模式,或切換自預覽模式。

開啟應用程式預覽 open-app-preview

選取開啟應用程式預覽圖示,即可使用自己的瀏覽器標籤開啟您目前正在編輯的頁面,無須使用編輯器即可預覽您的內容。

開啟應用程式預覽

TIP
使用快速鍵 O(字母 O) 可開啟應用程式預覽。

發佈 publish

選取「發佈」按鈕,讓您可以發佈內容的變更供讀者即時使用。

發佈按鈕

TIP
請參閱檔案使用通用編輯器發佈內容,以取得使用通用編輯器發佈的詳細資訊。

編輯器 editor

編輯器會佔據大部分視窗,而且是位置列中指定之頁面的呈現位置。

編輯器

如果編輯器在預覽模式,內容即為可瀏覽,而且您可以點選連結,但無法編輯內容。

屬性邊欄 properties-rail

屬性邊欄一律會沿著編輯器的右側顯示。 視其模式而定,可能會顯示在內容或頁面內容之階層中選取的元件詳細資訊。

屬性邊欄

屬性模式 properties-mode

在屬性模式下,邊欄會顯示編輯器中目前選取的元件屬性。這是載入頁面時屬性邊欄的預設模式。

屬性模式

依您所選取的元件類型而定,可在屬性邊欄中顯示和修改詳細資料。

元件詳細資料

並非所有元件都有可顯示及/或編輯的詳細資料。

TIP
使用快速鍵 D 可切換至屬性模式。

內容樹模式 content-tree-mode

在內容樹模式下,邊欄會顯示頁面內容的階層。

內容樹模式

在內容樹中選取一個項目時,編輯器會捲動到該內容並予以選取。

內容樹

TIP
使用快速鍵 F 可切換至內容樹模式。
編輯 edit

編輯時,所選元件的選項會顯示在屬性邊欄中,您可在此編輯所選元件。 如果選取的元件是內容片段,您也可以選取「編輯」按鈕。

「編輯」圖示

點選或按一下編輯按鈕將在新的索引標籤中開啟內容片段編輯器。這可讓您使用內容片段編輯器的全部功能來編輯關聯的內容片段。

根據工作流程的需求,您可能會想要在通用編輯器中或直接在內容片段編輯器中編輯內容片段。

TIP
使用快速鍵 E 可編輯選取的元件。
新增 add

如果您在內容樹狀結構或編輯器中選取容器元件,「屬性」邊欄會出現「新增」選項。

「新增」圖示

點選或按一下「新增」按鈕即會開啟元件的下拉選單,可用於新增到選取的容器。

新增內容功能表

TIP
使用快速鍵A將元件新增到選取的容器元件中。
刪除 delete

如果在內容樹狀結構或編輯器中選取容器元件內的元件,屬性邊欄會顯示刪除選項。

「刪除」圖示

點選或按一下刪除按鈕刪除該元件。

TIP
使用快速鍵Shift+Backspace從容器中刪除選取的元件。

編輯內容 editing-content

編輯內容很簡單又直覺。當您將滑鼠移至編輯器中的內容時,可編輯的內容會以藍色方塊醒目提示。

可編輯的內容會以藍色框醒目顯示

TIP
依預設,點選或按一下內容會選取內容以進行編輯。 如果您想透過下列連結導覽內容,請切換至預覽模式。

根據您選取的內容,您可能有不同的就地編輯選項,而且您可能會在屬性邊欄中針對內容提供額外的資訊和選項。

編輯純文字 edit-plain-text

您可以按兩下或點兩下元件,就地編輯文字。

編輯內容

按下Enter/Return或在文字方塊外選取,以儲存變更。

當您選取選取文字元件時,其詳細資訊會顯示在「屬性」邊欄中。 您也可以在邊欄中編輯文字。

正在編輯屬性邊欄中的文字

此外,屬性邊欄中也提供您文字的詳細資料。 一旦焦點離開屬性邊欄中已編輯的欄位,變更就會自動儲存。

編輯 RTF 文字 edit-rich-text

您可以按兩下或點兩下元件,就地編輯文字。

編輯 RTF 文字元件

為方便起見,您可在兩個位置找到文字的格式選項和詳細資訊。

  • 內容功能表 ​會在RTF區塊上方開啟,並在內容中提供基本的格式選項。 由於空間限制,某些選項可能會隱藏在省略符號按鈕後面。
  • 屬性邊欄 ​會顯示所有可用的格式選項以及文字。

一旦焦點離開已編輯的欄位,變更會自動儲存。

編輯媒體 edit-media

您可以在屬性邊欄中檢視其詳細資訊。

編輯媒體

  1. 在屬性邊欄中,點選或按一下所選影像的預覽。
  2. 資產選擇器視窗會開啟,讓您可選取資產。
  3. 選取「 」以選取新資產。
  4. 選取​ 選取 ​以返回取代資產的屬性邊欄。

變更會自動儲存到您的內容中。

編輯內容片段 edit-content-fragment

如果您選取內容片段,,您可以在屬性邊欄中編輯其詳細資料。

編輯內容片段

在選定內容片段的內容模型中定義的欄位會在屬性邊欄中顯示和編輯。

如果您選取與內容片段相關的欄位,則內容片段會載入到元件邊欄中,且會自動捲動到該欄位。

一旦焦點離開屬性邊欄中已編輯的欄位,變更就會自動儲存。

如果您想改在內容片段編輯器中編輯您的內容片段,請按一下模式邊欄中的編輯按鈕

根據工作流程的需求,您可能會想要在通用編輯器中或直接在內容片段編輯器中編輯內容片段。

新增元件到容器中 adding-components

  1. 在內容樹或編輯器中選取容器元件。

  2. 接著,在屬性邊欄中選取新增圖示。

    選取要新增到容器的元件

該元件會被插入到容器中並可在編輯器中對其進行編輯。

TIP
使用快速鍵 A 將元件新增到選取的容器中。

從容器中刪除元件 deleting-components

  1. 在內容樹或編輯器中選取容器元件。

  2. 選取容器的>形箭號圖示,展開內容樹狀結構中的內容。

  3. 然後,在內容樹中,選取容器內的元件。

  4. 在屬性邊欄中選取刪除圖示。

    刪除元件

選取的元件已刪除。

TIP
使用快速鍵 Shift+Backspace 從容器中刪除選取的元件。

將容器中的元件重新排序 reordering-components

  1. 在內容樹或編輯器中選取容器元件。

  2. 如果尚未變成內容樹模式,切換至該模式。

  3. 選取容器的>形箭號圖示,展開內容樹狀結構中的內容。

  4. 拖曳容器內的元件旁的手柄圖示證明您可以將它們重新排序。拖曳元件,在容器內將它們重新排序。

    重新排序元件

  5. 被拖曳的元件在元件樹中會變成灰色,而您的插入點則會以藍線表示。將元件鬆開並放在新位置中。

元件在內容樹和編輯器中都會重新排序

預覽內容 previewing-content

內容編輯完成後,您通常會希望瀏覽其內容,以查看它在其他頁面內容中的樣子。在預覽模式中,您可以點選連結,像讀者一樣瀏覽您的內容。內容在編輯器中呈現的樣子就是將會發佈的樣子。

在預覽模式中,點選或按一下內容的反應就像對內容的讀者一樣。 若要選取要編輯的內容,請切換出預覽模式。

其他資源 additional-resources

若要瞭解如何使用通用編輯器發佈內容,請參閱本檔案。

若要深入瞭解通用編輯器的技術細節,請參閱這些開發人員檔案。

  • Universal Editor 簡介 - 了解 Universal Editor 如何在任意實作中編輯任何方面的內容,以便提供卓越的體驗、提高內容速度並提供最先進的開發人員體驗。
  • AEM 中 Universal Editor 快速入門 - 了解如何存取 Universal Editor,以及如何開始檢測您的第一個 AEM 應用程式以使用它。
  • Universal Editor 架構 - 了解 Universal Editor 的架構,以及資料如何在其服務和階層之間流動。
  • 屬性和類型 - 了解 Universal Editor 需要的資料屬性和類型。
  • Universal Editor 驗證 - 了解 Universal Editor 如何進行驗證。
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab