Tekstcomponent (v1)

De component Text is een component voor tekstbewerking en -compositie met tekstopmaak die op locatie kan worden bewerkt.

Gebruik

De component Text biedt een robuuste teksteditor met tekstopmaak die het mogelijk maakt tekst eenvoudig te bewerken in een vereenvoudigde, inline editor en in een volledige schermopmaak.

Het bewerkingsdialoogvenster bevat inline bewerking met beperkte opties met volledige functionaliteit beschikbaar in het dialoogvenster Volledig scherm bewerken. Met behulp van het ontwerpdialoogvenster kunnen opties voor tekstopmaak, zoals koppen, speciale tekens en alineastijlen, worden geconfigureerd voor de sjabloon voor de auteur van de inhoud.

Versie en compatibiliteit

In dit document wordt versie 1 van de tekstcomponent beschreven, die oorspronkelijk is geïntroduceerd met versie 1.0.0 van de kerncomponenten met AEM 6.3.

In de volgende tabel wordt de compatibiliteit van v1 van de tekstcomponent weergegeven.

AEM Tekstcomponent v1
6,3 Compatibel
6,4 Compatibel
LET OP

In dit document wordt versie 1 van de tekstcomponent beschreven.

Zie het document Tekstcomponent voor meer informatie over de huidige versie van de tekstcomponent.

Uitvoer van voorbeeldcomponent

Het volgende voorbeeld wordt genomen uit We.Retail.

Schermafbeelding

HTML

<div class="cmp cmp-text aem-GridColumn aem-GridColumn--default--12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor ante a tortor volutpat maximus. Donec eu porta eros. Aenean sit amet eleifend arcu, eu vestibulum magna. Fusce eget nisi tincidunt, tristique felis quis, tincidunt est. Aliquam consequat aliquam quam non eleifend. Phasellus ut magna luctus, aliquam risus eget, fermentum augue. Aliquam lobortis accumsan magna, quis efficitur enim dictum eu. Pellentesque iaculis felis eget felis commodo, non euismod dolor euismod. Quisque nec arcu rutrum, mollis tortor non, sollicitudin odio. Sed dictum nulla mauris, eu pretium dui vulputate a. Maecenas lacus massa, egestas vitae tincidunt eu, interdum et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend ex lacus, in consectetur nunc interdum et. Donec interdum mi vitae dolor pretium mattis. In quis arcu sapien. Phasellus at metus vitae nisi tincidunt varius.<br />
</p>
</div>

JSON

"text": {
              "columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
              "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porttitor ante a tortor volutpat maximus. Donec eu porta eros. Aenean sit amet eleifend arcu, eu vestibulum magna. Fusce eget nisi tincidunt, tristique felis quis, tincidunt est. Aliquam consequat aliquam quam non eleifend. Phasellus ut magna luctus, aliquam risus eget, fermentum augue. Aliquam lobortis accumsan magna, quis efficitur enim dictum eu. Pellentesque iaculis felis eget felis commodo, non euismod dolor euismod. Quisque nec arcu rutrum, mollis tortor non, sollicitudin odio. Sed dictum nulla mauris, eu pretium dui vulputate a. Maecenas lacus massa, egestas vitae tincidunt eu, interdum et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend ex lacus, in consectetur nunc interdum et. Donec interdum mi vitae dolor pretium mattis. In quis arcu sapien. Phasellus at metus vitae nisi tincidunt varius.</p>\n",
              "richText": true,
              ":type": "weretail/components/content/text"
            }
OPMERKING

Voor JSON-export van de Core Components is release 1.1.0 van de Core Components vereist. Zie compatibiliteitsinformatie voor Core Components v1 voor meer informatie.

Dialoogvenster Bewerken

