配置富格文本編輯器

富格文本編輯器(RTE)為作者提供了多種編輯其文本內容的功能。 提供圖示、選擇方塊、工具列和選單,以提供WYSIWYG文字編輯體驗。

要瞭解如何使用RTE功能進行編寫,請參閱使用富格文本編輯器進行編寫。 RTE可以配置為啟用、禁用和擴展編寫元件中可用的功能。 以下工作流程說明在Experience Manager中完成RTE配置任務的建議順序。

配置Rich Text Editor的典型工作流程

圖:配置Rich Text Editor的典型工作流程

瞭解可觸控的UI和Classic UI

Touch-enabled UI是AEM的標準UI。 Adobe在5.6版中針對製作環境推出具互動式設計的Touch UI。Touch UI是專為觸控和桌上型裝置所設計。 UI與原始的傳統UI有很大不同。

啟用觸控的UI中的豐富型文字編輯器工具列

圖:啟用觸控的UI中的豐富型文字編輯器工具列

Classic UI中的Rich Text Editor工具列

圖:Classic UI中的Rich Text Editor工具列

編輯的各種模式

作者可以使用不同的元件模式,在AEM中建立和編輯文字內容。 用於編寫和格式化內容的工具欄選項,以及在不同編輯模式下啟用RTE的元件的用戶體驗,會根據RTE配置而有所不同。

編輯模式 編輯區域 建議啟用的功能 觸控式 UI 傳統 UI
內嵌 就地編輯,以快速進行小幅編輯;格式,不開啟對話方塊 最低RTE功能 Y Y
RTE全螢幕 涵蓋整個頁面 所有必要的RTE功能 Y N
對話方塊 對話框,但不涵蓋整個頁面 Classic UI中所有必需的RTE功能;審慎地啟用Touch UI中的功能 Y Y
全螢幕對話方塊 與全螢幕模式相同;包含RTE旁邊對話框的欄位 所有必要的RTE功能 Y N
注意

在啟用觸控的UI中,內嵌編輯模式中無法使用來源編輯功能。 您無法以全螢幕模式拖曳影像。 所有其他功能都適用於所有模式。

內嵌編輯

開啟時(點選/按一下速度緩慢),您可在頁面內編輯內容。 給出了一種具有基本選項的緊湊型工具欄。

使用觸控式UI中的基本工具列進行內嵌編輯

圖:使用觸控式UI中的基本工具列進行內嵌編輯

在Classic UI中,按兩下元件時速度緩慢,可進行內嵌編輯,而橘色的外框會反白顯示內容。 如果Content Finder已開啟,則窗口頂部將顯示一個帶有可用RTE格式設定選項的工具欄。 如果未開啟「內容搜尋器」,則不會顯示格式選項,您只能進行基本文字編輯。

全螢幕編輯

AEM元件可在全螢幕檢視中開啟,隱藏頁面內容並佔據可用螢幕。 請考慮使用全螢幕編輯功能來編輯內嵌編輯的詳細版本,因為它提供最多的編輯選項。 使用內嵌編輯模式時,可從精簡工具列按一下rte_fullscreen以開啟它。

對話框全屏模式提供了詳細的RTE工具欄,以及對話框模式中可用的選項和元件。 它僅適用於包含RTE和其他元件的對話框。

在啟用觸摸屏的UI中以全屏模式編輯時的詳細RTE工具欄

圖:在啟用觸摸屏的UI中以全屏模式編輯時的詳細RTE工具欄

對話框編輯

在Classic UI中按兩下元件時,會開啟對話方塊以編輯內容。 對話框在現有頁面的頂部開啟。 在某些特定情況下,對話方塊會以快顯視窗的形式開啟。 例如,當「文字」元件是多欄頁面版面中欄的一部分,而對話方塊的可用區域較少時。

啟用觸控的UI中的對話編輯模式

圖:啟用觸控的UI中的對話編輯模式

Classic UI中包含編輯詳細工具列的對話框

圖:Classic UI中包含編輯詳細工具列的對話框

關於RTE插件和相關功能

此功能可透過一系列外掛程式提供,每個外掛程式都包含:

  • features屬性:

    • 用於啟用或停用該外掛程式的基本功能。
    • 可使用標準化程式進行設定。
  • 在適當的情況下,需要特殊配置的更多屬性和選項。

RTE的基本功能由相應插件專用節點上的features屬性值激活或停用。

