配置RTF編輯器

RTF編輯器(RTE)為作者提供多種編輯文字內容的功能。 WYSIWYG文字編輯體驗提供圖示、選取方塊、工具列和功能表。 管理員設定RTE以啟用、停用和擴充製作元件中可用的功能。 請參閱作者如何使用RTE來編寫網頁內容。

以下列出設定RTE的必要概念和步驟。

了解可供作者使用的使用者介面

RTE介面提供用於製作環境的回應式設計。 此介面專為在觸控式和桌上型電腦上使用而設計。

圖：RTF編輯器工具列，並啟用所有可用選項。

工具列提供WYSIWYG製作體驗的選項。 Experience Manager 管理員可以配置介面工具欄中的可用選項。預設在Experience Manager中提供一組完整的編輯選項。 開發人員可自訂Experience Manager以新增更多編輯選項。

各種編輯模式

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

內嵌編輯

若要編輯頁面內的內容，請以慢速連按兩下來開啟內容。 提供包含基本選項的緊湊型工具列。

圖：內嵌編輯與工具列中的基本選項。

全螢幕編輯

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

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

圖：以全螢幕模式編輯時的詳細RTE工具列。

對話框編輯

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

圖：對話框編輯模式。

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

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

• features屬性，即

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

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

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

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

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

了解配置路徑和位置

RTE編輯模式以及您為作者提供的介面決定在啟用RTE外掛程式時組態詳細資訊的位置。 位置包括：

• 內嵌模式：cq:editConfig/cq:inplaceEditing。
• 全螢幕模式：cq:editConfig/cq:inplaceEditing。
• 對話框模式：cq:dialog。
• 全螢幕對話框模式：cq:dialog。

配置在「對話框」編輯模式下應用的以下屬性：

• useFixedInlineToolbar:您可以讓RTE工具列固定，而非浮動。將RTE節點上定義的此Boolean屬性設定為True，並使用sling:resourceType= cq/gui/components/authoring/dialog/richtext。 此屬性設為True時，將在foundation-contentloaded事件上啟動RTF編輯。 要防止此情況，請將屬性customStart設定為True並觸發rte-start事件以開始RTE編輯。 當此屬性為true時，RTE不會在點按時啟動，這是預設行為。

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

• rte-start:開始編輯RTE contenteditable-div 時在RTE上觸發此事件。只有在customStart已設為true時，它才有效。

在觸控式對話方塊中使用RTE時，請將屬性useFixedInlineToolbar設為true以避免發生問題。

啟用外掛程式以啟用RTE功能

可透過一系列外掛程式使用RTE功能，每個外掛程式都具有features屬性。 您可以配置features屬性，以啟用或停用每個外掛程式的各種功能。

如需RTE外掛程式的詳細設定，請參閱如何啟用和設定RTE外掛程式。

核心元件文字元件可讓範本編輯器以使用者介面作為內容原則來設定許多RTE外掛程式，而不需要進行技術設定。 內容原則可搭配RTE UI設定使用，如本檔案所述。 如需詳細資訊，請參閱建立頁面範本和核心元件開發人員檔案。

如需參考，可在以下網址找到預設的文字元件（在標準安裝中提供）:

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

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

配置RTE工具欄

Experience Manager 可讓您針對不同的編輯模式，以不同方式設定RTF編輯器的介面。預設設定如下。 您可以根據需求改寫這些預設值。 您只可自訂要提供給作者的工具列功能。 您不需要指定所有工具列組態。

要配置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,justify#justifyjustify]"
          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,justify#justifyjustify,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>

內嵌模式和全螢幕模式使用不同的使用者介面設定。 工具欄屬性指定工具欄的選項。

例如，如果選項本身是特徵（例如Bold），則它指定為PluginName#FeatureName（例如links#modifylink）。

如果選項是彈出窗口（包含插件的某些功能），則它指定為#PluginName（例如#format）。

一組選項之間的分隔符號(|)可以使用-指定。

內嵌或全螢幕模式下的快顯節點包含所使用快顯視窗的清單。 popovers節點下的每個子節點都以外掛程式的名稱命名（例如，格式）。 其屬性為「項目」，包含外掛程式的功能清單（例如format#bold）。

RTE使用者介面設定和內容原則

管理員可以使用內容原則來控制RTE選項，例如，不必如上所述執行設定。 內容策略在作為可編輯模板的一部分時定義元件的設計屬性。 例如，如果使用RTE的文本元件與可編輯的模板一起使用，則內容策略可以定義粗體選項可用，並可以定義幾個段落格式選項。 內容原則可重複使用，可套用至多個範本。

RTE中的可用選項從用戶介面配置流向內容策略。

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

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

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

您可以自訂RTE工具列上顯示的珊瑚圖示和可用命令之間的對應。 除了Coral圖示，您無法使用其他任何圖示。

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

2. 為其下的各個表徵圖建立節點。

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

以下是將命令Bold對應至名為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>

已知限制

Experience Manager RTE功能有下列限制：

• 只有Experience Manager元件對話方塊才支援RTE功能。 嚮導或Foundation-forms不支援RTE。

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

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

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

最佳作法與提示

• 對於浮動對話方塊，請僅啟用不含快顯對話方塊的外掛程式。 不含快顯視窗的外掛程式大小較小，最適合浮動式對話。
• 僅在全螢幕對話模式或全螢幕模式下，使用大型彈出式視窗（例如Paste外掛程式）啟用外掛程式。 具有大型快顯視窗的外掛程式需要更多螢幕空間，才能提供良好的製作體驗。
• 如果您使用CoralUI3 RTE的自訂外掛程式，請使用rte.coralui3資料庫。