Dag 10: Content invoeren met de JCE editor

Vandaag gaan we onze content invoeren in de structuur die we gisteren hebben gemaakt. We maken hierbij gebruik van de JCE Editor, een van de beste editors voor Joomla!.

Voordat we beginnen moeten we eerst de JCE Editor downloaden. Voor het installeren van JCE zijn twee bestanden nodig: een component en een plugin. Deze installeren we vervolgens in Joomla!. We gaan naar de backend van Joomla! en navigeren naar 'Extensions > Install/Uninstall'. Klik op 'Bladeren' en selecteer een van de bestanden die we zojuist hebben gedownload. Druk op 'Upload file & Install'. Als het goed gegaan is krijg je het volgende bericht te zien: 'Install Plugin Success'. We installeren ook het andere bestand. Als de component en de plugin zijn geïnstalleerd, moeten we alleen nog de JCE Editor aanzetten. Dit doen we in de Global Configuration van Joomla!, die we vinden onder 'Site > Global Configuration'.

In de Global Configuration vinden we een aantal globale eigenschappen van Joomla!, zoals bijvoorbeeld de websitenaam. Wij zijn echter op zoek naar het selectieveld waarin de verschillende editors worden getoond. Dit veld vinden we onder 'Default WYSIWYG Editor'.

We zetten de Default WYSIWYG Editor op JCE Editor en slaan de Global Configuration op. Wanneer we nu content gaan invoeren, maken we gebruik van de JCE Editor.

Joomla! Heeft standaard al twee editors beschikbaar in Joomla!: TinyMCE en FCK Editor. Wij geven echter de voorkeur aan JCE, omdat deze een uitgebreidere functionaliteit biedt dan de deze twee standaard editors.

Article Manager
Nu we de JCE Editor hebben aangezet, kunnen we de content gaan invoeren. Hierbij maken we gebruik van de structuur die we gisteren hebben opgezet. Om ervaring met werken met de JCE Editor op te doen, gaan we een nieuwsitem invoeren. Om dit te doen gaan we in de Joomla! backend naar 'Content > Article Manager'.

We komen in het overzicht van alle artikelen die beschikbaar zijn. Ook hier vinden we de voorbeeld content die we tijdens de installatie hebben ingevoegd. We willen een nieuw artikel aanmaken, dus klikken we rechtsboven op 'New'. Nu komen we in het scherm waarmee we een artikel kunnen bewerken.

Bij 'Title' vullen de titel van ons artikel in. Vervolgens vinken we bij 'Published' aan dat we het artikel direct willen publiceren. We laten 'Alias' leeg, omdat deze door Joomla! zelf wordt gevuld en ook 'Frontpage' laten we ongemoeid, omdat we het artikel niet op de voorpagina van de website willen tonen. Daarna kiezen we uit het 'Section'-selectielijstje de sectie waarin het artikel wordt gepubliceerd, in dit geval 'Nieuws', en vervolgens kiezen we uit 'Category' de categorie 'Poker Nieuws'. Nu gaan we aan de slag met het invoeren van de content. Hierbij gaan we de volgende tekst invoeren:

De FBI heeft in Amerika beslag gelegd op amerikaanse accounts van Neteller, het populairste betaalmiddel voor on-line pokerspelers.

Neteller
Neteller is een online betaal systeem, vergelijkbaar met paypal. Het verschil met Neteller is dat deze vooral bekend staat vanwege de banden met gok sites. Het probleem met Neteller is vooral dat er geen goede controle mogelijk is. Er gaat geld van officiele instanties naar personen of bedrijven over de hele wereld. Controle is praktisch niet uit te voeren. Een doorn in het oog van Justitie.

In de VS zijn ze het nu zat en zijn ze vastberaden een einde te maken aan de oncontroleerbare betaalsystemen, die inmiddels verantwoordelijk zijn voor 10.6 miljard dollar. Vorige maand werden de oprichters van Neteller Stephen Lawrence en John Lefebvre gearessteerd omdat ze geld stromen gebuikte voor illegala gokpraktijken. En nu zijn de Neteller gebruikers zelf aan de beurt.

Een ander verwijt richting Neteller, naast de illegaliteit, is dat men bij Neteller alle mogelijkheden biedt om geld op een account te storten maar er nauwelijks wordt uitgelgd hoe men geld kan opnemen.