Het dialoogvenster Bewerken bevat de standaardgereedschappen voor tekstopmaak die de gebruiker zou verwachten bij het samenstellen van tekst.

  • Vet

    Wordt gebruikt om vette opmaak toe te passen op geselecteerde tekst of opgemaakte tekst die na de cursor wordt ingevoerd.

    Ctrl+ Bcan wordt gebruikt als een sneltoets.

  • Cursief

    Wordt gebruikt om cursieve opmaak toe te passen op geselecteerde tekst of om tekst die na de cursor wordt ingevoerd, cursief te maken.

    Ctrl+ Ican be used as a keyboard shortcut.

  • Onderstrepen

    Wordt gebruikt om onderstreepte opmaak toe te passen op geselecteerde tekst of onderstreepte tekst die na de cursor wordt ingevoerd.

    Ctrl+ Ucan be used as a keyboard shortcut.

  • Subscript

    Wordt gebruikt om geselecteerde tekst of tekst die na de cursor is ingevoerd, op te maken als een subscript.

  • Superscript

    Wordt gebruikt om geselecteerde tekst of tekst die na de cursor is ingevoerd, op te maken als superscript.

  • Plakken als tekst

    Hiermee plakt u alle gekopieerde tekst als onbewerkte tekst zonder opmaak.

    Wanneer u deze optie selecteert, wordt een venster geopend waarin de tekst als onbewerkte tekst zonder opmaak kan worden geplakt als een voorvertoning voordat deze in de tekst wordt ingevoegd. Accepteren door te tikken of op het vinkje te klikken, annuleren door te tikken of op de x te klikken.

  • Plakken vanuit Word

    Wanneer u deze optie selecteert, wordt een venster geopend waarin de tekst kan worden geplakt met behoud van de opmaak als voorvertoning voordat deze in de tekst wordt ingevoegd. Accepteren door te tikken of op het vinkje te klikken, annuleren door te tikken of op de x te klikken.

  • Hyperlink

    Met deze optie kunt u de geselecteerde tekst omzetten in een hyperlink of een reeds gedefinieerde koppeling wijzigen. Deze optie is alleen actief als er al tekst is geselecteerd en er een venster wordt geopend met aanvullende opties voor het instellen van de koppeling.

    • Voer de locatie in

      • Kies in het dialoogvenster Selectie openen een pad in AEM
      • Als de koppeling zich niet binnen AEM bevindt, voert u de absolute URL in (niet-absolute paden worden geïnterpreteerd als relatief ten opzichte van AEM)
    • Alternatieve beschrijvende tekst voor de koppeling invoeren

    • Koppelingsgedrag selecteren

      • Doel
      • Zelfde tabblad
      • Nieuw tabblad
      • Bovenliggend frame
      • Bovenste frame

    Tik of klik op het vinkje om de koppeling toe te passen of klik op de x om te annuleren.

  • Ontkoppelen

    Gebruik deze optie om een koppeling te verwijderen die al op de geselecteerde tekst is toegepast. Deze optie is alleen actief als er al een koppeling is geselecteerd.

  • Zoeken

    Gebruik deze optie om de tekst te zoeken op instanties van een opgegeven tekstreeks. Als u deze optie selecteert, wordt een venster geopend waarin u de zoekopties kunt opgeven.

    Voer de tekst in waarvoor u wilt zoeken en tikken of klik op Zoeken om de zoekopdracht te starten. Tik of klik op de x om te annuleren.

    Als u een nauwkeurige gelijke volgens het geval wilt doen, selecteer de optie Kwestie alvorens het onderzoek te beginnen.

    Als een overeenkomst wordt gevonden, wordt deze gemarkeerd en wordt het zoekdialoogvenster gedimd weergegeven. Tik of klik nogmaals op de knop Zoeken in het grijze dialoogvenster om naar de volgende instantie te zoeken.

    Als er geen andere exemplaren worden gevonden, wordt een bericht weergegeven en wordt de zoekopdracht opnieuw gestart vanaf het begin van de tekst.

  • Replace

    Gebruik deze optie om de tekst te zoeken op instanties van een opgegeven tekenreeks en de overeenkomsten te vervangen door een andere tekenreeks. Als u deze optie selecteert, wordt een venster geopend waarin u de opties voor zoeken en vervangen kunt opgeven.

    Voer de tekst in waarnaar u wilt zoeken en de tekst waarmee u deze wilt vervangen.

    Tik of klik op Zoeken om te beginnen met zoeken. Klik of tik op de x om te annuleren.

    Als u een nauwkeurige gelijke volgens het geval wilt doen, selecteer de optie Kwestie alvorens het onderzoek te beginnen.

    Als een overeenkomst wordt gevonden, wordt deze gemarkeerd en wordt het zoekdialoogvenster gedimd weergegeven. Klik nogmaals op de knop Zoeken in het grijze dialoogvenster om naar de volgende instantie te zoeken of selecteer de knop Vervangen om de gemarkeerde, overeenkomende tekst te vervangen. De knop Vervangen is alleen actief als er een overeenkomst is gemaakt.

    Selecteer Alles vervangen om alle instanties van de tekst tegelijk te vervangen.

  • Tekst links uitlijnen

    Wordt gebruikt om de tekst uit te lijnen met de linkermarge.

  • Tekst centreren

    Wordt gebruikt om de tekst te centreren.

  • Tekst rechts uitlijnen

    Wordt gebruikt om de tekst uit te lijnen met de rechtermarge.

  • Opsommingsteken

    Wordt gebruikt om de geselecteerde tekst op te maken als een lijst met opsommingstekens of om te beginnen met het invoegen van een lijst met opsommingstekens na de cursor.

    Tik of klik nogmaals op de knop Opsommingsteken of voer twee regeleinden in om een lijst met opsommingstekens te beëindigen.

  • Genummerd

    Hiermee maakt u de geselecteerde tekst op als een genummerde lijst of begint u met het invoegen van een genummerde lijst na de cursor.

    Tik of klik nogmaals op de knop Genummerd of voer twee regeleinden in om een genummerde lijst te beëindigen.

  • Uitspringen

    Wordt gebruikt om het inspringingsniveau te verlagen van de geselecteerde tekst of tekst die na de cursor wordt ingevoerd.

    Alleen actief als de geselecteerde tekst of positie van de cursor al is ingesprongen.

  • Inspringen

    Wordt gebruikt om het inspringingsniveau te verhogen van de geselecteerde tekst of tekst die na de cursor wordt ingevoerd.

  • Tabel

    Wordt gebruikt om een tabel in de tekst in te voegen. Als u deze optie selecteert, wordt een venster geopend waarin u de details van de tabel kunt opgeven.

    • Kolommen - Het aantal kolommen van de tabel (vereist)

    • Rijen - Het aantal rijen van de tabel (vereist)

    • Breedte - De breedte van de tabel

    • Hoogte - De hoogte van de tabel

    • Celopvulling- De ruimte rondom de celinhoud

    • Celafstand : de ruimte tussen cellen

    • Rand - Het gewicht van de randlijnen van de tabel

    • Indien voor de koptekst van de tabel:

      • De eerste rij moet worden gebruikt
      • De eerste kolom moet worden gebruikt
      • De eerste rij en de eerste kolom moeten worden gebruikt
      • Of er moet geen header worden gebruikt.
    • Bijschrift - Het bijschrift van de tabel

  • Spellingcontrole

    Wordt gebruikt om de spelling van de tekstinhoud te controleren. Mogelijke spelfouten worden onderstreept met gebroken, rode lijnen.

  • Speciale tekens

    Wordt gebruikt om speciale tekens in te voegen in de tekst. Als u deze optie selecteert, wordt een venster geopend waarin de beschikbare tekens worden weergegeven.

    Tik op het gewenste teken of klik op het gewenste teken om het na de cursor in de tekst in te voegen. U kunt meerdere tekens invoegen. Tik of klik op de x om het selectievenster te sluiten.

  • Bron bewerken

    Wordt gebruikt om de HTML-bron van de tekst weer te geven en te wijzigen.

    Tik of klik op het pictogram Bron bewerken om de inhoud van de tekst vanuit de opgemaakte weergave te wijzigen en de onbewerkte HTML weer te geven. In deze modus zijn alle andere opmaakopties uitgeschakeld. Tik of klik nogmaals op het pictogram Bron bewerken om terug te keren naar de opgemaakte weergave.

    LET OP

    Zoals altijd het geval met toegang tot ruwe HTML, moet de voorzichtigheid worden uitgeoefend wanneer het gebruiken van Bron geeft optie uit!

    HTML die is ingevoerd via Source Edit wordt gescand op XSS-risico's en alle scripts die worden ingevoegd, worden verwijderd en worden niet weergegeven op de resulterende pagina. Maar misvormde HTML die is ingevoerd in Source Edit kan de sjabloon voor de pagina onderbreken, wat resulteert in onverwachte opmaak of het onbruikbaar maken van de resulterende pagina.

  • Alineaopmaak

    Wordt gebruikt om alineaopmaak toe te passen op de geselecteerde tekst of op tekst die na de cursor wordt ingevoegd. Als u deze optie selecteert, wordt een vervolgkeuzelijst geopend waarin de alineaopmaak wordt geselecteerd.

