HTML-Editor CMS handleiding

Dit artikel is de handleiding van de HTML-editor die in het Rocketweb CMS wordt gebruikt. De HTML-editor is een aangepaste en vertaalde versie van de WYSIWYG editor van Openwebware.

Deze editor is te vinden op de pagina's die aan te passen zijn binnen het CMS. Hoe je op zo'n pagina kunt komen wordt in deze handleiding uitgelegd.

WYSIWYG betekent: What You See Is What You Get. Je ziet wat je aan het doen bent. Om een tekst van opmaak te voorzien hoef je geen HTML code te kennen. Deze editor heeft een knop waarmee je direct in de HTML kunt werken. Soms is dat heel makkelijk.
Deze handleiding legt uit waarom en hoe.

Inhoud

• De knoppen
• Knoppen in detail
• Kleuren kiezen
• Lijsten invoegen
• Verwijder Word opmaak
• Tabel invoegen
• Afbeelding of PDF invoegen
• Link invoegen
• HTML mode
• Help pagina's
• Koppen
• Compatiblity Mode

De knoppen

Bovenste rij

1. Vet (B = bold)
2. Cursief (I = italic)
3. Lijntje onder de tekst (U = underline)
4. Lijntje door de tekst (S = strike through)
5. Kleur van de tekst
6. Kleur van de achtergrond van de tekst
7. Tekst uitvullen
8. Tekst links uitlijnen
9. Tekst centreren
10. Tekst rechts uitlijnen
11. Invoegen van een lijst (zoals deze)
12. Invoegen van een lijst met cijfers
13. Tekst uitspringen
14. Tekst inspringen

Middelste rij

1. Onderschrift
2. Bovenschrift
3. Verwijder opmaakcode uit Word
4. Voeg tabel in
5. Voeg afbeelding of PDF bestand in
6. Voeg link in
7. Switch tussen WYSIWYG en HTML code
8. Koppeling naar de help pagina's

Onderste rij

1. Kies een lettertype
2. Kies de grootte van de tekst
3. Kies de grootte van de kop

Knoppen in detail

Over het algemeen is de werking van de knoppen als volgt. Selecteer een gedeelte van de tekst en kies een bewerking, bijvoorbeeld: maak Vet - klik op de knop B.

De geselecteerde tekst is nu vet.
Hieronder volgt een overzicht van knoppen waar de werking iets ingewikkelder is.

Kleuren kiezen

Om de gereedschappen Kies tekstkleur en Kies achtergrondkleur te kunnen gebruiken, moet eerst de tekst worden geselecteerd die van een kleur moet worden voorzien.
Door te klikken op een van de twee knoppen opent zich dit scherm:

Kies een kleur naar keuze uit het palet. Het window sluit zich vanzelf en de gekozen kleur wordt direct toegepast. Na het deselecteren - naast de selectie klikken - is de gekozen kleur zichtbaar.

Invoegen van lijsten

Plaats de cursor op een lege ruimte.

En kies voor een van de twee lijsten.

Waar de cursor knippert, kan het eerste zinnetje van de lijst worden getikt. Door op de enter te drukken, verschijnt op een nieuwe regel een twee balletje (of het cijfer 2, afhankelijk van de gekozen lijst).

Verwijder Word opmaak

Deze knop verwijdert alle onzichtbare opmaakcode uit de tekst.

Bovenstaande afbeelding laat een tekst zien die rechtstreeks uit een Microsoft Word document is gekopieerd. Visueel gezien is dit acceptabel. Echter, onder de motorkap zit typische Word opmaak code verborgen die de correcte werking van een webpagina verstoort.

Door te klikken op de knop HTML (middelste rij) wordt geschakeld naar de html-mode van de editor. Nu is de html-code zichtbaar van de tekst. Wie HTML beheerst herkent nu allerlei opmaakinstructies die niets met standaard HTML te maken hebben. Deze instructies moeten verwijderd worden.