下表列出目前的外掛程式,其中顯示:

  • 具有API檔案連結的外掛程式ID。 當啟用外掛程式時,ID會用作節點名稱。
  • features屬性的允許值。
  • 外掛程式提供的功能說明。
外掛程式ID 功能 說明
編輯 剪下複製貼上——預設貼上-plaintext paste-wordhtml 剪下、複製和三種貼上模式
findreplace 尋找取代 尋找和取代。
格式 粗斜體下划線 基本文字格式
影像 影像 基本影像支援(從內容或內容搜尋器拖曳)。 根據瀏覽器,支援對作者有不同的行為
要定義此值,請參閱標籤大小
證明 justifleft justifcenter justifyright 段落對齊。
連結 modifylink unlink andlock 超連結和錨點
清單 有序無序縮進 此外掛程式同時控制縮排和清單;包括巢狀清單。
misctools specialchars sourceedit 其他工具可讓作者輸入特殊字元或編輯HTML來源。 此外,如果要定義自己的清單,還可以添加整個範圍的特殊字元
Paraformat paraformat 預設段落格式為段落、標題1、標題2和標題3(<p><h1><h2><h3>)。 您可以新增更多段落格式或擴充清單。
拼字檢查 checktext 語言感應拼字檢查程式
樣式 樣式 支援使用CSS類別的樣式。 如果您想要 新增(或擴充)您自己的樣式範圍,以搭配文字使用,請新增文字樣式。
上標 下標上標 基本格式的擴充功能,新增子和超指令碼。
表removetable insertrow removerow insertcolumn removecolumn cellprops mergecells splitcell selectrow selectcolumns 如果要為整個表格或個別儲存格新增自己的樣式,請參閱設定表格樣式
復原 撤消重做 還原和重做操作的歷史大小。🔗
注意

全螢幕外掛程式在對話模式中不受支援。 使用dialogFullScreen設定,將工具列設定為全螢幕模式。

瞭解配置路徑和位置

激活RTE插件時,您為作者提供的 RTE編輯模式(和UI)確定配置詳細資訊的位置:

編輯模式 Touch UI的位置 Classic UI的位置
內嵌 cq:editConfig/cq:inplaceEditing cq:editConfig/cq:inplaceEditing
全螢幕 cq:editConfig/cq:inplaceEditing 不適用
對話方塊 cq:dialog dialog
全螢幕對話方塊 cq:dialog 不適用
注意

請勿將cq:inplaceEditing下的節點命名為config。 在cq:inplaceEditing節點上,定義以下屬性:

  • 名稱: configPath
  • 類型: String
  • :包含實際配置的節點的路徑

不要將RTE配置節點命名為config。 否則,RTE配置只對管理員有效,對組content-author中的用戶無效。

僅在Touch UI的「對話」編輯模式中設定下列適用的屬性:

  • useFixedInlineToolbar:將在RTE節點上定義的此Boolean屬性(一個帶有sling:resourceType= cq/gui/components/authoring/dialog/richtext)設定為 True,使RTE工具欄固定而非浮動。

    如果此屬性為true,則Richtext編輯預設會從"foundation-contentloaded"事件開始。

    要防止這種情況,請將屬性customStart設定為True並觸發'rte-start'事件以啟動RTE編輯。 當此屬性為'true'時,預設行為(點按時啟動rte)將無法運作。

  • customStart:將在RTE節點上定義的此布爾屬性設定為 True,以通過觸發事件控制啟動RTE的時間 rte-start

  • rte-start:在開始編輯RTE contenteditable-div 時觸發此事件。僅當customStart已設為true時,此選項才有效。

在啟用觸控的對話框中使用RTE時,必須將屬性useFixedInlineToolbar設為true才能避免問題。

就地自訂編輯

您可以設定下列屬性,以定義文字編輯器在哪個HTML選擇器上啟動:

  • editElementQuery -定義於 cq:InplaceEditingConfig,此屬性用於指定HTML元素的選擇器,在該選擇器上將啟動文本元件的內嵌編輯。如果未指定,內嵌編輯會直接在文字元件HTML上啟動。
  • textPropertyName -定義於 cq:InplaceEditingConfig中,此屬性用於指定將保存在內容節點上的屬性名稱,文本元件的HTML值將在內嵌編輯後保存在該節點上。

對話框模式的相應屬性為name

