設定RTF編輯器

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

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

了解RTE概念	啟用必要功能	設定個別功能
了解介面	了解並設定設定位置	設定外掛程式
編輯模式類型	啟用外掛程式	設定功能屬性
關於外掛程式	配置RTE工具欄	設定貼上模式

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

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

RTF編輯器工具列

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

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

各種編輯模式

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

編輯模式	編輯區域	要啟用的建議功能
內嵌	就地編輯，以快速、微幅編輯；格式，不開啟對話框。	最小RTE功能。
RTE全螢幕	涵蓋整個頁面。	所有必要的RTE功能。
對話方塊	對話方塊，但不涵蓋整個頁面。	審慎啟用功能。
全螢幕對話方塊	與全螢幕模式相同；包含與RTE一起的對話框欄位。	所有必要的RTE功能。

注意

在內聯編輯模式下，源編輯功能不可用。您無法以全螢幕模式拖曳影像。所有其他功能都可在所有模式中運作。

內嵌編輯

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

使用工具列中的基本選項進行內嵌編輯

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

全螢幕編輯

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

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

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

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

對話方塊編輯

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

對話方塊編輯模式

圖：對話框編輯模式。

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

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

A features 屬性，
- 用於啟用或停用該外掛程式的基本功能。
- 使用標準化程式進行配置。
需要專門配置的更多屬性和選項（如果適用）。

RTE的基本功能會由 features 屬性。

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

具有API檔案連結的外掛程式ID。當啟用外掛程式.
允許的值 features 屬性。
外掛程式所提供功能的說明。

外掛程式ID	功能	說明
編輯	`cut`, `copy`, `paste-default`, `paste-plaintext`, `paste-wordhtml`	剪下、複製和三種貼上模式.
芬德雷普萊斯	`find`, `replace`	查找和替換。
格式	`bold`, `italic`, `underline`	基本文字格式.
影像	`image`	基本影像支援（從內容或內容尋找器拖曳）。根據瀏覽器，支援對作者有不同的行為
鍵	-	若要定義此值，請參閱標籤大小.
證明	`justifyleft`, `justifycenter`, `justifyright`	段落對齊。
連結	`modifylink`, `unlink`, `anchor`	超連結和錨點.
清單	`ordered`, `unordered`, `indent`, `outdent`	此外掛程式可同時控制縮排和清單;包括巢狀清單。
miscools	`specialchars`, `sourceedit`	其他工具可讓作者輸入特殊字元或編輯HTML來源。此外，您可以新增特殊字元範圍如果您想定義自己的清單。
Paraformat	`paraformat`	預設段落格式為段落、標題1、標題2和標題3(`<p>`, `<h1>`, `<h2>`，和 `<h3>`)。您可以添加更多段落格式或擴充清單。
拼字檢查	`checktext`	語言感知拼寫檢查程式.
樣式	`styles`	支援使用CSS類別的樣式。新增文字樣式如果您想要新增（或擴充）您自己的樣式範圍以搭配文字使用。
上標	`subscript`, `superscript`	基本格式的擴充功能，新增子指令碼和超指令碼。
表格	`table`, `removetable`, `insertrow`, `removerow`, `insertcolumn`, `removecolumn`, `cellprops`, `mergecells`, `splitcell`, `selectrow`, `selectcolumns`	請參閱配置表格樣式為整個表格或個別儲存格新增您自己的樣式。
復原	`undo`, `redo`	歷史記錄大小還原和重做操作。

注意

對話方塊模式中不支援全螢幕外掛程式。使用 dialogFullScreen 設定，以設定全螢幕模式的工具列。

了解設定路徑和位置

此 RTE編輯模式與介面提供給作者的設定，會在您啟用RTE外掛程式. 位置包括：

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

注意

請勿將節點命名為 cq:inplaceEditing as config. 開啟 cq:inplaceEditing 節點，定義下列屬性：

名稱: configPath
類型: String
值:包含實際配置的節點的路徑

請勿將RTE設定節點命名為 config. 否則，RTE設定只對管理員有效，對群組中的使用者無效 content-author.

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

useFixedInlineToolbar:您可以讓RTE工具列固定，而非浮動。使用sling:resourceType=在RTE節點上定義的此布林屬性 cq/gui/components/authoring/dialog/richtext to True. 此屬性設為時 True，則在 foundation-contentloaded 事件。若要防止此情況，請設定屬性 customStart to True 並觸發 rte-start 開始RTE編輯的事件。此屬性為 true,RTE不會在點按時開始，而這是預設行為。
customStart:將RTE節點上定義的此布林屬性設定為 True，透過觸發事件來控制何時啟動RTE rte-start.
rte-start:在 contenteditable-div ，開始編輯RTE時。只有在 customStart 設為 true.

在觸控式對話方塊中使用RTE時，請設定屬性 useFixedInlineToolbar to 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圖示，您無法使用其他任何圖示。

建立名為的節點 icons 在 uiSettings/cui.
為其下的各個表徵圖建立節點。
在每個個別圖示節點上，指定一個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功能有下列限制：

RTE功能僅支援 Experience Manager 元件對話方塊。嚮導或Foundation-forms不支援RTE。
Experience Manager 在混合裝置上無法運作。
不要為RTE配置節點命名 config. 否則，RTE設定只對管理員有效，對群組中的使用者無效 content-author.
RTE不支援內嵌內容至內嵌框架或iframe。

最佳實務與秘訣

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

全新的改善搜尋

設定RTF編輯器

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

各種編輯模式

內嵌編輯

全螢幕編輯

對話方塊編輯

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

了解設定路徑和位置

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

配置RTE工具欄

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

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

已知限制

最佳實務與秘訣

Business.Adobe.com 資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe