Konfigurera RTF-redigeraren configure-the-rich-text-editor

Med textredigeraren får författarna ett stort antal funktioner för redigering av textinnehåll. Ikoner, markeringsrutor, verktygsfält och menyer finns för WYSIWYG-textredigering.

Mer information om hur du använder RTE-funktioner för redigering finns i Använd RTF-redigerare för redigering. RTE kan konfigureras för att aktivera, inaktivera och utöka de funktioner som är tillgängliga i redigeringskomponenterna. Följande arbetsflöde visar den rekommenderade ordningen för att slutföra RTE-konfigurationsuppgifterna i Experience Manager.

Bild: Stegen för att lära dig att konfigurera RTE

Förstå användargränssnittet med pekskärm och det klassiska användargränssnittet understand-touch-enabled-ui-and-classic-ui

Det användargränssnitt som har stöd för pekfunktioner är standardgränssnittet för Experience Manager. Adobe introducerade ett pekaktiverat användargränssnitt med responsiv design för redigeringsmiljön. Det användargränssnitt som har stöd för pekskärm är utformat för enheter med pekskärm och stationära datorer. Gränssnittet skiljer sig avsevärt från det ursprungliga klassiska gränssnittet.

Figur: Verktygsfältet för textredigeraren i det beröringsaktiverade gränssnittet

Figur: Verktygsfältet RTF-redigerare i det klassiska användargränssnittet

Olika redigeringslägen 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 inline-editing

När innehållet öppnas (med ett långsamt dubbelklick) kan det redigeras på sidan. Ett kompakt verktygsfält med mycket grundläggande alternativ visas.

Bild: Inline-redigering med grundläggande verktygsfält i det beröringsaktiverade användargränssnittet

I det klassiska användargränssnittet går det att redigera textbundet material med en långsam dubbelklickning och en orange kontur markerar innehållet. Om Innehållssökning är öppet visas ett verktygsfält med tillgängliga alternativ för RTF-formatering högst upp i fönstret. Om Innehållssökning inte är öppet visas inte formateringsalternativen och du kan bara göra grundläggande textredigeringar.

Helskärmsredigering 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å i 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 i det beröringsaktiverade gränssnittet

Dialogruteredigering 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 i användargränssnittet som har stöd för pekfunktioner

Figur: Dialogrutan i det klassiska användargränssnittet som innehåller ett detaljerat verktygsfält för redigering

Om RTE-plugin-program och associerade funktioner aboutplugins

Funktionerna är tillgängliga via ett antal plugin-program, var och en med:

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:

Förstå konfigurationssökvägar och -platser understand-the-configuration-paths-and-locations

läget för RTE-redigering (och användargränssnittet) som du anger för författarna avgör platsen för konfigurationsinformationen när du aktiverar RTE-plugin-program:

Konfigurera följande egenskaper som gäller i redigeringsläget för dialogrutor endast i Touch-gränssnittet:

Om RTE används i dialogrutan med pekfunktioner är det obligatoriskt att ange egenskapen useFixedInlineToolbar till true för att undvika problem.

Anpassa redigering på plats customizing-in-place-editing

Du kan definiera på vilken HTML-väljare textredigeraren ska starta genom att konfigurera följande egenskaper:

Motsvarande egenskap för dialogläge är name.

Aktivera RTE-funktioner genom att aktivera plugin-program 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.

Exempel: Hämta den här exempelkonfigurationen som visar hur du konfigurerar RTE. I det här paketet är alla funktioner aktiverade.

Verktygsfältet Konfigurera RTE dialogfullscreen

I AEM kan du konfigurera gränssnittet för textredigeraren 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 textbundet läge och helskärmsläge. Verktygsfältsegenskapen används för att ange knapparna i verktygsfältet.

Om till exempel själva knappen är en funktion (till exempel Bold) anges den som PluginName#FeatureName (till exempel links#modifylink).

Om knappen är en pekare (som innehåller vissa funktioner i ett plugin-program) anges den som #PluginName (till exempel #format).

Avgränsare (|) mellan en grupp knappar kan anges med -.

Popup-noden under infogat läge eller helskärmsläge innehåller en lista över de poseringar som används. Varje underordnad nod under popopovers-noden 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 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.

Du kan till exempel se dokumentationen för textkärnkomponenten.

Anpassa mappningen mellan verktygsfältsikoner och kommandon 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.

Nedan finns ett exempelfragment som mappar kommandot Fet 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>

Växla till CoralUI 2 Rich Text Editor switch-to-coralui-rich-text-editor

På en sida kan du antingen inkludera CoralUI 2 RTE clientlib eller CoralUI 3 RTE clientlib. Som standard innehåller textredigeraren klienten CoralUI 3 RTE. Utför följande steg för att växla till CoralUI 2 RTE.

Ytterligare information further-information

Mer information om hur du konfigurerar RTE finns i AEM Widget API -referensen.

Du kan särskilt se vilka plugin-program och relaterade alternativ som är tillgängliga:

Dessa kan användas för att utöka och anpassa din egen RTE. Om du till exempel vill lista de ankare som är tillgängliga på sidan när du skapar en länk kan du ange din egen implementering av LinkPlugin.

Kända begränsningar known-limitations

AEM RTE-kapacitet har följande begränsningar:

God praxis och tips best-practices-and-tips

Felsöka vanliga problem med RTE troubleshoot-issues-with-aem-rich-text-editor

Markera flera tabellceller?

Om du vill markera flera celler i en tabell trycker du på Ctrl eller Cmd och klickar sedan på tabellcellerna en i taget.

Utför nu en åtgärd på markeringen, säg att du har angett egenskaperna för de markerade cellerna.

Hyperlänkar försvinner när du redigerar en komponent med knappen Konfigurera

Lägg till en hyperlänk i en textkomponent genom att redigera den med knappen Konfigurera. Du kan förlora hyperlänken när du redigerar den igen och validerar hyperlänken för andra gången.

Du kan lösa det genom att klicka i textkomponenten när redigeringsdialogrutan visas andra gången och sedan köra länkverifieringen.

Problemet åtgärdas i AEM 6.3 och senare.

Innehåll i HTML som lagts till i källredigeringsläge förloras

Lägg inte till en XSS-benägenhet HTML. AEM, och inte RTE, kan ta bort en del HTML-innehåll som följer XSS-antisamitetsreglerna.

Om du vill verifiera att det inklistrade HTML har sparats kontrollerar du det sparade innehållet i CRXDE (i innehållsnoden).

Om HTML inte har sparats måste det ha tagits bort av RTE eftersom det inte följer RTE:s regler.

Om den sparas i CRXDE men inte återges på sidan (för att kontrollera återgivningen, se sidans förhandsvisning) tas den bort av AEM XSS-regler.

Flerfältskomponenten fungerar inte som förväntat

Om du vill skapa en komponent för flera fält använder du bara CoralUI 3. Använd inte komponentdialogrutor för CoralUI 2.

Verifiera också att koden och nodstrukturen för implementering av flera fält är korrekta.

Konfiguration som är tillgänglig för administratörer är inte tillgänglig för författare

Om uppdateringarna av gränssnittskonfigurationerna återspeglas för administratörer men inte för författarkonton kontrollerar du att konfigurationsnoden inte har namnet config. Använd egenskapen configPath.