設定RTF編輯器 configure-the-rich-text-editor

RTF編輯器(RTE)為作者提供了一系列廣泛的功能，以便編輯其文字內容。 提供圖示、選取方塊、工具列和選單，以提供WYSIWYG文字編輯體驗。

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

圖：瞭解如何設定RTE的步驟順序

瞭解觸控式UI和傳統UI understand-touch-enabled-ui-and-classic-ui

觸控式UI是Experience Manager的標準使用者介面。 Adobe針對製作環境推出觸控式UI搭配回應式設計。 觸控式UI專為觸控和桌上型裝置而設計。 此介面與原始傳統UI有很大差異。

觸控式使用者介面中的

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

傳統UI中的

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

各種編輯模式 editingmodes

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

內嵌編輯 inline-editing

開啟時（緩慢連按兩下）可在頁面中編輯內容。 將顯示包含非常基本選項的精簡工具列。

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

在傳統UI中，只要在元件上按兩下滑鼠，即可進行內嵌編輯，而橘色外框會反白顯示內容。 如果「內容尋找器」已開啟，視窗頂端會顯示具有可用RTE格式選項的工具列。 如果「內容尋找器」未開啟，則不會顯示格式選項，而且您只能編輯基本文字。

全熒幕編輯 full-screen-editing

Experience Manager元件可在全熒幕檢視中開啟，以隱藏頁面內容並佔用可用熒幕。 請考慮以全熒幕編輯內嵌編輯的詳細版本，因為其提供最豐富的編輯選項。 使用內嵌編輯模式時，可從壓縮工具列按一下 以開啟它。

在對話方塊全熒幕模式以及詳細的RTE工具列中，對話方塊中可用的選項和元件也可使用。 它僅適用於包含RTE以及其他元件的對話方塊。

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

對話方塊編輯 dialog-editing

當元件按兩下時，會開啟對話方塊以編輯內容。 對話方塊會在現有頁面上方開啟。 在某些特定情況下，對話方塊會以快顯視窗開啟。 例如，當文字元件屬於多欄頁面配置中的欄且可用於對話方塊的區域較少時。

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

圖：傳統UI中的對話方塊，其中包含編輯的詳細工具列

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

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

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

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

瞭解設定路徑和位置 understand-the-configuration-paths-and-locations

您提供給作者的RTE編輯模式（和UI）決定您啟動RTE外掛程式時組態詳細資料的位置：

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

當觸控式對話方塊中使用RTE時，必須將屬性useFixedInlineToolbar設定為true以避免問題。

自訂就地編輯 customizing-in-place-editing

您可以透過設定以下屬性來定義文字編輯器從哪個HTML選擇器開始：

對話方塊模式的對應屬性是name。

透過啟用外掛程式來啟用RTE功能 enable-rte-functionalities-by-activating-plug-ins

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

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

範例：下載此範例組態，其中說明如何設定RTE。 在此套件中會啟用所有功能。

設定RTE工具列 dialogfullscreen

AEM可讓您針對不同的編輯模式，以不同方式設定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>

內嵌模式和全熒幕模式會使用不同的UI設定。 toolbar屬性用於指定工具列的按鈕。

例如，如果按鈕本身是功能（例如，Bold），則會將其指定為PluginName#FeatureName （例如，links#modifylink）。

如果按鈕是彈出視窗（包含外掛程式的部分功能），則會將其指定為#PluginName （例如#format）。

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

內嵌或全熒幕模式下的快顯節點包含正在使用的彈出視窗清單。 「彈出視窗」節點下的每個子節點都會以外掛程式（例如格式）命名。 其屬性「items」包含外掛程式的功能清單（例如，format#bold）。

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

管理員可以使用內容原則來控制RTE選項，而不是如上所述進行設定。 當內容原則用作可編輯的範本的一部分時，會定義元件的設計屬性。 例如，如果使用RTE的文字元件搭配可編輯的範本使用，則內容原則可定義粗體選項為可用，而一些段落格式選項為可用。 內容原則可重複使用，並可套用至多個範本。

RTE中可用的選項會從使用者介面設定向下流向內容原則。

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

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

您可以自訂RTE工具列上顯示的Coral圖示與可用命令之間的對應。 除了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編輯器 switch-to-coralui-rich-text-editor

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

更多資訊 further-information

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

具體來說，若要檢視外掛程式和可用的相關選項：

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

已知限制 known-limitations

AEM RTE功能有下列限制：

最佳作法和秘訣 best-practices-and-tips

疑難排解RTE的常見問題 troubleshoot-issues-with-aem-rich-text-editor

如何選取多個資料表儲存格？

若要選取表格中的多個儲存格，請按Ctrl或Cmd鍵，然後逐一按一下表格儲存格。

現在對選取範圍執行操作，例如設定選取儲存格的屬性。

使用[設定]按鈕編輯元件時，超連結遺失

使用「設定」按鈕編輯文字元件，以新增超連結。 當您再次編輯超連結並再次驗證超連結時，可能會遺失超連結。

因應措施是在第二次顯示編輯對話方塊時按一下文字元件，然後執行連結驗證。

此問題已在AEM 6.3及更高版本中解決。

在來源編輯模式中新增的​ HTML內容遺失

請勿新增易發XSS的HTML。 AEM而非RTE可能會移除一些HTML內容，以遵守XSS防霧規則。

若要確認已貼上的HTML是否已儲存，請檢查CRXDE中已儲存的內容（在內容節點中）。

如果未儲存，則HTML必須已由RTE移除，因為它不符合RTE的規則。

如果儲存在CRXDE中但未在頁面上轉譯(若要檢查轉譯，請參閱頁面的預覽，則會被AEM XSS規則移除。

多欄位元件未如預期般運作

若要建立多欄位元件，請專門使用CoralUI 3。 請勿使用CoralUI 2元件對話方塊。

此外，請確認您的多欄位實作程式碼和節點結構正確無誤。

系統管理員可用的設定不適用於作者

如果介面組態更新反映在管理員而非作者帳戶中，請確定組態節點未命名為config。 使用configPath屬性。