設定RTF編輯器

RTF編輯器(RTE)為作者提供多種編輯文字內容的功能。 WYSIWYG文字編輯體驗提供圖示、選取方塊、工具列和功能表。

若要了解如何使用RTE功能進行製作，請參閱使用RTF編輯器進行製作。 RTE可以設定為啟用、停用和擴充製作元件中可用的功能。 以下工作流程說明在Experience Manager中完成RTE設定工作的建議順序。

圖：設定RTF編輯器的典型工作流程

了解觸控式UI和傳統UI

觸控式UI是AEM的標準UI。 Adobe在5.6版中推出觸控式UI，其中回應式設計適用於製作環境。觸控式UI專為觸控和桌上型裝置而設計。 UI與原始的傳統UI有很大不同。

圖：觸控式UI中的RTF編輯器工具列

圖：傳統UI中的RTF編輯器工具列

各種編輯模式

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

內嵌編輯

開啟時（按兩下/按一下速度緩慢），您可以在頁面內編輯內容。 提供包含基本選項的緊湊型工具列。

圖：在觸控式UI中與基本工具列內嵌編輯

在傳統UI中，按兩下元件時速度緩慢，可進行內嵌編輯，而橘色外框會醒目顯示內容。 如果「內容尋找器」已開啟，則視窗頂端會顯示包含可用RTE格式選項的工具列。 如果「內容尋找器」未開啟，則不會顯示格式選項，您只能編輯基本文字。

全螢幕編輯

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

對話框全螢幕模式提供了詳細的RTE工具欄，以及對話框模式中可用的選項和元件。 此變數僅適用於包含RTE與其他元件的對話方塊。

圖：在觸控式UI中以全螢幕模式編輯時，詳細的RTE工具列

對話方塊編輯

在傳統UI中按兩下元件時，會開啟一個對話方塊以編輯內容。 對話框將在現有頁面的頂部開啟。 在某些特定情況下，對話方塊會以快顯視窗的形式開啟。 例如，當文本元件是多列頁面佈局中列的一部分時，對話框的可用區域較小。

圖：在觸控式UI中編輯對話方塊模式

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

關於RTE外掛程式和相關功能

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

• features屬性：

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

• 需要專門配置的更多屬性和選項（如果適用）。

RTE的基本功能會由適當外掛程式特定節點上的features屬性值來啟動或停用。

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

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

了解設定路徑和位置

當您啟用RTE外掛程式時，您為作者提供的RTE編輯（和UI）模式會決定設定詳細資訊的位置：

請勿將RTE設定節點命名為config。 否則，RTE配置只對管理員有效，對組content-author中的用戶無效。

設定下列僅適用於觸控式UI中對話方塊編輯模式的屬性：

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

  此屬性為true時，RTF編輯預設會在「foundation-contentloaded」事件上啟動。

  要防止此情況，請將屬性customStart設定為True並觸發「rte-start」事件以開始RTE編輯。 當此屬性為「true」時，預設行為（點擊時開始的rte）無法運作。

• customStart:將RTE節點上定義的此布林屬性設 True定為，以透過觸發事件來控制何時啟動 rte-startRTE。

• rte-start:開始編輯RTE contenteditable-div 時在RTE上觸發此事件。只有在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可讓您針對不同的編輯模式，以不同方式設定RTF編輯器的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工具列上顯示的珊瑚圖示和可用命令之間的對應。 除了Coral圖示，您無法使用其他任何圖示。

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 RTF編輯器

在頁面上，您可以包含CoralUI 2 RTE clientlib或CoralUI 3 RTE clientlib。 依預設，RTF編輯器包含CoralUI 3 RTE clientlib。 若要切換至CoralUI 2 RTE，請執行下列步驟。

1. 在/apps下覆蓋節點/libs/cq/gui/components/authoring/editors/clientlibs/core，並執行下列操作：

   • 為dependencies屬性將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. 在/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元件提供用於編輯已設定樣式的文本資訊(RTF)的表單欄位。 若要了解RTF表單可用的所有參數，請參閱設定選項。

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

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

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

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

已知限制

AEM RTE功能有下列限制：

• 只有AEM元件對話方塊才支援RTE功能。 在觸控式UI上，精靈或基礎表單（例如頁面屬性和Stable）不支援RTE。

• AEM在混合裝置上無法運作。

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

• RTE不支援內嵌框架或iframe來內嵌內容。