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 Redacteur van de Tekst van het Gebruik Rich voor creatie. 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.

te vormen

Cijfer: Reeks stappen leren hoe te om RTE te vormen

Interface met aanraakbediening en klassieke gebruikersinterface understand-touch-enabled-ui-and-classic-ui

De interface met aanraakbediening is de standaardgebruikersinterface voor Experience Managers. Adobe introduceerde Touch-Toegelaten UI met ontvankelijk ontwerpvoor auteursmilieu. De interface voor touch-apparaten is ontworpen voor touch- en desktopapparaten. De interface verschilt aanzienlijk van de oorspronkelijke klassieke UI.

Cijfer: De rijke toolbar van de Redacteur van de Tekst in touch-Toegelaten UI

Figuur: De rijke toolbar van de Redacteur van de Tekst in Klassieke UI

Verschillende bewerkingsmodi editingmodes

Auteurs kunnen tekstinhoud in Experience Manager 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 dubbelklikken), kan deze op de pagina worden bewerkt. Er wordt een compacte werkbalk weergegeven met zeer basisopties.

Cijfer: Het gealigneerde uitgeven met basistoolbar in touch-Toegelaten UI

In de klassieke gebruikersinterface kunt u langzaam dubbelklikken op de component om inline te bewerken en wordt de inhoud gemarkeerd met een oranje omtrek. 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

Componenten van Experience Managers 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. Het kan worden geopend door , van de compacte toolbar te klikken wanneer het gebruiken van de gealigneerde het uitgeven wijze.

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.

Cijfer: De gedetailleerde toolbar van RTE wanneer het uitgeven op volledig het schermwijze in aanraking-Toegelaten UI

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.

Cijfer: De het uitgeven van de dialoog wijze in aanraking-Toegelaten UI

bevat

Cijfer: De doos van de dialoog in Klassieke UI die gedetailleerde toolbar voor het uitgeven bevat

Informatie over RTE-plug-ins en de bijbehorende functies aboutplugins

De functionaliteit wordt beschikbaar gesteld via een reeks plug-ins, elk met:

De basisfuncties van de RTE worden geactiveerd of gedeactiveerd door de waarde van de eigenschap features op een knooppunt dat specifiek is voor de juiste insteekmodule.

In de volgende tabel worden de huidige plug-ins weergegeven:

Begrijp de configuratiewegen en plaatsen understand-the-configuration-paths-and-locations

De wijze van het uitgeven van RTE (en UI)dat u voor uw auteurs verstrekt besluit de plaats voor de configuratiedetails wanneer u het activeren van de stop-ins van RTEbent:

Configureer de volgende eigenschappen die alleen van toepassing zijn in de bewerkingsmodus Dialoogvenster in Touch UI:

Als RTE wordt gebruikt in het dialoogvenster met aanraakbediening, is het verplicht de eigenschap useFixedInlineToolbar in te stellen op true 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:

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.

Steekproef: Download deze steekproefconfiguratiedie illustreert hoe te om RTE te vormen. In dit pakket zijn alle functies ingeschakeld.

RTE-werkbalk configureren dialogfullscreen

Met AEM 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.

Gebruik de volgende voorbeeldconfiguratie om de werkbalk voor dialogFullScreen te configureren.

<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 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 deze 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 kunnen worden opgegeven met - .

Het pop-upknooppunt onder de modus Inline of Volledig scherm bevat een lijst met de popovers die worden gebruikt. Elk onderliggend knooppunt onder het knooppunt 'popovers' krijgt een naam na de insteekmodule (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. Het beleid van de inhoud bepaalt de ontwerpeigenschappen van een component wanneer gebruikt als deel van een editable malplaatje. 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.

Als voorbeeld, kunt u de documentatie van de Component van de Kern van de Tekstzien.

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.

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.

Aanvullende informatie further-information

Voor meer informatie over het vormen van RTE, zie AEM Widget APIverwijzing.

Met name om de beschikbare plug-ins en bijbehorende opties te zien:

Deze kunnen worden gebruikt om uw eigen RTE uit te breiden en aan te passen. 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 koppeling LinkPlugin opgeven.

Bekende beperkingen known-limitations

AEM het vermogen van RTE heeft de volgende beperkingen:

Tips en trucs best-practices-and-tips

Veelvoorkomende problemen met RTE oplossen troubleshoot-issues-with-aem-rich-text-editor

hoe te om veelvoudige lijstcellen te selecteren?

Als u meerdere cellen in een tabel wilt selecteren, drukt u op Ctrl of Cmd en klikt u vervolgens één voor één op de tabelcellen.

Voer nu een bewerking uit op de selectie en stel bijvoorbeeld de eigenschappen van de geselecteerde cellen in.

de Hyperlinks worden verloren wanneer het uitgeven van een component gebruikend Configure knoop

Voeg een hyperlink in een tekstcomponent toe door het uit te geven gebruikend de Configure knoop. U kunt de hyperlink verliezen wanneer u deze opnieuw bewerkt en de hyperlink voor de tweede keer valideert.

Als tussenoplossing kunt u in de tekstcomponent klikken wanneer het dialoogvenster voor bewerken de tweede keer wordt weergegeven en vervolgens de koppelingsvalidatie uitvoeren.

Dit probleem is opgelost in AEM 6.3 en hoger.

HTML inhoud die op bron-geeft wijze wordt toegevoegd wordt verloren

Voeg geen XSS-prone HTML toe. AEM, en niet RTE, kunnen sommige inhoud van HTML verwijderen om aan de XSS antisamy regels te voldoen.

Controleer de opgeslagen inhoud in CRXDE (in het inhoudsknooppunt) om te controleren of de geplakte HTML is opgeslagen.

Als niet bewaard, moet de HTML door RTE zijn verwijderd aangezien het niet aan de regels van RTE volgde.

Als bewaard in CRXDE maar niet teruggegeven op de Pagina (om het teruggeven te controleren, zie de voorproef van de pagina 🔗, wordt het verwijderd door AEM regels XSS.

Multifield component werkt niet zoals verwacht

Als u een component met meerdere velden wilt maken, gebruikt u uitsluitend CoralUI 3. Gebruik geen dialoogvensters met CoralUI 2-componenten.

Controleer ook of de implementatiecode en de knooppuntstructuur voor meerdere velden correct zijn.

Configuratie beschikbaar aan beheerders is niet beschikbaar aan auteurs

Als de updates van interfaceconfiguraties voor beheerders maar niet voor auteursrekeningen worden weerspiegeld, zorg ervoor dat de configuratieknoopknoop niet config wordt genoemd. Gebruik het configPath bezit.