Configure the Rich Text Editor

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

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

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

瞭解可觸控的UI和傳統UI

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

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

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

各種編輯模式

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

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

內嵌編輯

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

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

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

全螢幕編輯

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

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

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

對話框編輯

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

圖： 啟用觸控的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	如果 要為整個表格或個別儲存格新增自己的樣式，請參閱設定表格樣式。
復原	撤消重做	還原和重做 操作的歷史 大小。

瞭解配置路徑和位置

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

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

僅在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的用戶介面配置已刪除或未啟用項目，則內容策略無法對其進行配置。
• 作者只能存取使用者介面組態和內容原則所提供的功能。

例如，您可以看到「文字核 心元件」檔案。

自訂工具列圖示和指令之間的對應

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

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

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

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

以下是將命令Bold對應至名為的Coral圖示的范常式式碼片段 textItalic。

<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. 將節點覆 /libs/cq/gui/components/authoring/editors/clientlibs/core 蓋在 /apps下方，並執行下列動作：

   • 對於相 rte.coralui3 依性 rte.coralui2 屬性，請用替換。
   • 將 cq.authoring.editor.core.inlineediting.rte.coralui3 內嵌 cq.authoring.editor.core.inlineediting.rte.coralui2 屬性取代為。
   • 將 cq.authoring.rte.coralui3 內嵌 cq.authoring.rte.coralui2 屬性取代為。

2. 覆蓋節點 /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 和 /libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2 下方 /apps。

   將類別從 cq.authoring.dialog 中移 /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3 除並將其添加到 /apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2。

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

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

更多資訊

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

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

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

• RichText元件使用 CQ.form.rte.plugins.Plugins下所列的外掛程式，提供多種功能。 針對每個外掛程式：

  • 如需可啟用（或停用）功能的詳細資訊，請參閱功能。
  • 如需適當外掛程式的詳細設定，請參閱所有可用參數的設定選項。

• 也提供連結的HTML規則相關詳細資訊。

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

已知限制

AEM RTE功能有下列限制：

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

• AEM無法在 Hybrid裝置上運作。

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

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