Konfigurera RTF-redigeraren

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änd RTE för redigering webbinnehåll.

De RTE-begrepp och -steg som krävs för att konfigurera den listas nedan.

Förstå RTE-begrepp Aktivera nödvändiga funktioner Konfigurera enskilda funktioner
Förstå gränssnittet Förstå och ange konfigurationsplatser Konfigurera plugin-program
Olika typer av redigeringslägen Aktivera plugin-program Ange funktionsegenskaper
Om plugin-program Konfigurera RTE-verktygsfält Konfigurera inklistringslägen

Förstå användargränssnittet som är tillgängligt för författare

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.

Verktygsfältet för textredigeraren

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 finns som standard i Experience Manager. Utvecklare kan anpassa Experience Manager om du vill lägga till fler redigeringsalternativ.

Olika redigeringslägen

Författare kan skapa och redigera textinnehåll i Experience Manager med 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.

Redigeringsläge Redigeringsområde Rekommenderade funktioner som ska aktiveras
Textbunden On-place editing for quick, minor edits; Formatera utan att öppna en dialogruta. Minimala RTE-funktioner.
RTE i helskärmsläge Täcker hela sidan. Alla nödvändiga RTE-funktioner.
Dialog Dialogrutan visas ovanpå sidinnehållet men täcker inte hela sidan. Aktivera funktioner i jakt.
Dialogruta i helskärmsläge Samma som helskärmsläge, innehåller fält i dialogrutan vid sidan om RTE. Alla nödvändiga RTE-funktioner.
OBSERVERA

Funktionen för källredigering är inte tillgänglig i infogat redigeringsläge. Du kan inte dra bilder i helskärmsläge. Alla andra funktioner fungerar i alla lägen.

Inline-redigering

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.

Inline-redigering med grundläggande alternativ i verktygsfältet

Bild: Inline-redigering med grundläggande alternativ i verktygsfältet.

Redigering i helskärmsläge

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 Ikon för att öppna RTE i helskärmslägefrå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.

Det detaljerade verktygsfältet för textredigering när du redigerar i helskärmsläge

Bild: Det detaljerade verktygsfältet för textredigering när du redigerar i helskärmsläge.

Dialogruteredigering

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.

Dialogruteredigeringsläge

Bild: Dialogruteredigeringsläge.

Om RTE-plugin-program och associerade funktioner

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

  • A 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 textredigeringsprojektet aktiveras, eller inaktiveras, av värdet på features på en nod som är specifik för rätt plugin-program.

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 aktivera ett plugin-program.
  • Tillåtna värden för features -egenskap.
  • En beskrivning av de funktioner som tillhandahålls av plugin-programmet.
Plug-in-ID funktioner Beskrivning
redigera cut, copy, paste-default, paste-plaintext, paste-wordhtml Klipp ut, kopiera och, de tre inklistringslägena.
findreplace find, replace Sök och ersätt.
format bold, italic, underline Grundläggande textformatering.
bild image Grundläggande bildstöd (dra från innehåll eller Innehållssökning). Beroende på webbläsaren har stödet olika beteenden för författare
tangenter - Information om hur du definierar det här värdet finns i tabbstorlek.
justera justifyleft, justifycenter, justifyright Styckejustering.
länkar modifylink, unlink, anchor Hyperlänkar och ankarpunkter.
listor ordered, unordered, indent, outdent Detta plugin-program kontrollerar båda indrag och listor; inklusive kapslade listor.
felverktyg specialchars, sourceedit Med andra verktyg kan man skriva specialtecken eller redigera HTML-källan. Du kan också lägga till en intervall med specialtecken om du vill definiera en egen lista.
Paraformat paraformat Standardstyckeformaten är Stycke, Rubrik 1, Rubrik 2 och Rubrik 3 (<p>, <h1>, <h2>och <h3>). Du kan lägga till fler styckeformat eller utöka listan.
stavningskontroll checktext Språkmedveten stavningskontroll.
stilar styles Stöd för formatering med en CSS-klass. Lägga till nya textformat om du vill lägga till (eller utöka) egna format för användning med text.
nedsänkt subscript, superscript Tillägg till de grundläggande formaten, med underskript och superskript.
tabell table, removetable, insertrow, removerow, insertcolumn, removecolumn, cellprops, mergecells, splitcell, selectrow, selectcolumns Se konfigurera tabellformat om du vill lägga till egna format för hela tabeller eller enskilda celler.
ångra undo, redo Historikstorlek för ångra och göra om åtgärder.
OBSERVERA

