配置富格文本編輯器

富格文本編輯器(RTE)為作者提供了多種編輯文本內容的功能。 提供圖示、選擇方塊、工具列和選單,以提供WYSIWYG文字編輯體驗。 管理員將RTE配置為啟用、禁用和擴展編寫元件中可用的功能。 瞭解作者如何使用RTE編寫🔗網頁內容。

下面列出了配置RTE的概念和所需步驟。

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

瞭解作者的可用使用者介面

RTE介面為編寫環境提供自適應設計。 此介面專為觸控和桌上型裝置所設計。

Rich Text Editor工具列

圖:Rich Text Editor工具列,並啟用所有可用選項。

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

編輯的各種模式

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

編輯模式 編輯區域 建議啟用的功能
內嵌 就地編輯,以快速進行小幅編輯;格式化,而不開啟對話方塊。 最低RTE功能。
RTE全螢幕 涵蓋整個頁面。 所有必需的RTE功能。
對話方塊 對話框,但不涵蓋整個頁面。 審慎啟用功能。
全螢幕對話方塊 與全螢幕模式相同;包含RTE旁邊對話框的欄位。 所有必需的RTE功能。
注意

在內嵌編輯模式中,原始碼編輯功能不可用。 您無法以全螢幕模式拖曳影像。 所有其他功能都適用於所有模式。

內嵌編輯

若要編輯頁面內的內容,請以慢速連按兩下的方式開啟內容。 給出了一種具有基本選項的緊湊型工具欄。

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

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

全螢幕編輯

Experience Manager 元件可以在全螢幕檢視中開啟,隱藏頁面內容並佔據可用螢幕。請考慮使用全螢幕編輯功能來編輯內嵌編輯的詳細版本,因為它提供最多的編輯選項。 在使用內嵌編輯模式時,可通過按一下表徵圖在精簡工具欄中開啟全屏RTE。

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

在全屏模式下編輯時的詳細RTE工具欄

圖:在全屏模式下編輯時的詳細RTE工具欄。

對話框編輯

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

對話框編輯模式

圖:對話框編輯模式。

關於RTE插件和相關功能

此功能可透過一系列外掛程式提供,每個外掛程式都包含:

  • features屬性,即

    • 用於啟用或停用該外掛程式的基本功能。
    • 使用標準化程式進行設定。
  • 在適當的情況下,需要特殊配置的更多屬性和選項。

RTE的基本功能由相應插件專用節點上的features屬性值激活或停用。

下表列出目前的外掛程式,其中顯示:

  • 具有API檔案連結的外掛程式ID。 當啟用外掛程式時,ID會用作節點名稱。
  • features屬性的允許值。
  • 外掛程式提供的功能說明。
外掛程式ID 功能 說明
編輯 cut, copy, paste-default, paste-plaintext, paste-wordhtml 剪下、複製和三種貼上模式
findreplace find, replace 尋找和取代。
格式 bold, italic underline 基本文字格式
影像 image 基本影像支援(從內容或內容搜尋器拖曳)。 根據瀏覽器,支援對作者有不同的行為
- 要定義此值,請參閱標籤大小
證明 justifyleft, justifycenter justifyright 段落對齊。
連結 modifylink, unlink anchor 超連結和錨點
清單 ordered, unordered, indent, outdent 此外掛程式同時控制縮排和清單;包括巢狀清單。
misctools specialcharssourceedit 其他工具可讓作者輸入特殊字元或編輯HTML來源。 此外,如果要定義自己的清單,還可以添加範圍的特殊字元
Paraformat paraformat 預設段落格式為段落、標題1、標題2和標題3(<p><h1><h2><h3>)。 您可以新增更多段落格式或擴充清單。
拼字檢查 checktext 語言感應拼字檢查程式
樣式 styles 支援使用CSS類別的樣式。 如果您想要 新增(或擴充)您自己的樣式範圍,以搭配文字使用,請新增文字樣式。
上標 subscriptsuperscript 基本格式的擴充功能,新增子指令碼和super指令碼。
table, removetable, insertrow, removerow, insertcolumn, removecolumn, cellprops mergecells splitcell selectrow, selectcolumns 請參閱設定表格樣式,為整個表格或個別儲存格新增您自己的樣式。
復原 undoredo 還原和重做操作的歷史大小。🔗
注意

全螢幕外掛程式在對話模式中不受支援。 使用dialogFullScreen設定,將工具列設定為全螢幕模式。

瞭解配置路徑和位置

激活RTE插件時,RTE編輯的模式和您為作者提供的介面決定了配置詳細資訊的位置。 位置包括:

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

請勿將cq:inplaceEditing下的節點命名為config。 在cq:inplaceEditing節點上,定義以下屬性:

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

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

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

  • useFixedInlineToolbar:您可以使RTE工具欄固定,而不是浮動。將在RTE節點上定義的此Boolean屬性(具有sling:resourceType= cq/gui/components/authoring/dialog/richtext)設定為True。 當此屬性設定為True時,將在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以避免問題。

通過激活插件啟用RTE功能

RTE功能可透過一系列外掛程式提供,每個外掛程式都包含features屬性。 您可以設定features屬性,以啟用或停用每個外掛程式的各種功能。

有關RTE插件的詳細配置,請參見如何激活和配置RTE插件

核心元件文字元件可讓範本編輯器使用使用者介面來設定許多RTE外掛程式,以免進行技術設定。 內容策略可以如本文所述使用RTE UI配置。 如需詳細資訊,請參閱建立頁面範本核心元件開發人員檔案

為方便參考,您可在以下網址找到預設文字元件(作為標準安裝的一部分提供):

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

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

配置RTE工具欄

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

要為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節點下的每個子節點都以插件(例如,格式)命名。 它有一個屬性'items',包含外掛程式的功能清單(例如format#bold)。

RTE用戶介面設定和內容策略

管理員可以使用內容策略來控制RTE選項,例如,而不是按照上述說明進行配置。 內容原則可定義元件在作為可編輯範本的一部分時的設計屬性。 例如,如果使用RTE的文本元件與可編輯的模板一起使用,內容策略可以定義粗體選項可用,而有一些段落格式選項可用。 內容原則可重複使用,並可套用至多個範本。

RTE中的可用選項從用戶介面配置到內容策略的下游。

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

例如,您可以看到Text Core Component檔案

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

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

  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>

已知限制

Experience Manager RTE功能有以下限制:

  • RTE功能僅在Experience Manager元件對話框中受支援。 嚮導或Foundation-forms不支援RTE。

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

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

  • RTE不支援將內容內嵌在內嵌影格或iframe中。

最佳實務與秘訣

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

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now