設定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中的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
此功能透過一系列外掛程式提供,每個外掛程式具有:
-
A
features
屬性:- 用來啟用或停用該外掛程式的基本功能
- 可使用標準化的程式進行設定
-
適當時,需要專門設定的其他屬性和選項。
RTE的基本功能會由的值啟用或停用 features
屬性(在節點上,為適當的外掛程式專用)。
下表列出目前的外掛程式,其中顯示:
- 外掛程式ID及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
作為 config
. 開啟 cq:inplaceEditing
節點,定義下列屬性:- 名稱:
configPath
- 類型:
String
- 值:包含實際設定的節點路徑
config
. 否則,RTE設定將只對管理員生效,而不會對群組中的使用者生效 content-author
.設定以下僅適用於Touch UI中對話方塊編輯模式的屬性:
-
useFixedInlineToolbar
:設定這個在RTE節點上定義的布林值屬性(具有sling:resourceType=的節點)cq/gui/components/authoring/dialog/richtext
)至True
,以使RTE工具列固定而非浮動。此屬性為true時,RTF編輯預設會在「foundation-contentloaded」事件中啟動。
若要防止此情況,請設定屬性
customStart
至True
並觸發「rte-start」事件以開始RTE編輯。 當此屬性為「true」時,預設行為(按一下即啟動rte)將無法運作。 -
customStart
:將此在RTE節點上定義的布林值屬性設為True
,以透過觸發事件控制何時開始RTErte-start
. -
rte-start
:在上觸發此事件contenteditable-div
RTE時,開始編輯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功能可透過一系列外掛程式使用,每個外掛程式都具備功能屬性。 您可以設定功能屬性,以啟用或停用每個外掛程式的各種功能。
如需RTE外掛程式的詳細設定,請參閱 如何啟動及設定RTE外掛程式.
範例:下載 此範例設定 這會說明如何設定RTE。 在此套件中會啟用所有功能。
/libs/wcm/foundation/components/text
/libs/foundation/components/text
設定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中可用的選項會從使用者介面設定向下流向內容原則。
- 使用者介面組態設定會定義哪些選項可供內容原則使用。
- 如果RTE的使用者介面設定已移除或未啟用專案,則內容原則無法進行設定。
- 作者只能存取使用者介面設定和內容原則所提供的功能。
例如,您可以看到 文字核心元件檔案.
自訂工具列圖示和命令之間的對應 iconstoolbar
您可以自訂RTE工具列上顯示的Coral圖示與可用命令之間的對應。 除了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
替換為rte.coralui2
相依性屬性的屬性。 - 取代
cq.authoring.editor.core.inlineediting.rte.coralui3
替換為cq.authoring.editor.core.inlineediting.rte.coralui2
(內嵌屬性)。 - 取代
cq.authoring.rte.coralui3
替換為cq.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
至rte.coralui2
. 例如,重疊節點之後/libs/mcm/campaign/components/touch-ui/clientlibs/rte
在/apps
,變更其上的任何相依性,從rte.coralui3
至rte.coralui2
. -
覆蓋節點
cq/ui/widgets
在/apps
. 取代相依性cq.rte
在節點/apps/cq/ui/widgets
替換為cq.coralui2.rte
.
更多資訊 further-information
如需有關設定RTE的詳細資訊,請參閱 AEM Widget API 參考。
具體來說,若要檢視外掛程式和可用的相關選項:
-
此 CQ.form.Rtf 元件提供表單欄位,用於編輯樣式文字資訊(rtf)。 若要瞭解RTF表單可用的所有引數,請參閱設定選項。
-
Rtf元件使用下列外掛程式提供多種功能 CQ.form.rte.plugins.Plugin. 對於每個外掛程式:
- 如需可啟用(或已停用)功能的詳細資訊,請參閱功能
- 如需適當外掛程式的詳細設定資訊,請參閱設定選項以取得所有可用引數
-
也提供連結之HTML規則的詳細資訊。
這些可用來擴充及自訂您自己的RTE。 例如,若要在建立連結時列出頁面中可用的錨點,您可以提供自己的實施 LinkPlugin
.
已知限制 known-limitations
AEM RTE功能有下列限制:
最佳作法和秘訣 best-practices-and-tips
- 只啟用外掛程式,而不使用浮動對話方塊的快顯視窗。 沒有快顯視窗的外掛程式尺寸較小,最適合用於浮動對話方塊。
- 透過較大的快顯視窗啟用外掛程式,例如
Paste
外掛程式,但僅限於全熒幕對話方塊模式或全熒幕模式。 具有大型快顯視窗的外掛程式需要更多熒幕空間,才能提供良好的撰寫體驗。 - 如果您使用CoralUI3 RTE的自訂外掛程式,請使用
rte.coralui3
資料庫。
疑難排解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
屬性.