Plugin-programmet för helskärmsläge stöds inte i dialogruteläge. Användning av dialogFullScreen inställning för att konfigurera verktygsfältet för helskärmsläge.

Förstå konfigurationssökvägar och -platser

The RTE-redigeringsläge och gränssnitt som du anger för författarna bestämmer var konfigurationsinformationen ska placeras när du är aktivera 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 för helskärm: cq:dialog.
OBSERVERA

Namnge inte noden under cq:inplaceEditing as config. På cq:inplaceEditing -nod definierar du följande egenskaper:

  • Namn: configPath
  • Typ: String
  • Värde: sökväg till noden som innehåller den faktiska konfigurationen

Namnge inte RTE-konfigurationsnoden som config. I annat fall 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 ange att verktygsfältet RTE ska vara fast i stället för flytande. Ange den här booleska egenskapen som är definierad på RTE-noden med sling:resourceType= cq/gui/components/authoring/dialog/richtext till True. När den här egenskapen är inställd på True, är textredigeringen startad på foundation-contentloaded -händelse. Du kan förhindra detta genom att ange egenskapen customStart till True och aktivera rte-start -händelse för att starta RTE-redigering. När den här egenskapen är true, RTE startar inte vid klickning och detta är standardbeteendet.

  • customStart: Ställ in den här booleska egenskapen som definierats på RTE-noden på Trueför att styra när RTE ska startas genom att händelsen utlöses rte-start.

  • rte-start: Utlös den här händelsen på contenteditable-div av RTE, när redigering av RTE ska börja. Fungerar bara om customStart har angetts till true.

När textredigeraren används i dialogrutan med pekfunktioner anger du egenskapen useFixedInlineToolbar till true för att undvika problem.

Aktivera RTE-funktioner genom att aktivera plugin-program

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 hur du aktiverar och konfigurerar RTE-plugin-program.

The Textkomponent för kärnkomponenter I 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 grundkomponentutvecklare.

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

Experience Manager I 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.

Konfigurera verktygsfältet för dialogFullScreenanvänder du följande exempelkonfiguration.

<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 till exempel själva alternativet är en funktion (till exempel Bold), anges som PluginName#FeatureName (t.ex. links#modifylink).

Om alternativet är ett popup-fönster (som innehåller vissa funktioner i ett plugin-program) anges det som #PluginName (t.ex. #format).

Avgränsare (|) mellan en grupp 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 popovers 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

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 RTE 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 Dokumentation för komponenten Text Core.

Anpassa mappningen mellan verktygsfältsikoner och kommandon

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.

  1. Skapa en nod med namnet icons under uiSettings/cui.

  2. Skapa noder för enskilda ikoner under den.

  3. På varje enskild ikonnod anger du en korallikon och ett kommando som ska kopplas till ikonen.

Nedan finns ett exempelfragment som mappar kommandot Bold till korallikonen med namnet 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

Experience Manager RTE-kapacitet har följande begränsningar:

  • RTE-funktioner stöds endast i Experience Manager komponentdialogrutor. RTE stöds inte i guider eller Foundation-formulär.

  • Experience Manager fungerar inte på hybridenheter.

  • Namnge inte RTE-konfigurationsnoden config. I annat fall gäller RTE-konfigurationen bara för administratörerna och inte för användarna i gruppen content-author.

  • RTE stöder inte inbäddning av innehåll i en textbunden ram eller en iframe.

God praxis och tips

  • Aktivera bara plugin-program utan popup-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-programmen med större popup-fönster, till exempel Paste plugin-program, endast i helskärmsläge eller 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 ska du använda rte.coralui3 bibliotek.

På denna sida