De tekstcomponent kan ook in regels worden bewerkt, maar vanwege ruimtebeperkingen zijn niet alle opmaakopties in regels beschikbaar. Schakel over naar de modus Volledig scherm om alle opties weer te geven.

Ontwerpdialoogvenster

In het ontwerpdialoogvenster kan de sjabloonauteur definiëren welke tekstopmaakopties beschikbaar zijn voor de auteurs van de inhoud.

Functies

De volgende functies kunnen voor de component worden geactiveerd of gedeactiveerd.

  • Onbewerkte tekst plakken
  • Plakken van woord
  • Zoeken en vervangen
  • Spellingcontrole
  • Bronbewerking

Opmaak

De volgende opmaakopties kunnen voor de component worden geactiveerd of gedeactiveerd.

  • Tabel
  • Lijsten
  • Uitlijning
  • Vet, cursief, onderstrepen
  • Koppelingen
  • Subscript/superscript

Alineastijlen

Alineastijlen kunnen voor de component worden geactiveerd of gedeactiveerd. Als deze optie is geactiveerd, kunnen de toegestane indelingen worden gedefinieerd.

  • Tik of klik op de knop Toevoegen om een nieuwe stijl in te voegen.
  • Voer de code in van de stijl en een beschrijving die worden weergegeven in het dialoogvenster Bewerken.
  • Als u een stijltik wilt verwijderen of op de knop Delete wilt klikken.
  • Tik of klik op de handgrepen om de volgorde van de indelingen te wijzigen.

Speciale tekens

De optie voor het invoegen van speciale tekens kan voor de component worden geactiveerd of gedeactiveerd. Als deze optie is geactiveerd, kunnen de toegestane tekens worden gedefinieerd.

  • Tik of klik op de knop Toevoegen om een nieuw teken in te voegen.
  • Voer de HTML-code in van het teken en een beschrijving die wordt weergegeven in het dialoogvenster Bewerken.
  • Als u een tikteken wilt verwijderen of op de knop Verwijderen wilt klikken.
  • Als u de volgorde van de tekens wilt wijzigen, tikt u of klikt u en sleept u de handgrepen.

Technische details

De recentste technische documentatie over de Component van de Tekst kan op GitHub worden gevonden.

Het volledige kerncomponentenproject kan van GitHub worden gedownload.

Meer details over het ontwikkelen van de Componenten van de Kern kunnen in de ontwikkelaarsdocumentatie van de Componenten van de Kern worden gevonden.

Op deze pagina