Konfigurera RTF-redigeraren :headding-anchor:configure-the-rich-text-editor
Med RTF-redigeraren får författarna ett stort antal funktioner för att redigera textinnehåll. Ikoner, markeringsrutor, verktygsfält och menyer finns för WYSIWYG-textredigering. Administratörer konfigurerar RTE för att aktivera, inaktivera och utöka de funktioner som är tillgängliga i redigeringskomponenterna. Se hur författare använder RTE för att skapawebbinnehåll.
De RTE-begrepp och -steg som krävs för att konfigurera den listas nedan.
Förstå användargränssnittet som är tillgängligt för författare :headding-anchor:understand-rte-ui
RTE-gränssnittet erbjuder en responsiv design för redigeringsmiljön. Gränssnittet är utformat för att användas på enheter med pekskärm och stationära datorer.
Bild: Verktygsfältet för textredigeraren med alla tillgängliga alternativ aktiverade.
Verktygsfältet innehåller alternativ för WYSIWYG-redigering. Experience Manager-administratörer kan konfigurera de alternativ som är tillgängliga i verktygsfältet i gränssnittet. En omfattande uppsättning redigeringsalternativ är tillgängliga som standard i Experience Manager. Utvecklare kan anpassa Experience Manager om du vill lägga till fler redigeringsalternativ.
Olika redigeringslägen :headding-anchor:editingmodes
Författare kan skapa och redigera textinnehåll i Experience Manager med hjälp av de olika komponentlägena. Alternativen i verktygsfältet för att skapa och formatera innehåll och användarupplevelsen i komponenter med RTE-funktioner i olika redigeringslägen varierar beroende på RTE-konfigurationer.
Redigering direkt :headding-anchor:inline-editing
Om du vill redigera innehållet på en sida öppnar du innehållet med ett långsamt dubbelklick . Ett kompakt verktygsfält med grundläggande alternativ visas.
Bild: Inline-redigering med grundläggande alternativ i verktygsfältet.
Redigering i helskärmsläge :headding-anchor:full-screen-editing
Experience Manager komponenter kan öppnas i helskärmsläge som döljer sidinnehållet och tar upp den tillgängliga skärmen. Överväg att redigera i helskärmsläge som en detaljerad version av den infogade redigeringen eftersom den erbjuder de flesta redigeringsalternativen. Du kan öppna den genom att klicka på ikonen från det kompakta verktygsfältet när du använder det infogade redigeringsläget.
I dialogrutans helskärmsläge, tillsammans med ett detaljerat verktygsfält för textredigering, är även de alternativ och komponenter som är tillgängliga i en dialogruta tillgängliga. Det gäller endast för en dialogruta som innehåller RTE tillsammans med andra komponenter.
Bild: Det detaljerade verktygsfältet för textredigering när du redigerar i helskärmsläge.
Dialogruteredigering :headding-anchor:dialog-editing
När du dubbelklickar på en komponent öppnas en dialogruta där du kan redigera innehållet. Dialogrutan öppnas ovanpå den befintliga sidan. I vissa specifika scenarier öppnas dialogrutan som ett popup-fönster. Om en textkomponent till exempel är en del av en kolumn i en sidlayout med flera kolumner och området som är tillgängligt för dialogrutan är mindre.
Figur: Dialogruteredigeringsläge.
Om RTE-plugin-program och associerade funktioner :headding-anchor:aboutplugins
Funktionerna är tillgängliga via ett antal plugin-program, var och en med:
-
En
features
-egenskap som är- Används för att aktivera eller inaktivera grundläggande funktioner för det plugin-programmet.
- Konfigureras med en standardiserad procedur.
-
I tillämpliga fall krävs specialkonfigurering för fler egenskaper och alternativ.
Grundfunktionerna i textredigeraren aktiveras, eller inaktiveras, av värdet för egenskapen features
på en nod som är specifik för det aktuella plugin-programmet.
I följande tabell visas de aktuella plugin-programmen:
- Plugin-ID:n med en länk till API-dokumentationen. ID används som nodnamn när ett plugin-programaktiveras.
- Tillåtna värden för egenskapen
features
. - En beskrivning av de funktioner som tillhandahålls av plugin-programmet.
cut
, copy
, paste-default
, paste-plaintext
, paste-wordhtml
find
, replace
image
justifyleft
, justifycenter
, justifyright
ordered
, unordered
, indent
, outdent
specialchars
, sourceedit
paraformat
<p>
, <h1>
, <h2>
och <h3>
). Du kan lägga till fler styckeformat eller utöka listan.styles
subscript
, superscript
table
, removetable
, insertrow
, removerow
, insertcolumn
, removecolumn
, cellprops
, mergecells
, splitcell
, selectrow
, selectcolumns
dialogFullScreen
för att konfigurera verktygsfältet för helskärmsläge.Förstå konfigurationssökvägar och -platser :headding-anchor:understand-the-configuration-paths-and-locations
läget för RTE-redigering och gränssnittet som du anger för författarna avgör platsen för konfigurationsinformationen när du aktiverar RTE-plugin-program. Platserna är:
- Textbundet läge:
cq:editConfig/cq:inplaceEditing
. - Helskärmsläge:
cq:editConfig/cq:inplaceEditing
. - Dialogruteläge:
cq:dialog
. - Dialogruteläge i helskärmsläge:
cq:dialog
.
cq:inplaceEditing
som config
. Definiera följande egenskaper på noden cq:inplaceEditing
:- Namn:
configPath
- Typ:
String
- Värde: sökväg till noden som innehåller den faktiska konfigurationen
config
. Annars gäller RTE-konfigurationerna bara för administratörerna och inte för användarna i gruppen content-author
.Konfigurera följande egenskaper som gäller i redigeringsläget för dialogrutor:
-
useFixedInlineToolbar
: Du kan åtgärda RTE-verktygsfältet i stället för att låta det flyta. Ange den här booleska egenskapen som definierats på RTE-noden med sling:resourceType=cq/gui/components/authoring/dialog/richtext
tillTrue
. När den här egenskapen är inställd påTrue
startas textredigeringen för händelsenfoundation-contentloaded
. Du kan förhindra detta genom att ange egenskapencustomStart
tillTrue
och utlösa händelsenrte-start
för att starta RTE-redigering. När den här egenskapen ärtrue
startar inte RTE vid klickning och detta är standardbeteendet. -
customStart
: Ange den här booleska egenskapen som definierats på RTE-noden tillTrue
för att styra när RTE ska startas genom att utlösa händelsenrte-start
. -
rte-start
: Utlös den här händelsen påcontenteditable-div
i RTE när du ska börja redigera RTE. Det fungerar bara omcustomStart
har angetts tilltrue
.
När RTE används i den beröringsaktiverade dialogrutan anger du egenskapen useFixedInlineToolbar
till true
för att undvika problem.
Aktivera RTE-funktioner genom att aktivera plugin-program :headding-anchor:enable-rte-functionalities-by-activating-plug-ins
RTE-funktioner är tillgängliga via en serie plugin-program, var och en med features-egenskaper. Du kan konfigurera egenskapen features för att aktivera eller inaktivera de olika funktionerna i varje plugin-program.
Detaljerade konfigurationer av RTE-plugin-program finns i Så här aktiverar och konfigurerar du RTE-plugin-program.
Med textkomponenten Core Components kan mallredigerare konfigurera många RTE-plugin-program med användargränssnittet som innehållsprinciper, vilket eliminerar behovet av teknisk konfiguration. Innehållsprinciper kan fungera med gränssnittskonfigurationer för textredigering enligt beskrivningen i det här dokumentet. Mer information finns i Skapa sidmallar och Dokumentation för grundkomponentsutvecklare.
I referenssyfte finns textstandardkomponenterna (levereras som en del av en standardinstallation) på:
/libs/wcm/foundation/components/text
/libs/foundation/components/text
Om du vill skapa en egen textkomponent kopierar du ovanstående komponent i stället för att redigera de här komponenterna.
Verktygsfältet Konfigurera RTE :headding-anchor:dialogfullscreen
I Experience Manager kan du konfigurera gränssnittet för RTF-redigeraren på ett annat sätt för de olika redigeringslägena. Standardinställningarna anges nedan. Du kan åsidosätta dessa standardinställningar baserat på dina behov. Du anpassar bara de verktygsfältsfunktioner som du vill ge författarna. Du behöver inte ange alla verktygsfältskonfigurationer.
Använd följande exempelkonfiguration om du vill konfigurera verktygsfältet för 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>
Olika gränssnittsinställningar används för infogat läge och helskärmsläge. Egenskapen toolbar anger verktygsfältets alternativ.
Om alternativet i sig själv är en funktion (till exempel Bold
) anges det som PluginName#FeatureName
(till exempel links#modifylink
).
Om alternativet är ett popup-fönster (som innehåller vissa funktioner i ett plugin-program) anges det som #PluginName
(till exempel #format
).
Avgränsare (|
) mellan en grupp med alternativ kan anges med -
.
Popup-noden under infogat läge eller helskärmsläge innehåller en lista över de popup-fönster som används. Varje underordnad nod under noden popovers
namnges efter plugin-programmet (till exempel format). Den har egenskapen "items" som innehåller en lista med funktioner för plugin-programmet (till exempel format#bold).
RTE-inställningar (User Interface Settings) och innehållsprinciper :headding-anchor:rtecontentpolicies
Administratörer kan styra textredigeringsalternativen med hjälp av innehållsprinciper, till exempel i stället för att göra konfigurationen enligt beskrivningen ovan. Innehållsprofiler definierar designegenskaperna för en komponent när de används som en del av en redigerbar mall. Om en textkomponent som använder textredigeraren till exempel används med en redigerbar mall kan innehållsprincipen definiera att det feta alternativet är tillgängligt och att några styckeformateringsalternativ är tillgängliga. Innehållsprofilerna kan återanvändas och kan tillämpas på flera mallar.
De tillgängliga alternativen i textredigeraren flödar nedåt från användargränssnittskonfigurationerna till innehållsprinciperna.
- Konfigurationsinställningarna för användargränssnittet definierar vilka alternativ som är tillgängliga för innehållsprinciperna.
- Om användargränssnittskonfigurationen för textredigeraren har tagits bort eller inte aktiverar ett objekt kan innehållsprincipen inte konfigurera det.
- En författare har bara tillgång till funktioner som är tillgängliga i användargränssnittskonfigurationerna och i innehållsprinciperna.
Du kan till exempel se dokumentationen för textkärnkomponenten.
Anpassa mappningen mellan verktygsfältsikoner och kommandon :headding-anchor:iconstoolbar
Du kan anpassa mappningen mellan koralikonerna som visas i verktygsfältet för textredigering och de tillgängliga kommandona. Du kan inte använda några andra ikoner förutom kornikoner.
-
Skapa en nod med namnet
icons
underuiSettings/cui
. -
Skapa noder för enskilda ikoner under den.
-
På varje enskild ikonnod anger du en korallikon och ett kommando som ska kopplas till ikonen.
Nedan visas ett exempelfragment som mappar kommandot Bold
till koralikonen 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>
Kända begränsningar :headding-anchor:known-limitations
Experience Manager RTE-funktionen har följande begränsningar:
-
RTE-funktioner stöds bara i Experience Manager komponentdialogrutor. RTE stöds inte i guider eller Foundation-formulär.
-
Experience Manager fungerar inte på hybridenheter.
-
Ge inte RTE-konfigurationsnoden namnet
config
. Annars gäller RTE-konfigurationen bara för administratörerna och inte för användarna i gruppencontent-author
. -
RTE stöder inte inbäddning av innehåll i en textbunden ram eller en iframe.
God praxis och tips :headding-anchor:best-practices-and-tips
- Aktivera bara plugin-program utan dialogruta för en flytande dialogruta. Plugin-program utan popup-fönster är mindre och lämpar sig bäst för en flytande dialogruta.
- Aktivera plugin-program med större popup-fönster, till exempel plugin-programmet
Paste
, endast i helskärmsläge eller i helskärmsläge. Plugin-program med stor popup-meny behöver mer utrymme på skärmen för att kunna skapa på ett bra sätt. - Om du använder anpassade plugin-program för CoralUI3 RTE använder du biblioteket
rte.coralui3
.