Klik nogmaals op dezelfde knop (er staat nu TEXT in plaats van HTML) om terug te schakelen naar de WYSIWYG-mode.
Klik vervolgens op de knop Verwijder Word opmaak. Omdat ALLE opmaakcode wordt verwijderd, verschijnt eerst een waarschuwing.

Bovenstaande afbeelding laat zien dat alle opmaakinstructies verwijderd zijn.

Door weer terug te schakelen naar de HTML-mode en bovenstaande afbeelding te vergelijken met de tweede afbeelding, valt op dat de Word code ook daadwerkelijk weg is.

Tabel invoegen

Door te klikken op de knop Tabel invoeren verschijnt een venster waar de eigenschappen van de tabel worden aangegeven.

Na het sluiten van het venster Tabel invoegen verschijnt een tabel structuur gemaakt van stippellijnen.

In de vier vakken van dit voorbeeld kunnen teksten, afbeeldingen, lijsten en links worden toegevoegd.

Door op een hoekje te klikken en de muisknop ingedrukt te houden, kan de grootte van de tabel aangepast worden.

Afbeelding of PDF invoegen

Voor het invoeren van een afbeelding moet de cursor in de editor knipperen. Klik vervolgens op de knop 'Afbeelding of PDF invoeren' en het volgende scherm verschijnt:

Met dit scherm kan zowel een afbeelding of een PDF worden ingevoerd. Het kan niet tegelijk.
Om een PDF in te kunnen voeren moet eerst een stukje tekst geselecteerd zijn. Deze tekst wordt straks de link waar de bezoeker op moet klikken om de PDF te kunnen openen.

Klik op de knop 'Browse', zoek de afbeelding of de PDF op en selecteer deze.

Klik vervolgens op 'Open'. Het CMS zal de afbeelding aanpassen naar de maximale breedte van de lay-out van de webpagina.
Een pdf link zal automatisch in een nieuw venster openen als er op geklikt wordt.

Link invoegen

Om een link te kunnen invoegen, moet eerst een stuk tekst geselecteerd zijn. Dit wordt later de hyperlink waar bezoekers op klikken.

Klik vervolgens op de knop 'Link invoeren' en het onderstaande invulscherm verschijnt.
Betekenis van de velden:

• Url
  vul hier de link in
• Doel
  in welk venster opent de link. Vul het in of kies een waarde uit de meerkeuze lijst
• Meerkeuze lijst
  _blank = nieuw venster, _top / _self / _parent = huidige venster, custom = vul zelf iets in
• Style, Class en Name worden gebruikt in CSS. Heeft u hier geen verstand van, laat deze velden dan leeg

Klik op de knop 'Bewaar' en de link ziet eruit als in onderstaand voorbeeld.

HTML mode

Dit artikel wordt in de editor (Internet Explorer 8) vertoond zoals in onderstaand voorbeeld.

Door te klikken op de knop 'HTML' wordt de onderliggende HTML-code zichtbaar. Heeft u verstand van HTML dan kunt u hier rechtstreeks de code aanpassen.
Wilt u zelf aan de slag met HTML? Dit artikel is een korte HTML handleiding.
Wilt u het resultaat zien in de What You See Is What you Get editor, klik dan op de knop 'TEXT'.

Help pagina's

De knop met het vraagteken opent een venster waarin een link staan naar deze pagina.

Koppen

Een tekst wordt een kop door de tekst te selecteren en een waarde te kiezen uit de meerkeuze lijst 'Kies Kop'.
Onderaan de lijst staat de waarde 'P'. Door een kop in de tekst te selecteren en te voorzien van 'P' wordt de code die de kop maakt verwijderd.

Compatiblilty Mode IE 9

In Internet Explorer 9 werken de pop-up vensters: Invoegen tabel, Invoegen link en Invoegen afbeelding of PDF niet. De oplossing is de knop compatiblity mode aan te zetten. Door dit te doen werkt u eigenlijk met een oudere versie van Internet Explorer.

Alle artikelen