通過激活插件啟用RTE功能

RTE功能可透過一系列外掛程式提供,每個外掛程式都包含features屬性。 您可以設定features屬性,以啟用或停用每個外掛程式的各種功能。

有關RTE插件的詳細配置,請參見如何激活和配置RTE插件

下載此示例配置以瞭解如何配置RTE。 在此套件中,所有功能都已啟用。

取得檔案

注意

核心元件文字元件可讓範本編輯器將使用者介面中的許多RTE外掛程式設定為內容原則,以免進行技術設定。 內容策略可以如所述與RTE用戶介面配置配合使用。 如需詳細資訊,請參閱RTE使用者介面設定和內容政策建立頁面範本核心元件開發人員檔案

注意

為方便參考,您可在以下網址找到預設文字元件(作為標準安裝的一部分提供):

  • /libs/wcm/foundation/components/text
  • /libs/foundation/components/text

若要建立您自己的文字元件,請複製上述元件,而非編輯這些元件。

配置RTE工具欄

AEM可讓您針對不同的編輯模式,以不同的方式為RichText Editor設定UI。 預設設定如下。 您可以根據需求覆寫這些預設值。

為獲得最佳的製作體驗:

  • 在浮動對話方塊中,只啟用那些沒有快顯視窗的外掛程式,因為浮動對話方塊的大小較小。
  • 在全螢幕對話方塊中,啟用所有必要的外掛程式,甚至是具有較大快顯視窗的外掛程式,例如Paste外掛程式。 請使用下述的dialogFullScreen配置。
<uiSettings jcr:primaryType="nt:unstructured">
  <cui jcr:primaryType="nt:unstructured">
    <inline
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,#justify,#lists,links#modifylink,links#unlink,#paraformat]">
      <popovers jcr:primaryType="nt:unstructured">
        <justify
          jcr:primaryType="nt:unstructured"
          items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
          ref="justify"/>
        <lists
          jcr:primaryType="nt:unstructured"
          items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
          ref="lists"/>
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </inline>
    <dialogFullScreen
      jcr:primaryType="nt:unstructured"
      toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
      <popovers jcr:primaryType="nt:unstructured">
        <paraformat
          jcr:primaryType="nt:unstructured"
          items="paraformat:getFormats:paraformat-pulldown"
          ref="paraformat"/>
      </popovers>
    </dialogFullScreen>
    <tableEditOptions
      jcr:primaryType="nt:unstructured"
      toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing,-]">
    </tableEditOptions>
  </cui>
</uiSettings>

內嵌模式和全螢幕模式會使用不同的UI設定。 工具列屬性用於指定工具列的按鈕。 例如,如果按鈕本身是功能(例如Bold),則會指定為PluginName#FeatureName(例如links#modifylink)。 如果按鈕是快顯視窗(包含外掛程式的某些功能),則會指定為#PluginName(例如#format)。 分隔符( |)。

