The text editor can be found in various places within Sitebox. Many modules have a tab with a text editor. Consider, for example, the 'Content' tab within the 'News', 'Articles' and also 'Blogs' modules. You can also sometimes find the text editor in the 'Description' tab, such as in the 'Events' module.

Op deze pagina:


Where can I find the text editor?

The text editor can be found in various places within Sitebox. Many modules have a tab with a text editor. Consider, for example, the 'Content' tab within the 'News', 'Articles' and also 'Blogs' modules. You can also sometimes find the text editor in the 'Description' tab, such as in the 'Events' module.



Ook vind je de tekst editor in de pagina editor. Wanneer je een webpagina wilt wijzigen, selecteer je deze pagina. Klik vervolgens aan de rechterzijde van de pagina op het icoon voor  'wijzigen':



De pagina editor verschijnt. Hierin kun je verschillende soorten content toevoegen met de invoegbalk.



De teksteditor vind je door te klikken op de actieknop  'Tekst':



WYSIWYG

De teksteditor in Sitebox is een WYSIWYG editor. Dit staat voor 'What you see is what you get'. Dat wil zeggen dat je in principe in de editor al kan zien hoe je content er op de webpagina uitziet.


Toch is dit niet helemaal waar voor de teksteditor in Sitebox. Het geldt namelijk alleen voor de styling die je met de editor toepast.


De websites die gemaakt worden door CARE werken met styling die automatisch wordt toegepast op alle webpagina's. Dit gebeurt buiten de teksteditor om. Daarom kan het zo zijn dat je in de teksteditor iets anders ziet dat op de website. Ook betekent dit dat je niet alle styling in de teksteditor hoeft toe te voegen.


In de volgende voorbeelden zie je hoe wat je ziet in de teksteditor kan afwijken van wat je ziet op de webpagina:


  1. Styling is niet zichtbaar in de editor, wel op de website:

    In dit voorbeeld kun je zien hoe de styling van de kopjes automatisch wordt aangepast op de webpagina. Er is gebruik gemaakt van Kop 1 en Kop 2 in de editor, maar ze blijven daar zwart. Op de webpagina zijn ze ineens in een ander lettertype en een andere kleur.
  2. Styling wel zichtbaar in de editor, niet op de website:

    In dit voorbeeld kun je zien hoe in de editor Kop 2 een andere kleur heeft gekregen. Daarnaast heeft de normale tekst een gekleurde achtergrond. Geen van deze aanpassingen uit de editor zijn zichtbaar op de webpagina.

    Alle opties in de teksteditor die op de webpagina zichtbaar worden, zijn opgenomen in de styling van de webpagina. Als een optie in de teksteditor niet is opgenomen in de styling van de webpagina, wordt deze niet zichtbaar. Je kan het vergelijken met het drukken op het lichtknopje, terwijl er geen peertje in de lamp zit.

    We kunnen de styling zo aanpassen dat deze wijzigingen wel zichtbaar zijn op de webpagina, maar soms wordt hier expres voor gekozen. Het kan bijvoorbeeld zo zijn dat je webpagina aan richtlijnen moet voldoen. In dat geval worden deze styling opties uit de editor expres weggelaten uit de styling, zodat je niet van deze richtlijnen kan afwijken.

    Soms wordt ervoor gekozen bepaalde opties van de teksteditor weg te laten uit te styling zodat het uiterlijk van de webpagina uniform is.

    Het kan ook zo zijn dat ervoor gekozen is deze styling weg te laten omdat het geen onderdeel was van de initiële opdracht. Ieder stukje styling kost tijd om te maken. Door opties waar niet om is gevraagd weg te laten uit de styling, wordt tijd en daarmee geld bespaard. Je hoeft dus niet te betalen voor opties waar je geen gebruik van maakt.

    Omdat de teksteditor een standaard compleet onderdeel is van Sitebox, kan deze niet aangepast worden. Daarom zie je de functies die niet zichtbaar worden op de webpagina toch in de teksteditor.

    Would you like to change the styling of your webpage? Please contact helpdesk@care.nl or use our contact form.


The standard options

De teksteditor in Sitebox heeft een aantal standaardopties. Deze zullen hieronder per optie worden besproken.

Attention! In order for the changes to be visible on the web page, the text editor options must be included in the styling. Would you like to change the styling of your webpage? Please contact helpdesk@care.nl or use our contact form.



