設定RTF編輯器 configure-the-rich-text-editor
RTF編輯器(RTE)為作者提供多種編輯文字內容的功能。 WYSIWYG文字編輯體驗提供圖示、選取方塊、工具列和功能表。
若要了解如何使用RTE功能進行製作,請參閱 使用RTF編輯器進行編寫. RTE可以設定為啟用、停用和擴充製作元件中可用的功能。 以下工作流程說明在Experience Manager中完成RTE設定工作的建議順序。
圖:設定RTF編輯器的典型工作流程
了解觸控式UI和傳統UI understand-touch-enabled-ui-and-classic-ui
觸控式UI是AEM的標準UI。 Adobe推出觸控式UI,搭配 回應式設計 針對製作環境,在5.6版中。觸控式UI是專為觸控和桌上型裝置而設計。 UI與原始的傳統UI有很大不同。
圖:觸控式UI中的RTF編輯器工具列
圖:傳統UI中的RTF編輯器工具列
各種編輯模式 editingmodes
作者可以使用不同的元件模式,在AEM中建立和編輯文字內容。 用於編寫和格式化內容的工具列選項以及不同編輯模式下啟用RTE的元件的用戶體驗,會因RTE配置而異。
內嵌編輯 inline-editing
開啟時(按兩下/按一下速度緩慢),您可以在頁面內編輯內容。 提供包含基本選項的緊湊型工具列。
圖:在觸控式UI中與基本工具列內嵌編輯
在傳統UI中,按兩下元件時速度緩慢,可進行內嵌編輯,而橘色外框會醒目顯示內容。 如果「內容尋找器」已開啟,則視窗頂端會顯示包含可用RTE格式選項的工具列。 如果「內容尋找器」未開啟,則不會顯示格式選項,您只能編輯基本文字。
全螢幕編輯 full-screen-editing
AEM元件可以以全螢幕檢視開啟,隱藏頁面內容並佔據可用螢幕。 請考慮以全螢幕編輯詳細的內嵌編輯版本,因為它提供最多的編輯選項。 可按一下 ,即可在使用內嵌編輯模式時從緊密工具列取得。
對話框全螢幕模式提供了詳細的RTE工具欄,以及對話框模式中可用的選項和元件。 此變數僅適用於包含RTE與其他元件的對話方塊。
圖:在觸控式UI中以全螢幕模式編輯時,詳細的RTE工具列
對話方塊編輯 dialog-editing
在傳統UI中按兩下元件時,會開啟一個對話方塊以編輯內容。 對話框將在現有頁面的頂部開啟。 在某些特定情況下,對話方塊會以快顯視窗的形式開啟。 例如,當文本元件是多列頁面佈局中列的一部分時,對話框的可用區域較小。
圖:在觸控式UI中編輯對話方塊模式
圖:傳統UI中包含編輯詳細工具列的對話框
關於RTE外掛程式和相關功能 aboutplugins
此功能可透過一系列外掛程式提供,每個外掛程式都具備:
-
A
features
屬性:- 這可用來啟用或停用該外掛程式的基本功能。
- 可使用標準化程式來設定。
-
需要專門配置的更多屬性和選項(如果適用)。
RTE的基本功能會由 features
屬性。
下表列出目前的外掛程式,顯示:
- 具有API檔案連結的外掛程式ID。 當 啟用外掛程式.
- 允許的值
features
屬性。 - 外掛程式所提供功能的說明。
dialogFullScreen
設定,以設定全螢幕模式的工具列。了解設定路徑和位置 understand-the-configuration-paths-and-locations
此 RTE編輯模式(和UI) 提供給作者的設定,會在您 啟用RTE外掛程式:
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
cq:dialog
dialog
cq:dialog
cq:inplaceEditing
as config
. 開啟 cq:inplaceEditing
節點,定義下列屬性:- 名稱:
configPath
- 類型:
String
- 值:包含實際配置的節點的路徑
config
. 否則,RTE設定只對管理員有效,對群組中的使用者無效 content-author
.設定下列僅適用於觸控式UI中對話方塊編輯模式的屬性:
-
useFixedInlineToolbar
:設定RTE節點上定義的此Boolean屬性(一個具有sling:resourceType=cq/gui/components/authoring/dialog/richtext
)True
,使RTE工具列固定而非浮動。此屬性為true時,RTF編輯預設會在「foundation-contentloaded」事件上啟動。
若要防止此情況,請設定屬性
customStart
toTrue
並觸發「rte-start」事件以開始RTE編輯。 當此屬性為「true」時,預設行為(點擊時開始的rte)無法運作。 -
customStart
:將RTE節點上定義的此布林屬性設定為True
,透過觸發事件來控制何時啟動RTErte-start
. -
rte-start
:在contenteditable-div
,開始編輯RTE時。 只有在customStart
已設為true。
在觸控式對話方塊中使用RTE時,請設定屬性 useFixedInlineToolbar
設為true是避免問題的必要項目。
就地自訂編輯 customizing-in-place-editing
您可以設定下列屬性,以定義文字編輯器開始的HTML選取器:
editElementQuery
— 定義於cq:InplaceEditingConfig
,此屬性可用來指定HTML元素的選取器,以便在其中開始內嵌編輯文字元件。 如果未指定,則直接在「文本元件」HTML上啟動內嵌編輯。textPropertyName
— 定義於cq:InplaceEditingConfig
,此屬性用於指定要儲存在內容節點上的屬性名稱,文字元件的HTML值在內嵌編輯後將保存在該節點上。
對話方塊模式的對應屬性為 name
.
啟用外掛程式以啟用RTE功能 enable-rte-functionalities-by-activating-plug-ins
可透過一系列外掛程式使用RTE功能,每個外掛程式都具有features屬性。 您可以配置features屬性,以啟用或停用每個外掛程式的各種功能。
如需RTE外掛程式的詳細設定,請參閱 如何啟用和配置RTE外掛程式.
下載此範例設定,以了解如何設定RTE。 在此包中,所有功能都已啟用。
/libs/wcm/foundation/components/text
/libs/foundation/components/text
配置RTE工具欄 dialogfullscreen
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使用者介面設定和內容原則 rtecontentpolicies
管理員可以使用內容原則來控制RTE選項,例如,不必如上所述執行設定。 內容原則會定義元件在 可編輯的範本. 例如,如果使用RTE的文本元件與可編輯的模板一起使用,則內容策略可以定義粗體選項可用,並可以定義幾個段落格式選項。 內容原則可重複使用,可套用至多個範本。
AEM 6.4 Service Pack 3之後,RTE中從使用者介面設定到內容原則下游的可用選項。
- 用戶介面配置設定定義了哪些選項可用於內容策略。
- 如果RTE的用戶介面配置已刪除或未啟用項目,則內容策略無法配置它。
- 作者只能存取使用者介面設定和內容原則所提供的功能。
例如,您可以看到 文字核心元件檔案.
自定義工具欄表徵圖和命令之間的映射 iconstoolbar
您可以自訂RTE工具列上顯示的珊瑚圖示和可用命令之間的對應。 除了Coral圖示,您無法使用其他任何圖示。
-
建立名為的節點
icons
在uiSettings/cui
. -
為其下的各個表徵圖建立節點。
-
在每個個別圖示節點上,指定一個Coral圖示和一個命令來對應該圖示。
以下是將命令Bold對應至Coral圖示的范常式式碼片段,命名為 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>
切換至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,請執行下列步驟。
rte.coralui3
程式庫。-
覆蓋節點
/libs/cq/gui/components/authoring/editors/clientlibs/core
在/apps
,並執行下列動作:- 取代
rte.coralui3
withrte.coralui2
(依賴項屬性)。 - 取代
cq.authoring.editor.core.inlineediting.rte.coralui3
withcq.authoring.editor.core.inlineediting.rte.coralui2
內嵌屬性。 - 取代
cq.authoring.rte.coralui3
withcq.authoring.rte.coralui2
內嵌屬性。
- 取代
-
覆蓋節點
/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
和/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
在/apps
.移除類別
cq.authoring.dialog
從/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
並將其添加到/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
. -
變更包含在頁面上的任何其他相依性,從
rte.coralui3
torte.coralui2
. 例如,在覆蓋節點後/libs/mcm/campaign/components/touch-ui/clientlibs/rte
在/apps
,從rte.coralui3
torte.coralui2
. -
覆蓋節點
cq/ui/widgets
在/apps
. 取代相依性cq.rte
在節點/apps/cq/ui/widgets
withcq.coralui2.rte
.
更多資訊 further-information
如需設定RTE的詳細資訊,請參閱 AEM Widget API 參考。
尤其要查看可用的外掛程式和相關選項:
-
此 CQ.form.RichText 元件提供用於編輯已設定樣式的文本資訊(rtf)的表單欄位。 若要了解RTF表單可用的所有參數,請參閱設定選項。
-
RtfText元件使用下列外掛程式,提供多種功能: CQ.form.rte.plugins.Plugin. 對於每個外掛程式:
- 如需可啟用(或停用)功能的詳細資訊,請參閱功能。
- 如需適當外掛程式的詳細設定,請參閱設定選項以取得所有可用參數。
-
也提供連結HTML規則的詳細資訊。
上述選項可用來擴充和自訂您自己的RTE。 例如,若要在建立連結時列出頁面中可用的錨點,您可以提供您自己的實作 LinkPlugin
.
已知限制 known-limitations
AEM RTE功能有下列限制: