RTE implementaties

Wat is een RTE

De toepassing van RTE's (Rich Text Editors) is vooral gangbaar bij een CMS (Content Management System). Dit heeft te maken met het feit dat je gebruikers niet wil lastig vallen met HTML voor het doen van een eenvoudige opmaak. Enige kennis van internet kan natuurlijk nooit kwaad. RTE's zijn er in vele soorten en maten. Met een RTE maak je eigenlijk een pagina op met HTML echter kun je dat doen zonder de html maar met buttons en dropdowns etc. ALs je een keuze maakt voor een beplaalde RTE is dit van een aantal eisen afhankelijk:

TinyMCE: Advanced

YUI: SimpelEditor

Er bestaan een aantal opensource RTE's belangrijke zijn TinyMCE (zeer uitgebreid) en ook YUI (Yahoo) heeft een een RTE: editor genaamd. Er zijn er nog meer als je internet af googled.

In deze les bepreken we de YUI editor dit aangezien deze redelijk nieuw is en compact. Daar naast is deze Editor goed aan te passen ookal moet je wel wat meer weten van de yui-library. Tiny MCE is veel uitgebreider maar veel moeilijker aan te passen.

YUI SimpleEditor en YUI Editor

Onderscheid wordt gemaakt tussen simple editor en editor. Editor is een uit bereiding van Simple editor. Dat is handig aangezien we dan als het nodig is makkelijk kunnen uitbreiden naar een complexere editor met weinig code aanpassingen. Voor dat we aan de slag kunnen gaan is het van belang dat we natuurlijk YUI downloaden. Als we de hele Lib hebben hebben we niet alles nodig. Er is een tooltje bij Yahoo die laatzien wat je nodig hebt en zelfs de code genereert. Deze is te zien op http://developer.yahoo.com/yui/articles/hosting/#configure. Daar kies je dan Afhankelijk van je keuze SimpleEditor of Editor.

Nadat we de hele library hebben gedownload en op de goede plaats hebben gezet gaan we aan de slag. Editor en SimpleEditor werken met een iframe die wordt geplaatst over een textarea. In het formulier hebben we dus een textarea nodig waarop we (in eerste instantie) SimpleEditor gaan plaatsen.

Benodigdheden

De bij de hierboven gegeneerde links en scripts moeten nog worden aangepast aan de locale parameters van de site. Ook te zien in een iets andere vorm in een voorbeeld 

<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/assets/skins/sam/skin.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/container/container_core-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/button/button-min.js"></script>

hier bij wil ik http://yui.yahooapis.com/2.5.2/ vervangen voor een relatief pad op mijn server: bijvoorbeeld ../MailLibs/yui/: We krijgen dan de volgende code: 

<!-- css -->
<link rel="stylesheet" type="text/css" href="../MailLibs/yui/build/assets/skins/sam/skin.css">
<!-- en onder aan de pagina js -->
<script type="text/javascript" src="../MailLibs/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../MailLibs/yui/build/container/container_core-min.js"></script>
<script type="text/javascript" src="../MailLibs/yui/build/menu/menu-min.js"></script>
<script type="text/javascript" src="../MailLibs/yui/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../MailLibs/yui/build/button/button-min.js"></script>
<script type="text/javascript" src="../MailLibs/yui/build/editor/editor-beta-min.js"></script>

Het is goed om te bedenken dat als je een nieuwe versie van YUI download dat je deze routine nogeens een keer uitvoert

Het Forumlier

We beginnen met een eenvoudig formulier waarbij we een aantal vormgevings aanpassingen moeten doen. Dit heeft te maken dat de textarea wordt vervangen door een iframe. (het is natuurlijk ook afhankelijk van je eigen vormgeving).

<form>
	<fieldset>
		<legend>Test voor Editor</legend>
		<div>
			<label>Wordt getoont</label>
			<input type="text" name="naam" id="naam_id" value="" />
		</div>
		<div>
			<label>Wordt vervangen</label>
			<textarea name="grotetext" id="grotetext_id"></textarea>
		</div>
	</fieldset>
</form>

De textarea die omgeschreven moet worden moet een id krijgen (in iedergeval die). Deze zullen we gaan vervangen door Simple editor met een eenvoudig jscript.

Initalistatie

Allereerst moeten we een class zetten waar de RTE moetworden gerendert. Doen we dat niet dan krijgen we wel de functionaliteit maar niet de gewenste skin. Dit is gedaan om je eigen skin te kunnen css als je daar behoefte aan hebt natuurlijk.

in de div boven de TEXTAREA komt een class ( in ons geval de bestaande )

		<div class="yui-skin-sam">
			<label>Wordt vervangen</label>
			<textarea name="grotetext" id="grotetext_id"></textarea>
		</div>

Om SimpleEditor of Editor zonder poespas te initaliseren hebben we een klein stukje script nodig. Deze zit gevangen in een ogeschijnlijk raar stuk code. De al omvattende onload binnen de YUI lib wordt gekenmerkt door het openen van haken met daar binnen een functie. Dit roept de toepasselijke functies op na het laden van de pagina.

Simple Editor

De code benodigd:

<script type="text/javascript">
//INIT
( function() {
	//Start with the constructor for our RTE:
	var myEditor = new YAHOO.widget.SimpleEditor('grotetext_id', { });
	myEditor.render();
} )();
</script>

Editor

En een kleine aanpassing voor Editor

<script type="text/javascript">
//INIT
( function() {
	//Start with the constructor for our RTE:
	var myEditor = new YAHOO.widget.Editor('grotetext_id', { });
	myEditor.render();
} )();
</script>

Config aanpassingen

Zoals je in de code ziet staan er twee accolades na de op te roepen id in het script. Dez twee accolades zijn Aanwezig om eventuele config settings te maken naast default config. Alle te zetten config parameters staan in de API reference.Alle config parameters worden gescheiden doormiddel van komma's en type en waarde worden gescheiden door een dubbele punt. Afhankelijk van het type (string, boolean en number) wordt de waarde wel of niet met quotes geschreven

Hoogte en breedte

Deze zijn er meerder soorten en maten. We hebben in de aanbieding:

Interne CSS

Als je een site is opgemaakt met css is het handig dat je degene die de site edit ook laat zien wat het resultaat wordt. Je moet dus niet te veel willen met De HTML Maar je kan een heel eind komen mits je het goed opzet. In principe willen simpleEditor en Editor gewoon een opmaak zien met css. Echter kan je ook een andere manier gebruiken door doormiddel van de @import property in css. Deze moet je dan linken tenopzichte van het geopende document.

De twee bovenstaande samengevat

<script type="text/javascript">
//INIT
( function() {
	//Start with the constructor for our RTE:
	var myConfig = {
		width: '400px',
		height: '300px',
		css: '@import url(../css/RTE_styles.css);'
	};
	var myEditor = new YAHOO.widget.Editor('grotetext_id', myConfig);
	myEditor.render();
	
} )();
</script>

Heb niet al te veel verwachtingen van de implementatie van de CSS. Niet alle css properties worden uitvoerd. Fonts en background-colors worden wel uitvoerd. Color wordt bevoorbeeld niet uitvoert.

Als je andere toepassingen wil zien kan dat bij op