Tutorials
Tiny MCE editor
Een online editor, (Letop!! alleen uitleg voor de php variant!
Pagina 1
Inleiding
Zoals jullie wel weten zijn er op internet verschillende "online editors" te vinden.
De meningen over deze editors zijn zeer verdeelt, en ik zeg ook niet dat de "tiny MCE" editor de beste editor is, maar ik weet uit ervaring dat het een leuk opstapje is naar een editor als "FCK Editor".
Ik ga niet te diep in op de mogelijkheden van de editor, maar als je ergens niet uit kan komen is er een wiki te vinden op: http://tinymce.moxiecode.com/documentation.php.
genoeg gezegd, op naar de volgende pagina;)
De meningen over deze editors zijn zeer verdeelt, en ik zeg ook niet dat de "tiny MCE" editor de beste editor is, maar ik weet uit ervaring dat het een leuk opstapje is naar een editor als "FCK Editor".
Ik ga niet te diep in op de mogelijkheden van de editor, maar als je ergens niet uit kan komen is er een wiki te vinden op: http://tinymce.moxiecode.com/documentation.php.
genoeg gezegd, op naar de volgende pagina;)
Pagina 2
Installatie
De installatie is heel eenvoudig met de volgende url kom je op de download pagina van tiny mce: http://tinymce.moxiecode.com/download.php.
upload de map in het zip filetje naar je root map van je website, in ons voorbeeld noemen we de map gewoon tinymce.
maak nu een nieuw bestand aan "tinymce.php" en upload deze direct naar de root van je site. NEXT PAGE PLEASE
upload de map in het zip filetje naar je root map van je website, in ons voorbeeld noemen we de map gewoon tinymce.
maak nu een nieuw bestand aan "tinymce.php" en upload deze direct naar de root van je site. NEXT PAGE PLEASE
Pagina 3
tinymce.php
het is de bedoeling dat we doormiddel van een klein stukje javascript, de editor laden in het bestand "tinymce.php", wat tinymce doet is het vervangen van de "text areas" in een formulier, kort samen gevat:
tinymce.php laad dmv. javascript de editor in het bestand "tinymce.php".
tinymce zoekt naar textareas in een formulier, in het bestand tinymce.php
en vervangt deze door de editor.
plak de volgende code in het bestand "tinymce.php".
NEXT PAGE
tinymce.php laad dmv. javascript de editor in het bestand "tinymce.php".
tinymce zoekt naar textareas in een formulier, in het bestand tinymce.php
en vervangt deze door de editor.
plak de volgende code in het bestand "tinymce.php".
<html>
<head>
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas"
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<textarea name="textarea" id="textarea" cols="80" rows="8"></textarea>
</form>
</body>
</html>
NEXT PAGE
Pagina 4
Tot slot:
Oké dat ging misschien een beetje snel hier een korte maar hopelijk duidelijke uitleg van wat de code doet:
het eerste stukje code laad, zoals ik al eerder zei, de editor in het bestand "tinymce.php" zorg dat de url verwijst naar het bestand "tiny_mce.js in de "tinymce" map.:
het volgende stukje zorgt voor de configuratie van de editor.
zo is het mogelijk de editor aan te passen naar eigen smaak.
hier vind je een aantal voorbeelden van de verschillende configuratie opties: http://wiki.moxiecode.com/examples/tinymce/installation_example_00.php
en als laatste het formuliertje met daarin een text area, deze tekst area word dus vervangen door de editor, maar hij behoud zijn gegevens als: name="textarea" id="textarea" enzovoort.
dit maakt het dus heel eenvoudig om bijvoorbeeld een cms systeem op te zetten, er zijn genoeg tutorials/scripts te vinden om een formulier te koppelen met een database, zodat ook alle opmaak codes, (die de editor zelf aanmaakt) ook in de database worden opgeslagen.
er zijn echter ook nadelen tenopzichte van andere editors, zo is het standaard niet mogelijk om afbeeldingen vanaf de editor direct te uploaden naar je website, maar voor €50 stelt tinymce een plugin beschikbaar die dit wel mogelijk maakt.
integenstelling tot FCK editor die deze plugin al standaard aanboord heeft.
Dit is een van mijn eerste tutorials, ik hoop dat jullie er wat aan hebben, opbouwende kritiek en verbeteringen zijn natuulijk altijd welkom!
Succes;)
het eerste stukje code laad, zoals ik al eerder zei, de editor in het bestand "tinymce.php" zorg dat de url verwijst naar het bestand "tiny_mce.js in de "tinymce" map.:
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
het volgende stukje zorgt voor de configuratie van de editor.
zo is het mogelijk de editor aan te passen naar eigen smaak.
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas"hier vind je een aantal voorbeelden van de verschillende configuratie opties: http://wiki.moxiecode.com/examples/tinymce/installation_example_00.php
en als laatste het formuliertje met daarin een text area, deze tekst area word dus vervangen door de editor, maar hij behoud zijn gegevens als: name="textarea" id="textarea" enzovoort.
dit maakt het dus heel eenvoudig om bijvoorbeeld een cms systeem op te zetten, er zijn genoeg tutorials/scripts te vinden om een formulier te koppelen met een database, zodat ook alle opmaak codes, (die de editor zelf aanmaakt) ook in de database worden opgeslagen.
er zijn echter ook nadelen tenopzichte van andere editors, zo is het standaard niet mogelijk om afbeeldingen vanaf de editor direct te uploaden naar je website, maar voor €50 stelt tinymce een plugin beschikbaar die dit wel mogelijk maakt.
integenstelling tot FCK editor die deze plugin al standaard aanboord heeft.
Dit is een van mijn eerste tutorials, ik hoop dat jullie er wat aan hebben, opbouwende kritiek en verbeteringen zijn natuulijk altijd welkom!
Succes;)
Reacties
0