內嵌或全螢幕模式下的快顯節點包含使用的快顯器清單。 popovers節點下的每個子節點都以插件命名(例如format)。 它有一個items屬性,包含插件的功能清單(例如format#bold)。

RTE用戶介面設定和內容策略

管理員可以使用內容策略來控制RTE選項,例如,而不是按照上述說明進行配置。 內容原則可定義元件在作為可編輯範本的一部分時的設計屬性。 例如,如果使用RTE的文本元件與可編輯的模板一起使用,內容策略可以定義粗體選項可用,而有一些段落格式選項可用。 內容原則可重複使用,並可套用至多個範本。

AEM 6.4 Service Pack 3之後,RTE中的可用選項會從使用者介面組態流向內容原則。

  • 用戶介面配置設定定義哪些選項可用於內容策略。
  • 如果RTE的用戶介面配置已刪除或未啟用項目,則內容策略無法對其進行配置。
  • 作者只能存取使用者介面組態和內容原則所提供的功能。

例如,您可以看到Text Core Component檔案

自定義工具欄表徵圖和命令之間的映射

您可以自定義RTE工具欄上顯示的珊瑚表徵圖和可用命令之間的映射。 除了珊瑚圖示以外,您無法使用其他任何圖示。

  1. uiSettings/cui下建立名為icons的節點。

  2. 為下方的個別圖示建立節點。

  3. 在每個個別圖示節點上,指定Coral圖示和對應至圖示的命令。

下面是將命令Bold映射到名為textItalic的Coral表徵圖的示例代碼片段。

<text jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" name="./text" useFixedInlineToolbar="{Boolean}true"> 
    <rtePlugins jcr:primaryType="nt:unstructured"> 
        <format jcr:primaryType="nt:unstructured" features="bold,italic"/> 
    </rtePlugins> 
    <uiSettings jcr:primaryType="nt:unstructured"> 
        <cui jcr:primaryType="nt:unstructured"> 
            <inline jcr:primaryType="nt:unstructured" 
                toolbar="[format#bold,format#italic,format#underline,links#modifylink,links#unlink]"> 
            </inline> 
            <icons jcr:primaryType="nt:unstructured"> 
                <bold jcr:primaryType="nt:unstructured" 
                    command="format#bold" 
                    icon="textItalic"/> 
            </icons> 
        </cui> 
    </uiSettings> 
</text>

切換至CoralUI 2 Rich Text Editor

在頁面上,您可以包含CoralUI 2 RTE clientlib或CoralUI 3 RTE clientlib。 依預設,Rich Text Editor會包含CoralUI 3 RTE clientlib。 要切換到CoralUI 2 RTE,請執行以下步驟。

注意

Adobe不建議將切換作為最佳實務。 切換至CoralUI 2 RTE做為最後選擇。 如果外掛程式不依賴RTE內部檔案(例如類別),CoralUI 2 RTE的自訂外掛程式可與CoralUI 3 RTE搭配使用。 如果您使用CoralUI 3 RTE的自訂外掛程式,請使用rte.coralui3程式庫。

  1. 覆蓋/apps下的節點/libs/cq/gui/components/authoring/editors/clientlibs/core,並執行下列操作:

    • rte.coralui3替換為rte.coralui2作為從屬關係屬性。
    • cq.authoring.editor.core.inlineediting.rte.coralui3取代為cq.authoring.editor.core.inlineediting.rte.coralui2做為embed屬性。
    • cq.authoring.rte.coralui3取代為cq.authoring.rte.coralui2做為embed屬性。
  2. /apps下覆蓋/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2節點。

    /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3移除類別cq.authoring.dialog,並將其新增至/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2

  3. 將頁面上包含的任何其他相依性從rte.coralui3變更為rte.coralui2。 例如,在/apps下覆蓋節點/libs/mcm/campaign/components/touch-ui/clientlibs/rte後,將對節點的依賴從rte.coralui3更改為rte.coralui2

  4. /apps下覆蓋節點cq/ui/widgets。 將節點/apps/cq/ui/widgets上的相關性cq.rte替換為cq.coralui2.rte

注意

CoralUI 2 RTE使用手把範本建立外掛程式對話方塊。 因此,CoralUI 2 RTE clientlib對handlebar clientlib有依賴性。 CoralUI 3 RTE不使用手把範本,也沒有任何相關的依存關係。 如果您的自訂增效模組使用手把範本,請在您的網頁中加入手把clientlib。

更多資訊

如需設定RTE的詳細資訊,請參閱AEM Widget API參考。

尤其是,若要查看可用的增效模組和相關選項:

  • CQ.form.RichText元件提供表單欄位,以編輯樣式化文字資訊(rich text)。 要瞭解富格文本表單的所有可用參數,請參閱配置選項。

  • RichText元件使用列在CQ.form.rte.plugins.Plugin下方的外掛程式,提供多種功能。 針對每個外掛程式:

    • 如需可啟用(或停用)功能的詳細資訊,請參閱功能。
    • 如需適當外掛程式的詳細設定,請參閱所有可用參數的設定選項。
  • 也提供連結的HTML規則相關詳細資訊。

上述選項可用於擴展和自定義您自己的RTE。 例如,若要在建立連結時列出頁面中可用的定位點,您可以提供您自己的LinkPlugin實作。

已知限制

AEM RTE功能有下列限制:

  • RTE功能僅在AEM元件對話方塊中受支援。 RTE不支援精靈或基礎表單,例如啟用觸控的UI上的「頁面屬性」(Page Properties)和「支架(Stable)」()。

  • AEM無法在Hybrid devices上運作。

  • 不要為RTE配置節點命名config。 否則,RTE配置只對管理員有效,對組content-author中的用戶無效。

  • RTE不支援內嵌影格或iframe以內嵌內容。

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now