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 hun tekstinhoud. Pictogrammen, selectiekaders, werkbalk en menu's zijn beschikbaar voor een WYSIWYG-ervaring bij het bewerken van tekst.
Om te weten hoe te om eigenschappen RTE voor creatie te gebruiken, zie Rich Text Editor gebruiken voor ontwerpen. RTE kan worden gevormd om, de eigenschappen toe te laten onbruikbaar te maken en uit te breiden beschikbaar in de auteurscomponenten. Het volgende werkschema illustreert een geadviseerde orde om de de configuratietaken van RTE in Experience Manager te voltooien.
Afbeelding: Normale workflow voor het configureren van Rich Text Editor
Interface met aanraakbediening en klassieke gebruikersinterface understand-touch-enabled-ui-and-classic-ui
De interface met aanraakbediening is de standaardinterface voor AEM. Adobe introduceerde Touch UI met responsief ontwerp voor de ontwerpomgeving, in versie 5.6. De aanraakinterface is ontworpen voor touch- en desktopapparaten. De interface verschilt aanzienlijk van de oorspronkelijke klassieke interface.
Afbeelding: De rijke toolbar van de Redacteur van de Tekst in Touch-Toegelaten UI
Afbeelding: De Rich Text Editor-werkbalk in de klassieke gebruikersinterface
Verschillende bewerkingsmodi editingmodes
Auteurs kunnen tekstinhoud in AEM maken en bewerken met 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 opent (met een langzaam dubbeltikken/klikken), kan deze op de pagina worden bewerkt. Er wordt een compacte werkbalk met basisopties weergegeven.
Afbeelding: Inline bewerken met de standaardwerkbalk in Touch-gebruikersinterface
In de klassieke gebruikersinterface kunt u met een trage dubbelklik op de component inline bewerken en met een oranje omtrek de inhoud markeren. Als de Inhoudszoeker is geopend, wordt boven in het venster een werkbalk weergegeven met de beschikbare RTE-opmaakopties. Als de Inhoudszoeker niet is geopend, worden de opmaakopties niet weergegeven en kunt u alleen standaardtekstbewerkingen uitvoeren.
Volledig scherm bewerken full-screen-editing
AEM componenten kunnen worden geopend in de weergave Volledig scherm, waarin de pagina-inhoud wordt verborgen en het beschikbare scherm wordt ingenomen. U kunt overwegen om 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.
De modus Volledig scherm van het dialoogvenster bevat een gedetailleerde RTE-werkbalk en de opties en componenten die beschikbaar zijn in de dialoogmodus. Het is alleen van toepassing voor een dialoog die naast andere componenten RTE bevat.
Afbeelding: De gedetailleerde RTE-werkbalk wanneer u bewerkingen uitvoert in de modus Volledig scherm in de gebruikersinterface met aanraakbediening
Dialoogbewerkingen dialog-editing
Wanneer dubbelgeklikt wordt op een component in de klassieke gebruikersinterface, 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: Dialoogbewerkingsmodus in interface met aanraakbediening
Afbeelding: Dialoogvenster in klassieke gebruikersinterface met gedetailleerde werkbalk voor bewerken
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:- Hiermee wordt de basisfunctionaliteit voor die plug-in geactiveerd of gedeactiveerd.
- Dat kan worden 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.
<p>
, <h1>
, <h2>
, en <h3>
). U kunt meer alineaopmaak toevoegen of breid de lijst uit.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 UI) die u voor uw auteurs verstrekt bepaalt de plaats voor de configuratiedetails wanneer u het activeren van de stop-ins van RTE:
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
cq:editConfig/cq:inplaceEditing
cq:dialog
dialog
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 feitelijke 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 alleen van toepassing zijn in de bewerkingsmodus Dialoogvenster in Touch UI:
-
useFixedInlineToolbar
: Stel deze Booleaanse eigenschap in die op de RTE-node is gedefinieerd (één met sling:resourceType=cq/gui/components/authoring/dialog/richtext
) naarTrue
om de RTE-werkbalk vast te maken in plaats van zwevend.Wanneer deze eigenschap true is, wordt het bewerken van Richtingstekst standaard gestart op de gebeurtenis "foundation-contentloaded".
Als u dit wilt voorkomen, stelt u de eigenschap in
customStart
totTrue
en activeer de gebeurtenis 'rte-start' om RTE-bewerking te starten. Wanneer deze eigenschap 'true' is, werkt het standaardgedrag, het starten bij klikken. -
customStart
: Stel deze Booleaanse eigenschap die is gedefinieerd op het RTE-knooppunt in opTrue
, om te controleren wanneer om RTE te beginnen door de gebeurtenis in werking te stellenrte-start
. -
rte-start
: Deze gebeurtenis activeren op het tabbladcontenteditable-div
van RTE, wanneer beginnen RTE uit te geven. Dit werkt alleen alscustomStart
is ingesteld op true.
Wanneer RTE wordt gebruikt in de aanraking-toegelaten dialoog, plaatsend het bezit useFixedInlineToolbar
naar waar is verplicht om problemen te voorkomen .
Op plaats bewerken aanpassen customizing-in-place-editing
U kunt definiëren op welke HTML-kiezer de teksteditor begint door de volgende eigenschappen te configureren:
editElementQuery
- Gedefinieerd opcq:InplaceEditingConfig
, wordt deze eigenschap gebruikt om een kiezer op te geven van het element HTML waarop de inline-bewerking voor de tekstcomponent wordt gestart. Als u deze optie niet opgeeft, wordt het inline bewerken direct gestart op de HTML van de tekstcomponent.textPropertyName
- Gedefinieerd opcq:InplaceEditingConfig
, wordt deze eigenschap gebruikt om de naam op te geven van de eigenschap die wordt opgeslagen op het inhoudsknooppunt waar de HTML-waarde van de tekstcomponent na inline-bewerking wordt voortgezet.
De overeenkomende eigenschap voor de dialoogmodus is name
.
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-ins van RTE te activeren en te vormen.
Download deze steekproefconfiguratie om te begrijpen hoe te om RTE te vormen. In dit pakket zijn alle functies ingeschakeld.
/libs/wcm/foundation/components/text
/libs/foundation/components/text
RTE-werkbalk configureren dialogfullscreen
AEM staat u toe om UI voor de Redacteur RichText voor de verschillende het uitgeven wijzen verschillend te vormen. De standaardinstellingen worden hieronder gegeven. U kunt deze standaardinstellingen op basis van uw vereisten overschrijven.
Voor de beste ontwerpervaring:
- Schakel in een zwevend dialoogvenster alleen de plug-ins in die geen pop-up hebben, omdat het zwevende dialoogvenster een kleiner formaat heeft.
- Schakel in het dialoogvenster Volledig scherm alle vereiste plug-ins in, zelfs de plug-ins met grotere pop-ups, zoals de
Paste
insteekmodule. Gebruik dedialogFullScreen
hieronder beschreven configuratie.
<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>
Er worden verschillende UI-instellingen gebruikt voor de inlinemodus en de modus Volledig scherm. De eigenschap toolbar wordt gebruikt om de knoppen van de werkbalk op te geven. Als de knop zelf bijvoorbeeld een functie is (bijvoorbeeld Bold
), wordt het opgegeven als PluginName#FeatureName
(bijvoorbeeld links#modifylink
). Als de knop een pop-up is (met enkele functies van een plug-in), wordt deze opgegeven als #PluginName
(bijvoorbeeld #format
). Scheidingstekens ( | ) tussen een groep knoppen kan worden opgegeven met '-'.
Het pop-upknooppunt onder de modus Inline of Volledig scherm bevat een lijst met de popovers die worden gebruikt. Elke onderliggende node onder de popovers
node wordt benoemd naar de plug-in (bijvoorbeeld format
). Het heeft een eigenschap items
met een lijst 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.
AEM 6.4 Service Pack 3 en daarna, de beschikbare opties in RTE stroom 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 waarmee u de opdracht Vet maken toewijst aan het pictogram Koraal met de naam 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>
Overschakelen naar de KoralUI 2 Rich Text Editor switch-to-coralui-rich-text-editor
Voor een pagina, kunt u of CoralUI 2 KTE clientlib of CoralUI 3 KTE clientlib omvatten. Standaard bevat de Rich Text Editor de CoralUI 3 RTE clientlib. Ga als volgt te werk om over te schakelen op CoralUI 2 RTE.
rte.coralui3
bibliotheek.-
Het knooppunt bedekken
/libs/cq/gui/components/authoring/editors/clientlibs/core
krachtens/apps
en voer de volgende handelingen uit:- Vervangen
rte.coralui3
withrte.coralui2
voor het gebiedsdeelbezit. - Vervangen
cq.authoring.editor.core.inlineediting.rte.coralui3
withcq.authoring.editor.core.inlineediting.rte.coralui2
voor de eigenschap embed. - Vervangen
cq.authoring.rte.coralui3
withcq.authoring.rte.coralui2
voor de eigenschap embed.
- Vervangen
-
De knooppunten bedekken
/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
en/libs/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
krachtens/apps
.Categorie verwijderen
cq.authoring.dialog
van/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui3
en voeg deze toe aan/apps/cq/gui/components/authoring/dialog/richtext/clientlibs/rte/coralui2
. -
Wijzig een andere afhankelijkheid die op de pagina wordt opgenomen vanuit
rte.coralui3
totrte.coralui2
. Bijvoorbeeld na het bedekken van het knooppunt/libs/mcm/campaign/components/touch-ui/clientlibs/rte
krachtens/apps
, wijzigt u de afhankelijkheid ervanrte.coralui3
totrte.coralui2
. -
Het knooppunt bedekken
cq/ui/widgets
krachtens/apps
. De afhankelijkheid vervangencq.rte
op het knooppunt/apps/cq/ui/widgets
withcq.coralui2.rte
.
Aanvullende informatie further-information
Voor meer informatie over het vormen van RTE, zie Widget-API AEM referentie.
Met name om de beschikbare plug-ins en bijbehorende opties te zien:
-
De CQ.form.RichText biedt een formulierveld voor het bewerken van opgemaakte tekstgegevens (opgemaakte tekst). Zie Configuratieopties voor meer informatie over alle parameters die beschikbaar zijn voor het RTF-formulier.
-
De component RichText verstrekt een brede waaier van functionaliteit gebruikend stop-ins die onder worden vermeld CQ.form.rate.plugins.Plugin. Voor elke insteekmodule:
- Zie de Functies voor meer informatie over functionaliteit die kan worden ingeschakeld (of uitgeschakeld).
- Zie de Opties Config voor alle parameters beschikbaar voor gedetailleerde configuratie van de aangewezen stop-binnen.
-
Meer informatie over de Regels van de HTML voor verbindingen is ook beschikbaar.
Met de bovenstaande opties kunt u uw eigen RTE uitbreiden en aanpassen. Als u bijvoorbeeld de ankers wilt weergeven die beschikbaar zijn op de pagina wanneer u een koppeling maakt, kunt u uw eigen implementatie van de LinkPlugin
.
Bekende beperkingen known-limitations
AEM het vermogen van RTE heeft de volgende beperkingen:
-
De mogelijkheden van RTE worden gesteund slechts in AEM componentendialogen. RTE wordt niet gesteund op wizards of Stichting-vormen als Pagina-eigenschappen en Basisstructuur op interface met aanraakbediening.
-
AEM werkt niet aan 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 biedt geen ondersteuning voor inlineframe of iframe voor het insluiten van inhoud.