配置富格文本編輯器

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

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

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

瞭解可觸控的UI和Classic UI

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

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

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

編輯的各種模式

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

內嵌編輯

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

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

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

全螢幕編輯

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

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

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

對話框編輯

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

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

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

關於RTE插件和相關功能

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

• features屬性：

  • 用於啟用或停用該外掛程式的基本功能。
  • 可使用標準化程式進行設定。

• 在適當的情況下，需要特殊配置的更多屬性和選項。

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

下表列出目前的外掛程式，其中顯示：

• 具有API檔案連結的外掛程式ID。 當啟用外掛程式時，ID會用作節點名稱。
• features屬性的允許值。
• 外掛程式提供的功能說明。

瞭解配置路徑和位置

在激活RTE插件時，您為作者提供的 RTE編輯模式（和UI）確定配置詳細資訊的位置：

僅在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工具欄

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，請執行以下步驟。

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。

更多資訊

如需設定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以內嵌內容。