De Rich Text Editor configureren configure-the-rich-text-editor
De Rich Text Editor (RTE) biedt auteurs een groot aantal functies voor het bewerken van tekstinhoud. Pictogrammen, selectiekaders, werkbalk en menu's zijn beschikbaar voor een WYSIWYG-ervaring bij het bewerken van tekst. De beheerders vormen RTE om, de eigenschappen toe te laten onbruikbaar te maken en uit te breiden beschikbaar in de auteurscomponenten. Ontwerpen bekijken gebruik RTE voor creatie webinhoud.
De concepten en de stappen van RTE die worden vereist om het te vormen zijn hieronder vermeld.
Begrijp de gebruikersinterface beschikbaar aan auteurs understand-rte-ui
De interface van RTE biedt a aan responsief ontwerp voor de ontwerpomgeving. De interface is ontworpen voor gebruik op touch- en desktopapparaten.
Afbeelding: De werkbalk van de Rich Text Editor met alle beschikbare opties ingeschakeld.
De werkbalk bevat de opties voor de WYSIWYG-ontwerpervaring. Experience Manager beheerders kunnen de opties vormen beschikbaar in de toolbar op de interface. Er is standaard een uitgebreide set bewerkingsopties beschikbaar in Experience Manager. Ontwikkelaars kunnen Experience Manager voor meer bewerkingsopties.
Verschillende bewerkingsmodi editingmodes
Auteurs kunnen tekstinhoud maken en bewerken in Experience Manager met behulp van de verschillende modi van componenten. De toolbaropties voor het ontwerpen en het formatteren van inhoud en de gebruikerservaring van rte-toegelaten componenten op verschillende het uitgeven wijze variëren gebaseerd op configuraties RTE.
Inline bewerken inline-editing
Als u de inhoud binnen een pagina wilt bewerken, opent u de inhoud met een langzame dubbelklik. Er wordt een compacte werkbalk met basisopties weergegeven.
Afbeelding: Inline bewerken met basisopties op de werkbalk.
Volledig scherm bewerken full-screen-editing
Experience Manager kunnen worden geopend in de weergave Volledig scherm, waarin de pagina-inhoud wordt verborgen en het beschikbare scherm wordt ingenomen. U kunt overwegen een gedetailleerde versie van de inlinebewerking op volledig scherm te bewerken, aangezien deze de meeste bewerkingsopties biedt. U kunt het openen door op op de compacte werkbalk als u de inline bewerkingsmodus gebruikt.
In de modus Volledig scherm van het dialoogvenster zijn, samen met een gedetailleerde RTE-werkbalk, ook de opties en componenten beschikbaar in een dialoogvenster. Het is alleen van toepassing voor een dialoog die naast andere componenten RTE bevat.
Afbeelding: De gedetailleerde RTE-werkbalk tijdens het bewerken in de modus Volledig scherm.
Dialoogvenster bewerken dialog-editing
Wanneer dubbelgeklikt wordt op een component, wordt een dialoogvenster geopend voor het bewerken van de inhoud. Het dialoogvenster wordt boven op de bestaande pagina geopend. In sommige specifieke scenario's, opent de dialoog als pop-up venster. Wanneer een tekstcomponent bijvoorbeeld deel uitmaakt van een kolom in een paginalay-out met meerdere kolommen en het gebied dat beschikbaar is voor het dialoogvenster kleiner is.
Afbeelding: Bewerkingsmodus van dialoogvenster.
Informatie over RTE-plug-ins en de bijbehorende functies aboutplugins
De functionaliteit wordt beschikbaar gesteld via een reeks plug-ins, elk met:
-
A
features
eigenschap die- Wordt gebruikt om de basisfunctionaliteit voor die plug-in te activeren of te deactiveren.
- Gevormd gebruikend een gestandaardiseerde procedure.
-
Indien van toepassing, meer eigenschappen en opties die gespecialiseerde configuratie vereisen.
De basisfuncties van de RTE worden geactiveerd of gedeactiveerd door de waarde van de features
eigenschap op een knooppunt dat specifiek is voor de juiste insteekmodule.
In de volgende tabel worden de huidige plug-ins weergegeven:
- Plug-in-id's met een koppeling naar de API-documentatie. ID wordt gebruikt als knooppuntnaam wanneer een plug-in activeren.
- Toegestane waarden voor de
features
eigenschap. - Een beschrijving van de functionaliteit die door de plug-in wordt geboden.
cut
, copy
, paste-default
, paste-plaintext
, paste-wordhtml
find
, replace
image
justifyleft
, justifycenter
, justifyright
ordered
, unordered
, indent
, outdent
specialchars
, sourceedit
paraformat
<p>
, <h1>
, <h2>
, en <h3>
). U kunt meer alinea-indelingen toevoegen of breid de lijst uit.styles
subscript
, superscript
table
, removetable
, insertrow
, removerow
, insertcolumn
, removecolumn
, cellprops
, mergecells
, splitcell
, selectrow
, selectcolumns
dialogFullScreen
instellen om de werkbalk voor de modus Volledig scherm te configureren.Begrijp de configuratiewegen en plaatsen understand-the-configuration-paths-and-locations
De wijze van het uitgeven van RTE en de interface die u voor uw auteurs verstrekt bepaalt de plaats voor de configuratiedetails wanneer u het activeren van de stop-ins van RTE. De locaties zijn:
- Inline-modus:
cq:editConfig/cq:inplaceEditing
. - Modus Volledig scherm:
cq:editConfig/cq:inplaceEditing
. - Dialoogvenstermodus:
cq:dialog
. - Modus Volledig scherm:
cq:dialog
.
cq:inplaceEditing
als config
. Aan cq:inplaceEditing
node, definieert u de volgende eigenschappen:- Naam:
configPath
- Type:
String
- Waarde: pad van het knooppunt met de werkelijke configuratie
config
. Anders, worden de configuraties RTE van kracht voor slechts de beheerders en niet voor de gebruikers in de groep content-author
.Configureer de volgende eigenschappen die van toepassing zijn in de bewerkingsmodus van dialoogvenster:
-
useFixedInlineToolbar
: U kunt de RTE-werkbalk vast maken in plaats van zwevend. Stel deze Booleaanse eigenschap in die op de RTE-node is gedefinieerd met sling:resourceType=cq/gui/components/authoring/dialog/richtext
totTrue
. Wanneer deze eigenschap is ingesteld opTrue
, wordt de RTF-bewerking gestart op het tabbladfoundation-contentloaded
gebeurtenis. Als u dit wilt voorkomen, stelt u de eigenschap incustomStart
totTrue
en activeert derte-start
om RTE-bewerking te starten. Wanneer deze eigenschaptrue
, begint RTE niet bij het klikken en dit is het standaardgedrag. -
customStart
: Stel deze Booleaanse eigenschap die op het RTE-knooppunt is gedefinieerd in opTrue
, om te controleren wanneer om RTE te beginnen door de gebeurtenis in werking te stellenrte-start
. -
rte-start
: activeer deze gebeurtenis op decontenteditable-div
van RTE, wanneer beginnen RTE uit te geven. Het werkt alleen alscustomStart
is ingesteld optrue
.
Wanneer RTE wordt gebruikt in de aanraking-toegelaten dialoog, plaats het bezit useFixedInlineToolbar
tot true
om problemen te voorkomen.
RTE-functies inschakelen door plug-ins te activeren enable-rte-functionalities-by-activating-plug-ins
De functionaliteit van RTE wordt beschikbaar gemaakt via een reeks stop-ins, elk met eigenschappen bezit. U kunt de eigenschap features configureren om de verschillende functies van elke insteekmodule in of uit te schakelen.
Voor gedetailleerde configuraties van de stop-ins van RTE, zie hoe te om de stop van RTE te activeren en te vormen.
De Tekstcomponent Core Components laat malplaatjeredacteurs om vele stop-ins te vormen RTE gebruikend het gebruikersinterface als inhoudsbeleid, eliminerend de behoefte aan technische configuratie. Het inhoudsbeleid kan werken met RTE UI-configuraties, zoals in dit document wordt beschreven. Zie voor meer informatie paginasjablonen maken en de Documentatie voor ontwikkelaars van kerncomponenten.
Ter referentie kunt u de standaardtekstcomponenten (geleverd als onderdeel van een standaardinstallatie) vinden op:
/libs/wcm/foundation/components/text
/libs/foundation/components/text
Als u uw eigen tekstcomponent wilt maken, kopieert u de bovenstaande component in plaats van deze componenten te bewerken.
RTE-werkbalk configureren dialogfullscreen
Experience Manager Hiermee kunt u de interface voor de Rich Text Editor op een andere manier configureren voor de verschillende bewerkingsmodi. De standaardinstellingen worden hieronder gegeven. U kunt deze standaardinstellingen op basis van uw vereisten overschrijven. U kunt alleen de werkbalkfuncties aanpassen die u aan de auteurs wilt geven. U hoeft niet alle werkbalkconfiguraties op te geven.
De werkbalk configureren voor dialogFullScreen
en gebruikt u de volgende voorbeeldconfiguratie.
<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>
Er worden verschillende instellingen voor de gebruikersinterface gebruikt voor de inlinemodus en de modus Volledig scherm. Met de eigenschap toolbar geeft u de optie van de werkbalk op.
Als de optie zelf bijvoorbeeld een functie is (bijvoorbeeld Bold
), wordt het opgegeven als PluginName#FeatureName
(bijvoorbeeld links#modifylink
).
Als de optie een pop-up is (met enkele functies van een plug-in), wordt deze opgegeven als #PluginName
(bijvoorbeeld #format
).
Scheidingstekens (|
) tussen een groep opties kan worden opgegeven met -
.
Het pop-upknooppunt onder de modus Inline of Volledig scherm bevat een lijst met de pop-upovers die worden gebruikt. Elke onderliggende node onder de popovers
het knooppunt krijgt de naam van de plug-in (bijvoorbeeld de indeling). Deze heeft een eigenschap 'items' die een lijst bevat met functies van de plug-in (bijvoorbeeld format#bold).
RTE-gebruikersinterface-instellingen en inhoudsbeleid rtecontentpolicies
De beheerders kunnen de opties controleren RTE gebruikend inhoudsbeleid, zeggen in plaats van de configuratie zoals hierboven beschreven. In het inhoudsbeleid worden de ontwerpeigenschappen van een component gedefinieerd wanneer deze als onderdeel van een component worden gebruikt bewerkbare sjabloon. Als bijvoorbeeld een tekstcomponent die de RTE gebruikt wordt gebruikt met een bewerkbare sjabloon, kan het inhoudsbeleid definiëren dat de optie Vet beschikbaar is en zijn enkele opties voor alineaopmaak beschikbaar. Het inhoudsbeleid is herbruikbaar en kan op meerdere sjablonen worden toegepast.
De beschikbare opties in RTE stromen stroomafwaarts van de configuraties van het gebruikersinterface aan het inhoudsbeleid.
- De de configuratiemontages van de gebruikersinterface bepalen welke opties aan het inhoudsbeleid beschikbaar zijn.
- Als de gebruikersinterfaceconfiguratie van RTE verwijderde of geen punt toelaat, kan het inhoudsbeleid niet het vormen.
- Een auteur heeft toegang tot slechts dergelijke functionaliteit die door de gebruikersinterfaceconfiguraties en het inhoudsbeleid ter beschikking wordt gesteld.
Als voorbeeld kunt u de Documentatie van de component Text Core.
Toewijzing aanpassen tussen werkbalkpictogrammen en -opdrachten iconstoolbar
U kunt de afbeelding aanpassen tussen de koraalpictogrammen die worden weergegeven op de RTE-werkbalk en de beschikbare opdrachten. U kunt geen andere pictogrammen gebruiken behalve Koraalpictogrammen.
-
Een knooppunt maken met de naam
icons
krachtensuiSettings/cui
. -
Maak knooppunten voor afzonderlijke pictogrammen eronder.
-
Geef voor elk van de afzonderlijke pictogramknooppunten een koraalpictogram en een opdracht op om aan het pictogram toe te wijzen.
Hieronder ziet u een voorbeeldfragment voor het toewijzen van de opdracht Bold
naar het pictogram Coral genaamd 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>
Bekende beperkingen known-limitations
Experience Manager Het vermogen van RTE heeft de volgende beperkingen:
-
RTE-mogelijkheden worden alleen ondersteund in Experience Manager dialoogvensters van componenten. RTE wordt niet gesteund op tovenaars of stichting-vormen.
-
Experience Manager werkt niet op hybride apparaten.
-
Noem niet de knoop van de configuratie RTE
config
. Anders, treedt de configuratie RTE voor slechts de beheerders en niet voor de gebruikers in de groep van krachtcontent-author
. -
RTE ondersteunt het insluiten van inhoud in een inline-frame of iframe niet.
Tips en trucs best-practices-and-tips
- Voor een zwevend dialoogvenster schakelt u alleen de plug-ins in zonder een pop-updialoogvenster. Plug-ins zonder pop-up zijn kleiner en zijn het meest geschikt voor een zwevend dialoogvenster.
- De plug-ins met grotere pop-ups inschakelen, zoals de
Paste
alleen in de modus Volledig scherm of in de modus Volledig scherm. Plug-ins met een grote pop-up hebben meer ruimte in het scherm nodig voor een goede ontwerpervaring. - Als u aangepaste plug-ins voor CoralUI3 RTE gebruikt, gebruikt u
rte.coralui3
bibliotheek.