Frefred.fr

L'éditeur WYZWYG d'eZ publish Online Editor est à l'heure actuelle assez complet. Tout comme eZ publish , qui permet de rajouter des extensions pour être aussi flexible que l'on veut, Online Editor est aussi très souple et permet de le configurer comme on le désire.

Rajouter des classes CSS

Online Editor nous propose certains éléments HTML de base, tel que les liens, les balises de mise en forme ( gras , italique, ...), les tableaux etc ... En modifiant quelques fichiers, on peut rajouter des classes CSS aux différents éléments, pour permettre une présentation collant plus au site Internet.

Pour déclarer de nouvelles classes CSS , il faut modifier le fichier content.ini.append.php . Selon la balise que vous comptez modifier, il faut rajouter le nom de la balise entre crochets, et rajouter le nom de la classe que vous voulez. Voici un exemple de code pour rajouter une classe CSS "violet" pour les liens.

[link]
AvailableClasses[]
AvailableClasses[]=violet

Une fois ces lignes ajoutées, vous pouvez la retrouver en créant un lien, dans le champ Classe .

Vous pouvez ajouter une description à cette classe, pour qu'elle soit plus explicite. Il faut modifier le fichier content.ini.append.php de l'extension ezdhtml. Voici un exemple sur la classe "violet" :

[link]
ClassDescription[]
ClassDescription[violet]=12px Gras violet

Au lieu de retrouver dans le champ Classe, la ligne violet, on retrouvera à la place 12px Gras Violet.

Rajouter des balises personnalisées

Les balises personnalisées, ou custom tag permettent de rajouter des attributs html dans l'éditeur WYZWYG . Pour rajouter un custom tag, il faut ouvrir le fichier content.ini.append.php . Le plus pratique serait de prendre celui dans le répertoire Settings > Override.

Une fois le fichier ouvert, il faut rajouter une section CustomTagSettings. Dans cette section, on rajoute le nom du custom tag dans le tableau AvailableCustomTags. On peut décider si la nouvelle balise ajoutée est une balise à afficher en tant que block, ou en tant que ligne, grâce au tableau Inline. Voici un exemple pour configurer une balise acronym dans Online Editor :

[CustomTagSettings]
AvailableCustomTags[]=acronym
Inline[acronym]=true

Pour rajouter des attributs personnalisés à la classe, on crée une section avec le nom du custom tag, ou on ajoute un tableau CustomAttributes. On rajoute ensuite les différents attributs.

[acronym]
CustomAttributes[]
CustomAttributes[]=title

Notre custom tag acronym contient donc un attribut "title". Il ne reste plus qu'à créer un template pour pouvoir l'afficher correctement.

Le chemin par défaut pour créer le template d'un custom tag est :
templates/content/datatype/view/ezxmltags/nom_du_tag.tpl.

Dans notre exemple ce serait :
templates/content/datatype/view/ezxmltags/acronym.tpl

Il suffit d'écrire le code HTML allant avec le custom tag. Le contenu principal est représenté par la variable $content. Pour les attributs personnalisés, il suffit de rajouter un $ devant pour avoir la valeur de l'attribut. Toujours pour l'exemple de l'acronym, voici le contenu du template :

<acronym title="{$title}">{$content}</acronym>

Vous pouvez désormais rajouter tous les customs tags que vous désirez :

Quelques articles intéréssants sur Online Editor :

• Inclure une vidéo de DailyMotion, Youtube ou autre dans eZ publish
• Créer un lien pour télécharger un fichier dans Online Editor