Klik op een van de cijfers om meer te lezen over deze specifieke opties in de teksteditor:


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18





  1. HTML-editor. Content in de WYSIWYG editor wordt omgezet in HTML-code. Met de HTML-editor kun je deze bekijken en bewerken. Vergeet niet de editor af te sluiten voor je op 'Invoegen' klikt. De editor vult dan automatisch missende code aan.



  2. Toon blokken. Wanneer je hierop klikt zie je de blokken zoals deze in je tekst worden gebruikt. Hierbij wordt ook aangegeven wanneer er gebruik wordt gemaakt van een specifieke soort kop.



  3. Knippen. Om te knippen kun je ook altijd Ctr+C gebruiken.

     Kopiëren. Om te kopiëren kun je ook altijd Ctr+C gebruiken.

     Plakken (Platte tekst). Om te plakken kun je ook altijd gebruik maken van Ctr+V. Bij het plakken in de teksteditor wordt de opmaak van de geplakte content verwijderd.



  4. Ongedaan maken.

     Opnieuw uitvoeren.

    Ongedaan maken en opnieuw uitvoeren werken alleen in de sessie waarin je werkt. Wanneer je op de knop 'Invoegen' of 'Wijzigen' hebt geklikt en de teksteditor opnieuw opent, start een nieuwe sessie.


  5. Zoeken. Met deze functie kun je zoeken naar een specifiek woord in de tekst.


    Er zijn een aantal zoekopties:

    Met 'Hoofdlettergevoelig' zoek je alleen woorden die dezelfde combinatie van hoofdletters en kleine letters hebben.

    Met 'Hele woord moet voorkomen' zoek je alleen hele woorden. Zoek je op het woord 'er', zullen woorden als 'ekster' en 'herkennen' worden overgeslagen.

    Met 'Doorlopend zoeken' blijf je door de zoekresultaten cirkelen. Wanneer je alle woorden in de tekst hebt gehad, begint de zoekoptie opnieuw aan het begin van de tekst met het eerste zoekresultaat.

     Vervangen. Met deze functie kun je zoeken naar een specifiek woord in de tekst en dit woord vervangen met een ander woord.


    Er zijn een aantal zoekopties:

    Met 'Hoofdlettergevoelig' zoek je alleen woorden die dezelfde combinatie van hoofdletters en kleine letters hebben.

    Met 'Hele woord moet voorkomen' zoek je alleen hele woorden. Zoek je op het woord 'er', zullen woorden als 'ekster' en 'herkennen' worden overgeslagen.

    Met 'Doorlopend zoeken' blijf je door de zoekresultaten cirkelen. Wanneer je alle woorden in de tekst hebt gehad, begint de zoekoptie opnieuw aan het begin van de tekst met het eerste zoekresultaat.



  6.  Alles selecteren. Selecteer alles binnen de editor.

     Opmaak verwijderen. Wanneer je hierop klikt verwijder je alle opmaak uit de geselecteerde tekst. Dit geldt voor alle opmaak die met de teksteditor is toegevoegd. Niet alle opties uit de teksteditor worden gezien als opmaak. 'Opmaak verwijderen' geldt alleen voor de volgende opties:



    De opties worden teruggezet op  



  7. Link invoegen/wijzigen. Welke links je hiermee kunt toevoegen lees je in het artikel Verschillende soorten links op je webpagina.

    Link verwijderen. Wanneer je hierop klikt verdwijnt de geselecteerde link. De tekst van de link blijft wel staan.

    Interne link. Met deze optie maak je een ankerpunt in je content. Hier kun je vervolgens een link naartoe plaatsen. Met deze links ga je niet naar een andere pagina. Wel scrolt je pagina naar het ankerpunt toe.

    Interne links vind je ook terug op deze pagina. Bovenaan dit artikel kun je klikken op een van de onderwerpen op deze pagina. Je ziet dit onderwerp vervolgens bovenaan in je beeld. Wanneer je aan het einde van het onderwerp klikt op ga je weer terug naar het begin van het artikel.

    Een interne link met anker maak je op de volgende manier:

    Stap 1: Zet je cursor op de plaats in de content waar je anker moet komen en klik op 'Interne link'. Geef de interne link een unieke naam. Klik op 'Ok'.

    Stap 2: Je ziet nu in de tekst een geel anker staan.

    Stap 3: Je gaat nu een link naar het anker maken. Typ in je content de tekst die als link zichtbaar moet zijn. Selecteer deze tekst en klik op 'Link invoegen/wijzigen'. Kies bij 'Type' voor URL. Bij URL zet je # met meteen daarachter de unieke naam die je bij stap 1 aan de interne link hebt gegeven. Klik op 'Invoegen'.

    Stap 4: Je bent klaar.



  8. Afbeelding invoegen. Meer over het invoegen van een afbeelding met de teksteditor lees je in het artikel Een afbeelding toevoegen of bewerken.

     Video invoegen. Meer over het invoegen van een afbeelding met de teksteditor lees je in het artikel Een video toevoegen.

  9.  Tabel invoegen. Met deze optie kun je een tabel toevoegen. Wanneer je op de actieknop klikt komt er een pop-up naar voren waar je kan instellen hoeveel rijen en kolommen je wilt invoegen.

    Ook kan je hier instellen hoe hoog en breed je tabel moet worden. Daarnaast stel je bij 'Afstand/Ruimte tussen de cellen' een witmarge in pixels. Ook de breedte van de rand van de tabel stel je hier in.

    Bij uitlijning kies je of de cellen links, rechts of gecentreerd worden uitgelijnd. Wanneer je koppen in de tabel wil gebruiken, kies je of je dit wilt in de eerste rij, de eerste kolom, of zowel de eerste rij als de eerste kolom.

    Bij 'Naam' zet je de titel van de tabel. Een eventuele samenvatting kan hier ook worden gevuld.


    Vul vervolgens je tabel.


    Hoe de tabel er op je webpagina uitziet hangt af van de styling van je webpagina. Wil je iets laten aanpassen of toevoegen aan de styling van je website? Neem dan contact op met helpdesk@care.nl, of maak gebruik van ons contactformulier.

    Wanneer je iets wilt aanpassen aan de instellingen van je tabel, klik je met de rechtermuisknop op de titel van de tabel. De eigenschappen worden opnieuw geopend.


     Lijn invoegen. De Lijn wordt op de plaats van de cursor toegevoegd. Wanneer de cursor op een regel staat waar al iets anders op staat, wordt de lijn onder de huidige regel toegevoegd.

     Speciaal teken invoegen. De tekst editor beschikt over een aantal makkelijk in te voegen speciale tekens. Het is wel mogelijk om gebruik te maken van speciale tekens die niet in dit overzicht voorkomen door deze in de tekst editor te plakken.



  10.  Afkorting invoegen. Een afkorting, of een ander woord waarbij je een kleine beschrijving wilt geven, kun je zo in de tekst verwerken dat wanneer je er met je muis overheen gaat, je deze beschrijving ziet. Het woord wordt onderstreept met een dunne stippellijn om te laten weten dat er meer informatie beschikbaar is over het woord.

    Typ het woord of de afkorting op de normale manier in de tekst en selecteer het. Klik vervolgens op de actieknop  'Afkorting'. In het pop-up scherm typ je vervolgens de beschrijving bij 'Titel' en klik op 'Invoegen'.


  11. Stijl instellen. Er zijn twee soorten stijlen. Block stijlen en inline stijlen. Block stijlen beginnen op een nieuwe regel en gelden voor de gehele regel. Inline stijlen kunnen gelden voor een gedeelte van de regel.

    Welke stijlen er voor je website mogelijk zijn hangt af van de styling van de webpagina. Er zijn standaard een aantal stijlen toegevoegd aan de editor, maar deze zijn niet altijd automatisch toegevoegd aan de styling van de webpagina. Wil je iets laten aanpassen of toevoegen aan de styling van je website? Neem dan contact op met helpdesk@care.nl, of maak gebruik van ons contactformulier.


  12.  Opmaak instellen. Met de optie opmaak instellen kun je kiezen voor kop 1, 2, 3 of 4. Hoe deze koppen er op de webpagina uitzien, hangt af van de styling van de webpagina.


    De verschillende koppen hebben een aflopende belangrijkheid. 'Kop 1' is het meest belangrijk. 'Kop 2' iets minder enz.

    'Kop1' wordt gezien als de titel van de webpagina. Ook gebruiken zoekmachines 'Kop 1' om erachter te komen waar de webpagina over gaat.

    De webpagina moet altijd beginnen met een 'Kop 1' en mag maar één keer op de webpagina voorkomen.

    Op deze manier is je website ook toegankelijk voor bezoekers met een visuele handicap.



  13. Vet gedrukt. Hiermee maak je de tekst vet gedrukt.

     Schuin gedrukt. Hiermee maak je de tekst schuin gedrukt.

     Onderstrepen. Hiermee onderstreep je de tekst.

     Doorhalen. Hiermee kun je de tekst doorhalen.

    Deze vier opties kunnen gecombineerd worden: Alle vier de opties tegelijkertijd.


  14.  Subscript. Hiermee creëer je een stuk tekst dat kleiner en lager dan de rest van de tekst wordt geplaatst.

     Superscript. Hiermee creëer je een stuk tekst dat kleiner en hoger dan de rest van de tekst wordt geplaatst.


  15.  Links uitlijnen. Het geselecteerde stuk tekst wordt links uitgelijnd:


     Centreren. Het geselecteerde stuk tekst wordt gecentreerd:


     Rechts uitlijnen. Het geselecteerde stuk tekst wordt rechts uitgelijnd:


    Uitvullen. Het geselecteerde stuk tekst vult de beschikbare ruimte:



  16.  Geordende lijst. Je kunt hiermee een lijst creëren die genummerd is.

     Ongeordende lijst. Je kunt hiermee een lijst creëren die niet genummerd is.

    Je kunt ook combinaties maken van lijsten die genummerd en niet genummerd zijn. Dit is wel iets minder makkelijk. Hiervoor maak je namelijk gebruik van de 'HTML-Editor'.

    Wanneer je op de HTML-editor klikt, kun je gebruik maken van de volgende codes:

    Voor geordende lijsten:
    <h3>Soorten vogels</h3>
    <ol>
      <li>Vliegende vogels</li>
      <li>Niet-vliegende vogels</li>
    </ol>

    Dat ziet er zo uit:


    Voor ongeordende lijsten:
    <h3>Niet-vliegende vogels</h3>
    <ul>
      <li>Struisvogel</li>
      <li>Pingu&iuml;n</li>
    </ul>
    Dat ziet er zo uit:


    Je kunt nu een ongeordende lijst onder een onderdeel uit de genummerde lijst maken:
    <h3>Vogels</h3>
    <ol>
      <li>Vliegende vogels
        <ul>
          <li>Ekster</li>
          <li>Merel</li>
        </ul>
      </li>
      <li>Niet-vliegende vogels
        <ul>
          <li>Struisvogel</li>
          <li>Pingu&iuml;n</li>
        </ul>
      </li>
    </ol>
    Dat ziet er zo uit:


    Je kunt nu zelfs een ongeordende lijst maken onder een onderdeel van een ongeordende lijst dat hangt onder een onderdeel van een geordende lijst:
    <h3>Dieren</h3>
    <ol>
      <li>Vogels
        <ul>
          <li>Vliegende vogels
            <ul>
              <li>Merel</li>
              <li>Ekster</li>
            </ul>
          </li>
          <li>Niet-vliegende vogels
            <ul>
              <li>Struisvogel</li>
              <li>Pingu&iuml;n</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>Vissen</li>
      <li>Katachtigen</li>
    </ol>
    Dat ziet er zo uit:


    Iedere geordende lijst begint met <ol> en eindigt met </o>
    Iedere ongeordende lijst begint met <ul> en eindigt met </ul>
    Ieder onderdeel in een lijst begint met <li> en eindigt met </li>



  17. Inspringen verkleinen.

    Inspringen vergroten.

    Je kunt een geheel tekstblok laten inspringen. Je kunt met deze opties de ingesprongen afstand vergroten of verkleinen:



     Citaat invoegen. Een citaat is een letterlijke uitspraak van iemand. Je kunt een citaatblok gebruiken om bijvoorbeeld een deel van een interview opvallend te maken.

    Hoe een citaat er op de website uit komt te zien is afhankelijk van de styling. Wil je iets laten aanpassen of toevoegen aan de styling van je website? Neem dan contact op met helpdesk@care.nl, of maak gebruik van ons contactformulier.

    Hieronder zie je twee voorbeelden:


  18. Tekstkleur. Hiermee kun je de kleur van de tekst instellen.

    Je kunt kiezen voor een van de kleuren in het menu, of je kunt klikken op 'meer kleuren'. Wanneer je hierop klikt, kun je een hexadecimale kleurnotitie invullen. Deze begint altijd met #.



     Achtergrondkleur. Hiermee kun je de kleur van de achtergrond van de tekst instellen.

    Je kunt kiezen voor een van de kleuren in het menu, of je kunt klikken op 'meer kleuren'. Wanneer je hierop klikt, kun je een hexadecimale kleurnotitie invullen. Deze begint altijd met #.


Examples of customization

Er zijn verschillende opties die niet standaard in Sitebox zijn geimplementeerd. Deze kunnen op basis van maatwerk worden toegevoegd. In deze paragraaf vind je een aantal voorbeelden.


Wanneer je een idee of wens hebt, kun je altijd contact met ons opnemen per mail helpdesk@care.nl, of maak gebruik van ons contactformulier.  We denken dan met je mee over de mogelijkheden.


Accordeon

De accordeon is een manier om een pagina met veel tekst overzichtelijk te houden. Voor de accordeon wordt een specifieke template gemaakt. De template geldt dan voor de gehele webpagina. In de teksteditor typ je je tekst en maak je gebruik van koppen. Aan de voorkant van de website zie je alleen de koppen. Wanneer je op een kop klikt, wordt de tekst die bij deze kop hoort uitgeklapt. Hoe het er precies uit komt te zien hangt af van de styling. Hieronder zie je een voorbeeld:



Melding

Een melding is een opvallende notitie die op de webpagina kan worden toegevoegd. Deze melding kan worden gemaakt met een script, maar ook in de teksteditor. Hoe de melding er op de webpagina uit komt te zien is afhankelijk van de styling. Hieronder zie je een voorbeeld: