FCKeditor
door Edwin V.
Om je gebruikers van je PHP scripts die geen kennis van html hebben, toch html te laten gebruiken, kan je een wysiwyg editor gebruiken. wysiwyg staat voor What You See Is What You Get. Vaak hebben deze editors een interface die lijkt op die van MS Word. Sinds enige tijd bestaat er een hele goede wysiwyg editor, namelijk FCKeditor. Deze editor is gemaakt door Frederico Caldeira Knabben en bevat zeer veel functies. De editor is volledig aan te passen aan je eigen wensen door de uitgebreide instellingen en de mogelijkheid om plugins te maken.
In dit artikel wil ik jullie kennis laten maken met de mogelijkheden die FCKeditor te bieden heeft.
Inhoud |
Wat is FCKeditor?
Zoals gezegd is het met FCKeditor mogelijk om gebruikers van je programma's html te laten produceren. De interface van de editor is te vergelijken met bijvoorbeeld Word. De drempel voor gebruikers is dus erg laag.
De mogelijkheden van FCKeditor lopen sterk uiteen. Zo zijn de meeste basis functies voor het opmaken van tekst aanwezig, maar ook het weergeven van plaatjes en tabellen is opgenomen. Om te kijken welke mogelijkheden FCKeditor te bieden heeft raad ik jullie aan om de demo op de website te bekijken.
Wat FCKeditor eigenlijk doet, is het vertalen van de menu acties in bruikbare html code. Bijvoorbeeld, door te klikken op de knop 'B', komen er bold tags om de geselecteerde tekst te staan. Bij het toevoegen van tags, bijvoorbeeld een table tag, zal de editor netjes een dialoogscherm weergeven en bepaalde gegevens vragen. Nog een stapje verder zijn de img tags. Deze kan je in de editor resizen, waarbij de editor automatisch de hoogte en breedte in de tag aanpast. Via het img dialoog scherm is het weer mogelijk om nieuwe afbeeldingen te uploaden of te zoeken op de server via een bestandsverkenner.
Naast al de geweldige functies, heeft FCKeditor nog een belangrijk voordeel, namelijk dat de editor crossbrowser is. De website van FCK claimt het volgende: "FCKeditor is compatible with most internet browsers which include: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ and Netscape 7+."
Installatie
FCKeditor is eigenlijk een vervanging van een textarea in een html formulier. Het verwerken van de gegevens uit de editor gaat hetzelfde als met een textarea. In PHP zal er in je POST of GET array een element bestaan die als naam de waarde heeft die je opgegeven hebt bij het aanmaken van de editor. Om FCKeditor compatible te maken met allerlei technieken op het internet, kan je FCKeditor op verschillende manieren invoegen in je website. In dit artikel zal ik kort het aanmaken van een editor via JavaScript en PHP behandelen. In de onderstaande voorbeelden ga ik er vanuit dat je de source code van FCKeditor in de map FCKeditor hebt staan. Mocht je de source code van de editor ergens anders geplaatst hebben, dien je de locaties van de bestanden aan te passen.
JavaScript toepassing
Als je de editor via JavaScript toe wilt voegen aan je HTML code, moet je 2 dingen doen. Om te beginnen include je de JavaScript source in je html bestand:
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>
Vervolgens voeg je op de plaats waar je de editor in je formulier wilt zetten nog een stukje JavaScript in:
<script type="text/javascript"> var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ; oFCKeditor.Create() ; </script>
PHP toepassing
Ook via PHP kan je de editor heel simpel toevoegen aan een formulier. Het is natuurlijk mogelijk om de bovenstaande JavaScript methode te echoën, maar er zit ook een hele handige PHP klasse bij de editor. De onderstaande code kan je gebruiken om via PHP een editor aan te maken.
<?php
include("FCKeditor/fckeditor.php") ;
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->Create() ;
?>
Instellingen van de instantie
FCKeditor is op verschillende manieren aan te passen aan je eisen. Zo heb je de globale configuratie in het fckconfig.js bestand, maar sommige instellingen verschillen per instantie van de editor. Denk hierbij bijvoorbeeld aan de inhoud van de editor. Om dit in te stellen heb je enkele configuratie opties die je bij het aanmaken van een editor kunt opgeven. Standaard geef je al de naam van het formulier element mee, in de bovenstaande voorbeelden is dat dus 'FCKeditor1'. Na het versturen van het formulier zijn de gegevens uit de editor via PHP dus te bereiken via $_POST['FCKeditor1'] of $_GET['FCKeditor1'].
Instellingen beschikbaar bij het aanmaken van de editor
Naam Omschrijving Value De beginwaarde die de editor heeft BasePath De map waarin de editor zijn source kan vinden Width De breedte van de editor, deze kan zowel opgegeven worden in pixels ( "150" ) als in procenten ( "100%" ) Height De hoogte van de editor, deze kan zowel opgegeven worden in pixels ( "150" ) als in procenten ( "100%" ) ToolbarSet De menu balk die gebruikt moet worden. Dit moet een waarde van een menu balk zijn zoals deze bestaat in fckconfig.js Config Dit is een array waarin je alle configuratie opties kunt aanpassen die ook in het fckconfig.js bestand staan. Meer informatie over deze opties kan je vinden in hoofdstuk 2 van dit artikel.
Door de bovenstaande variabelen een waarde te geven pas je de editor dus aan, een voorbeeld in PHP hoe dit zou kunnen staat hieronder.
<?php
include("FCKeditor/fckeditor.php") ;
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->Value = "Dit is de <b>inhoud</b> van de editor";
$oFCKeditor->Height = 150; // Dus 150 pixels
$oFCKeditor->Width = "100%";
$oFCKeditor->ToolbarSet = "MijnToolbar"; // 'MijnToolbar' moet in dit geval bestaan in de fckconfig.js
$oFCKeditor->Config['DefaultLanguage'] = "nl";
$oFCKeditor->Create() ;
?>
Informatie over het installeren van FCKeditor via andere programmeertalen is te vinden op de Wiki van FCKeditor. In het artikel van Janwillem over FCKeditor in het Overige forum kan je een uitgebreider voorbeeld vinden van een toepassing van FCKeditor.
Instellingen
In het bestand fckconfig.js kan je allerlei instellingen van FCKeditor aanpassen aan je eigen wensen. Op deze manier kan je de editor op verschillende manieren gebruiken. In dit hoofdstuk zal ik verschillende onderdelen van het configuratie bestand behandelen. De items die niet in de onderstaande tabel staan zal je in het begin niet of nauwelijks hoeven aan te passen.
Configuratie instellingen in fckconfig.js
Naam Omschrijving EditorAreaCSS Hoofdstuk 4: CSS stylesheets DocType Het document type dat gebruikt moet worden. BaseHref De basis url waar de editor alle bestanden kan vinden. FullPage De gebruiker kan een volledige html pagina bewerken (inclusief headers/title) SkinPath De map naar de skin die je wilt gebruiken. Standaard zijn beschikbaar: 'default', 'silver' en 'office2003'. AutoDetectLanguage Moet FCKeditor automatisch de taal van de gebruiker proberen te achterhalen? DefaultLanguage De standaard taal als FCKeditor de taal niet automatisch heeft gevonden. StartupFocus Moet de editor bij het starten de focus krijgen. UseBROnCarriageReturn Indien true zal de editor een <br /> invoegen bij geven van een Enter, anders zal hij een nieuwe alinea starten met een <p> tag. ToolbarSets Hoofdstuk 6: Menu balken FontColors Welke letter kleuren moeten er in het menu staan. FontNames Welke letter typen moeten in het menu staan. FontSizes Welke letter groottes moeten in het menu staan. FontFormats Welke letter formaten moeten in het menu staan. StylesXmlPath Hoofdstuk 4: CSS stylesheets TemplatesXmlPath Hoofdstuk 5: Document sjablonen Link/Image/Flash Browser Hoofdstuk 7: Bestands beheer & Uploaden Link/Image/Flash Upload Hoofdstuk 7: Bestands beheer & Uploaden SmileyPath Met deze opties kan je aangeven in welke map de editor de smilies voor het menu kan vinden. SmileyImages Hiermee kan je de bestanden opgeven die in het menu moeten komen te staan.
CSS stylesheets
In FCKeditor is het mogelijk om de stijl van de inhoud van de editor aan te passen via een css stylesheet. Hiervoor heb je in fckconfig.js twee configuratie opties:
- EditorAreaCSS: De locatie van het css bestand waarin de stijl staat die toegepast moet worden op de inhoud
- StylesXmlPath: De locatie van een xml bestand met daarin de inhoud van het stijl menu in de menu balk
Het css bestand heeft verder weinig uitleg nodig. Je kunt gebruik maken van standaard css en in de editor kan je via een class of id de opmaak toepassen op een element. Het xml bestand moet wel voldoen aan bepaalde eisen. Een voorbeeld van een xml document staat hieronder.
<?xml version="1.0" encoding="utf-8" ?> <Styles> <Style name="Custom Italic" element="em" /> <Style name="Title" element="span"> <Attribute name="class" value="Title" /> </Style> <Style name="Image Width" element="img"> <Attribute name="width" value="100" /> </Style> </Styles>
Zoals je kunt zien zijn er drie verschillende tags die je kunt opnemen:
* Styles: Hierin zitten alle definities
* Style: Bevat een stijl definitie
o name: De naam van de definitie zoals deze in het menu komt te staan
o element: Op wat voor type element kan deze stijl toegepast worden.
* Attribute: Een attribuut van een tag
o name: De naam van het attribuut dat toegevoegd moet worden aan het huidige element
o value: De waarde van dit attribuut
Aan de hand van deze gegevens kunnen we het bovenstaande xml voorbeeld eens doorlopen. Allereerst maak je een definitie met de naam 'Custom Italic', deze zal em-tags toevoegen om de geselecteerde tekst. Er zijn geen attributen gedefinieerd, dus zullen alleen de tags toegevoegd worden. De tweede definitie heeft de naam 'Title' en voegt om de geselecteerde tekst een span tag toe met als attribuut class="Title". De laatste definitie zorgt ervoor dat een img tag een breedte van 100 pixels krijgt.
Binnen de definities kan je twee verschillende soorten onderscheiden. Zo bestaan er inline of text definities die aan een stukje tekst een stijl geven. De geselecteerde tekst krijgt nieuwe tags om zich heen met de gedefinieerde attributen. Als de tags al bestaan om de tekst zullen alleen de attributen toegevoegd worden. Het tweede soort zijn object definities, hiermee kan je aan een object een stijl geven. Objecten zijn elementen met één van de volgende html tags: img, table, tr, td, input, select, textarea, hr en object. De stijl definities voor dit soort objecten zijn pas zichtbaar in het menu op het moment dat je een element van dit type selecteert in de editor.
Document sjablonen
De feature voor document sjablonen is nog niet zo lang aanwezig in FCKeditor. Via de configuratie optie TemplatesXmlPath geef je de locatie van een xml bestand op. In dit xml bestand kan je sjablonen opgeven voor de inhoud van de editor. Een sjabloon bestaat uit een stukje html code dat in de editor geplaatst wordt. Binnen het xml bestand kunnen de volgende elementen opgenomen worden:
* Templates: Het basis element van de xml definitie
o imagesBasePath: Het basis pad voor de afbeeldingen van de sjablonen
* Template: De definitie van een sjabloon
o title: De titel van dit sjabloon
o image: De afbeelding die weergegeven wordt in het sjabloon keuze menu in de editor.
* Description: De optionele omschrijving van een sjabloon
* Html: De html inhoud van het sjabloon. Denk er om dat de html code moet staan tussen <![CDATA[ en ]]> om het xml bestand valide te houden.
Een voorbeeld van een definitie van een sjabloon zal er dan zo uit zien:
<?xml version="1.0" encoding="utf-8" ?>
<Templates imagesBasePath="/images/templates/">
<Template title="My Template 1" image="template1.gif">
<Description>Description of my template 1.</Description>
<Html>
<![CDATA[
<b>Template 1 HTML</b>
]]>
</Html>
</Template>
<Template title="My Template 2">
<Html>
<![CDATA[
<b>Template 2 HTML</b>
]]>
</Html>
</Template>
</Templates>
Menubalken
Om je de mogelijkheid te bieden om de editor op verschillende fronten in te zetten, heeft Frederico het mogelijk gemaakt om zelf de menu balken in te stellen. Je kan verschillende verzamelingen aanmaken en bij het aanmaken van een instantie op een pagina aangeven welke balken je wilt gebruiken. Ook de items die in het context menu staan kan je op deze manier aanpassen. In fckconfig.js vind je de verzameling ToolbarSets waarin de arrays met toolbars zitten. Een voorbeeld van een menubalk verzameling staat hieronder:
FCKConfig.ToolbarSets["Basic"] = [ ['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About'], ['TextColor','BGColor'] ] ;
Deze menubalk heeft de naam 'Basic' en bevat negen knoppen. De '-' items zijn verticale lijnen. Door een nieuwe array te beginnen maak je een nieuwe balk aan. De items 'TextColor' en 'BgColor' staan dus in een aparte ruimte. Als je de menubalken wilt aanpassen is het verstandig om van de 'Default' verzameling uit te gaan, vervolgens de opbouw op het scherm te bekijken en dan te bepalen wat je anders wilt. Dit zal ik hier niet verder behandelen.
Wat nog wel belangrijk is om te weten, is dat er geen verschil is tussen een knop en een selectie menu in de configuratie. Zo staat 'Bold' voor de bold knop, 'TextColor' voor een kleuren menu en 'FontName' voor de lettertype selectie box. In de configuratie bestaat hierin geen verschil.
Bestands beheer & Uploaden
In je html wil je soms ook plaatjes en link opnemen. De editor heeft hiervoor keurige dialoog vensters om een link naar een bestand of locatie van een plaatje op te geven. In deze vensters kan je de gebruiker de mogelijkheid geven om een bestand te uploaden. Om dit mogelijk te maken kan je de volgende configuratie opties gebruiken:
Configuratie opties voor uploaden
Naam Omschrijving TypeUpload True indien de upload optie beschikbaar is voor dit type TypeUploadURL De locatie van het upload script (bijvoorbeeld geschreven in PHP) TypeUploadAllowedExtensions Welke bestandsextensies zijn toegestaan om te uploaden (dit is een regular expression) TypeUploadDeniedExtensions Welke bestandsextensies zijn niet toegestaan om te uploaden (dit is een regular expression)
In de bovenstaande tabel kan je Type vervangen voor 3 voorkomende type bestanden: Link, Image en Flash.
Indien voor een bepaald bestandstype het uploaden actief is, zal in het dialoog een extra tabblad aangemaakt worden. In dit tabblad zal een upload formulier element te zien zijn. Na het versturen van het formulier zal het script aangeroepen worden dat is opgegeven bij de UploadURL. In de uploader die standaard bij de editor zit is duidelijk te zien op welke manier dit verwerkt wordt.
De volgende stap is het bladeren door bestanden. In de onderstaande tabel kan je de configuratie opties voor de bestandsbrowser vinden.
Configuratieopties voor bestandsbrowser
Naam Omschrijving TypeBrowser True indien de gebruiker de mogelijkheid heeft om de bestanden op de server te verkennen TypeBrowserURL De locatie van de bestandsbrowser. Standaard wordt voor PHP een simpele browser en de uitgebreidere mcpuk browser meegeleverd. TypeBrowserWindowHeight De hoogte van het browser scherm TypeBrowserWindowWidth De breedte van het browser scherm
Wederom kan je voor Type de drie voorkomende bestandstypen invullen: Link, Image en Flash.
De BrowserURL bestaat standaard altijd uit 2 delen, namelijk een basis locatie van het browser bestand en de locatie van een connctor. In het browser bestand staat de html opbouw van de browser. De connector is een server-side script dat de inhoud van de mappen uitleest. Door de standaard browser default/browser.html te gebruiken in combinatie met de php connector connectors/php/connector.php kan je gebruik maken van de browser en de bestanden via php uitlezen.
In de meeste gevallen zullen de standaard scripts voldoen aan je eisen, maar je kunt natuurlijk ook zelf een bestandsbrowser schrijven. Laat de URL verwijzen naar je php script waarmee je de inhoud van een directory weergeeft. In de html van je bestand kan je de volgende javascript opnemen om de url van het geselecteerde bestand in te voegen in het dialoog venster in FCKeditor.
function selectFile(sUrl){
window.top.opener.SetUrl(sUrl);
window.top.close();
window.top.opener.focus();
}
Door deze functie aan te roepen met de url die je wilt meegeven wordt hij ingevoegd in het dialoog venster.
Plugins
Het is mogelijk om plugins toe te voegen aan FCKeditor om de functionaliteit uit te breiden. Op dit moment zijn er nog maar een beperkt aantal plugins beschikbaar, maar dit zal in de toekomst zeker beter worden. Een plugin toevoegen aan de editor bestaat uit drie stappen:
- Plaats de inhoud van de plugin in de plugin map. Je krijgt dus nu een submap die als naam de naam van de plugin heeft. Hierin zitten alle bestanden voor de plugin.
- Wijzig fckconfig.js door een regel toe te voegen waarin je de plugin toevoegd. Dit ziet er bijvoorbeeld zo uit:
FCKConfig.Plugins.Add( 'FullWindow' ) ;
Op deze manier geef je aan dat je de plugin 'FullWindow' wilt gebruiken in je editor. - Lees eventuele documentatie bij de plugin ook door. Soms is het nodig om een menu item toe te voegen aan een menu om de plugin goed te kunnen gebruiken.
Hoe je zelf een plugin kunt maken voor FCKeditor zal ik in dit artikel niet behandelen. Op de Wiki is voldoende informatie hierover te vinden. Goede kennis van JavaScript is in ieder geval nodig!
In de onderstaande tabel staan enkele plugins die op dit moment handig kunnen zijn. Op de plugin pagina op Sourceforge.net kan je meer plugins vinden.
Handige plugins voor FCKeditor
Naam Omschrijving FullWindow Een plugin waarmee je de editor in een popup kunt laten openen zodat de gebruiker meer ruimte heeft om de tekst te bewerken. Het is mogelijk om verschillende menu balken te gebruiken bij de kleine en de grote versie. OpenWord Hiermee is het mogelijk om rechtstreeks een Word document te importeren in de editor. Er wordt gebruikt gemaakt van een ActiveX object en hierdoor is de plugin alleen beschikbaar in Internet Explorer. SpellWord Omdat de standaard spelling controle opties in FCKeditor op dit moment alleen beschikbaar zijn in het Engels, maakt deze plugin gebruik van de spelling controle van Word. Ook deze plugin werkt met een ActiveX besturingselement en is daardoor alleen beschikbaar in Internet Explorer.
Tips
Vaak zal FCKeditor niet helemaal goede HTML terug geven. De mogelijkheden om de code op te ruimen via het programma zelf worden al steeds beter, maar via Tidy kan je de code ook opruimen. In PHP 5 zijn deze functies standaard beschikbaar.
Door je eigen bestandsbrowser te maken kan je eventuele beveiliging daarin verwerken. Wanneer je gebruik maakt van de standaard verkenners van FCKeditor geeft dat iedereen de mogelijkheid om je bestanden te bekijken.
Heb je nog steeds problemen met de editor na het lezen van dit artikel? Doneer een bedrag aan Frederico voor zijn geweldige werk en je krijgt een jaar lang gratis e-mail ondersteuning.
Bronnen
Bij het schrijven van dit artikel heb ik gebruik gemaakt van de onderstaande websites.
- FCKeditor.net
- FCKeditor op SourceForge.net
- FCKeditor WiKi
- Plugins voor FCKeditor
- Tidy documentatie op php.net
Ben ik handige plugins vergeten? Heb je nog een handige tip? Ben ik een belangrijke configuratie instelling over het hoofd gezien? Neem even contact op, dan zal ik kijken wat ik er aan kan doen!
Allemaal veel plezier met het gebruiken van deze geweldige editor!
Edwin