Neteller zegt dit te verbeteren en op de website staat sinds kort: "We are working to resolve all withdrawal issues, but in the meantime we continue to maintain these funds in trust on your behalf."

De JCE Editor
Als we iets naar beneden kijken, zien we de JCE Editor en het veld waar we de tekst moeten gaan invoeren.

Als je bekend bent met tekstverwerkers zoals Word zullen enkele knoppen van de JCE Editor je zeer bekend voorkomen. Bijvoorbeeld het Bold of Italic maken van een stukje tekst, of het aanmaken van een genummerde of ongenummerde lijst. Maar er zullen ook veel knoppen tussen zitten die je niet kent. We zullen er hier een aantal van bespreken, bijvoorbeeld het aanmaken van een link, of een tussenkopje.

Om te beginnen voeren we bovenstaande tekst in in het tekstveld. Om hierbij een paragraaf te maken, drukken we op de Entertoets. Willen we echter alleen de regel afbreken (in dezelfde paragraaf), dan drukken we op Shift + Enter. Als we de tekst in zijn geheel hebben ingevoerd drukken we rechtsboven op "Apply" om het artikel op te slaan.

Als je tekst vanuit Word direct in Joomla! plakt, wordt er door Word opmaak meegezonden. JCE heeft een aparte knop om het merendeel van deze opmaak te verwijderen: 'Paste from Word'. Kopieer de tekst in Word en druk in JCE op deze knop (op de tweede rij, met het Word-icoon er in). Plak de gekopieerde tekst erin en druk op 'Insert'. De meeste opmaak is nu verwijderd en we kunnen met een schone lei de tekst gaan opmaken.

Nu gaan we verder met de opmaak van onze tekst, zo willen we bijvoorbeeld een link opnemen naar de website van Neteller. Hiervoor selecteren we in de tekst het woord Neteller. Enkele knoppen in de Editor lichten nu op, waaronder het tweede knopje van links op de onderste rij. Als we hierover met de muis staan, zien we 'Insert/edit link' staan. We klikken er op en een pop-up verschijnt. We vullen in deze pop-up bij URL de URL van de website van Neteller in en drukken op 'Insert'. Het geselecteerde is nu blauw geworden, een teken dat de link er in zit.

Nu willen we nog het tussenkopje een opmaak geven. We selecteren het tussenkopje (begin tweede alinea). Nu klikken we in de Editor op het 'Format'-selectieveld en selecteren daar 'Heading 3'. De geselecteerde tekst is nu groter geworden en heeft een andere opmaak gekregen. We slaan het artikel nogmaals op door weer op 'Apply' te drukken.

Als laatste maken we een scheiding tussen een introductie en de rest van de tekst. Dit doen we zodat we op overzichtspagina's alleen de introductie zien in plaats van gelijk de gehele tekst. Zodra je dan op 'Read More' of 'Lees Verder' klikt krijg je het volledige artikel te zien. We willen dat de eerste alinea van het artikel de introductie wordt. Hiervoor zetten we onze cursor aan het einde van de eerste alinea. Als we onderaan de pagina kijken zien we een knop 'Read more...' staan. We klikken hier op en er verschijnt een rode lijn in de Editor. Deze lijn geeft nu aan wat de introductie is en wat je extra ziet zodra je verder leest. We zijn voor vandaag klaar met het artikel, dus drukken we op 'Save' om terug te keren naar het artikeloverzicht.

We hebben de opmaak van ons artikel nu helemaal klaar. Het enige wat we nu nog willen doen is het invoegen van een plaatje. Dit doen we morgen, als we aan de slag gaan met de Media Manager en de Image Manager.

Voor meer informatie over JCE en de editor raden we aan de Support pagina's van JCE te bezoeken.

Samenvatting
Vandaag hebben we de JCE Editor in Joomla! geïnstalleerd en hebben we een eerste artikel toegevoegd met de Article Manager. We hebben met de JCE Editor de tekst opgemaakt en een scheiding gemaakt tussen de introductie van het artikel en de rest van het artikel. Morgen gaan we verder met opmaken van het artikel, dan voegen we een plaatje toe.

Commentaar (19)