Online Editor OE 5.0 : configurer les couleurs

Date de publication: le vendredi 15 juillet 2011 à 11h17
Dernière modification: par Pascal BOYER le vendredi 15 juillet 2011 à 13h23

Mettre de la couleur dans les textes

Par défaut, Online Editor, dans son ancienne version 4 comme dans sa nouvelle mouture 5.0, ne propose pas aux rédacteurs de contenus la possibilité de mettre du texte en couleur.

Ce choix, qui peut de prime abord sembler curieux, repose en fait sur un constat simple: plus vous offrez de possibilités à un rédacteur et plus vous augmentez les chances que la charte graphique du site soit détériorée par l'emploi excessif, entre autres, d'une multitude de polices de différentes tailles et couleurs. Pour cette raison, un rédacteur de contenu ne dispose, par défaut, que des options suivantes:

• Gras
• Itallique
• Gras et Itallique
• Barré
• Souligné (qui ne fonctionne pas chez moi avec ma version 4 de Online Editor)
• Titres 1 à 6
• ainsi que deux trois autres possibilités.

Il arrive cependant que l'emploi de couleurs réponde à un besoin incontournable. Pour cela, Online Editor autorise, après configuration par les développeurs du site, la mise à disposition soit de quelques couleurs soit d'un sélecteur de couleurs traditionnel proposant 2^²⁴ couleurs (16.777.216 couleurs).

:
Je n'ai pas vérifié, mais il est fort probable que cet article puisse s'appliquer également aux versions 4 de Online Editor.

Une liste de quelques couleurs

Voilà l'objectif que je vous propose d'atteindre et dont le résultat final est illustré par les 3 captures d'écran ci-après:

Fig. 1: La liste des couleurs disponibles à partir du Online Editor

Fig. 2: L'affichage des couleurs dans le champ Bloc XML de l'interface d'édition des objets

Fig. 3: L'affichage des couleurs sur le site public

I - Définir les nouvelles balises personnalisées

Afin de proposer une liste de couleurs aux rédacteurs de contenus, il faut commencer par définir de nouvelles balises personnalisées dans le fichier de surcharge content.ini.append.php du siteaccess d'administration.

22 [CustomTagSettings]
23 AvailableCustomTags[]
24 AvailableCustomTags[]=couleur_sansCouleur
25 AvailableCustomTags[]=couleur_bleu1     <== CHAQUE NOUVELLE BALISE EST AJOUTÉE AU TABLEAU «AvailableCustomTags[]»
26 AvailableCustomTags[]=couleur_bleu2
27 AvailableCustomTags[]=couleur_bleu3
28 AvailableCustomTags[]=couleur_bleu4
29 AvailableCustomTags[]=couleur_bleu5
30 AvailableCustomTags[]=couleur_jaune1
31 AvailableCustomTags[]=couleur_jaune2
32 AvailableCustomTags[]=couleur_orange1
33 AvailableCustomTags[]=couleur_orange2
34 AvailableCustomTags[]=couleur_orange3
35 AvailableCustomTags[]=couleur_rose1
36 AvailableCustomTags[]=couleur_rose2
37 AvailableCustomTags[]=couleur_rose3
38 IsInline[couleur_sansCouleur]=true
39 IsInline[couleur_bleu1]=true
40 IsInline[couleur_bleu2]=true
41 IsInline[couleur_bleu3]=true   <== CHAQUE NOUVELLE BALISE EST AJOUTÉE AU TABLEAU «IsInline[]»
42 IsInline[couleur_bleu4]=true
43 IsInline[couleur_bleu5]=true
44 IsInline[couleur_jaune1]=true
45 IsInline[couleur_jaune2]=true
46 IsInline[couleur_orange1]=true
47 IsInline[couleur_orange2]=true
48 IsInline[couleur_orange3]=true
49 IsInline[couleur_rose1]=true
50 IsInline[couleur_rose2]=true
51 IsInline[couleur_rose3]=true
 
 
56 [couleur_bleu1]          <== POUR CHAQUE NOUVELLE BALISE ON CRÉE UNE SECTION À SON NOM
57 CustomAttributes[]=bleu1  <== UN ATTRIBUT PERSONNALISÉ ASSOCIÉ À LA BALISE PERSONNALISÉE
58 CustomAttributesDefaults[bleu1]=#000079  <== VALEUR HEXADÉCIMALE DE LA COULEUR ASSOCIÉE À L'ATTRIBUT PERSONNALISÉ DE LA NOUVELLE BALISE
59 [couleur_bleu2]
60 CustomAttributes[]=bleu2
61 CustomAttributesDefaults[bleu2]=#334499
62 [couleur_bleu3]
63 CustomAttributes[]=bleu3
64 CustomAttributesDefaults[bleu3]=#4c4c7e
65 [couleur_bleu4]
66 CustomAttributes[]=bleu4
67 CustomAttributesDefaults[bleu4]=#b8bfb8
68 [couleur_bleu5]
69 CustomAttributes[]=bleu5
70 CustomAttributesDefaults[bleu5]=#007bff
71 [couleur_jaune1]
72 CustomAttributes[]=jaune1
73 CustomAttributesDefaults[jaune1]=#ffff00
74 [couleur_jaune2]
75 CustomAttributes[]=jaune2
76 CustomAttributesDefaults[jaune2]=#f5ff00
77 [couleur_orange1]
78 CustomAttributes[]=orange1
79 CustomAttributesDefaults[orange1]=#ff7b00
80 [couleur_orange2]
81 CustomAttributes[]=orange2
82 CustomAttributesDefaults[orange2]=#feaa33
83 [couleur_orange3]
84 CustomAttributes[]=orange3
85 CustomAttributesDefaults[orange3]=#ffc900
86 [couleur_rose1]
87 CustomAttributes[]=rose1
88 CustomAttributesDefaults[rose1]=#ed33fe
89 [couleur_rose2]
90 CustomAttributes[]=rose2
91 CustomAttributesDefaults[rose2]=#ff00a0
92 [couleur_rose3]
93 CustomAttributes[]=rose3
94 CustomAttributesDefaults[rose3]=#ff64ff

Configuration du fichier de surcharge content.ini.append.php du siteaccess d'administration

Point importants:

• Lignes 23 à 94 : elles sont toutes situées sous la même section [CustomTagSettings]

• Ligne 24 : la balise couleur_sansCouleur servira à supprimer une couleur précédemment affectée à une chaîne de caractères. Je n'ai en effet trouvé aucun moyen direct et simple de désactiver l'application d'une balise à une chaîne de caractères.
  Les deux solutions possibles: soit supprimer le texte coloré puis à le réécrire (ce qui n'est vraiment pas pratique s'il s'agit d'un paragraphe complet), soit désactiver l'éditeur puis effacer le code autour du texte coloré (impossible de demander à un rédacteur de recourir à ce genre de méthode).
  La balise couleur_sansCouleur est donc une alternative à ces deux méthodes.
• La balise couleur_sansCouleur est absente des lignes 56 à 94.

• Lignes 38 à 51 : indiquent au système que l'application de ces balises personnalisées devra se faire en ligne, c'est à dire qu'elles ne devront pas être directement encadrées par des balises <p> et </p> qui provoqueraient alors un passage à la ligne avant et après le texte mis en couleur.

:
Sur la base du dernier point ci-dessus, on en déduit que la même information devra être passée au système quant à l'affichage du texte coloré sur le site public. Il découle donc de cela que le fichier de surcharge content.ini.append.php du siteaccess public devra également contenir ces lignes:

11 [CustomTagSettings]
12 IsInline[couleur_sansCouleur]=true
13 IsInline[couleur_bleu1]=true
14 IsInline[couleur_bleu2]=true
15 IsInline[couleur_bleu3]=true
16 IsInline[couleur_bleu4]=true
17 IsInline[couleur_bleu5]=true
18 IsInline[couleur_jaune1]=true
19 IsInline[couleur_jaune2]=true
20 IsInline[couleur_orange1]=true
21 IsInline[couleur_orange2]=true
22 IsInline[couleur_orange3]=true
23 IsInline[couleur_rose1]=true
24 IsInline[couleur_rose2]=true
25 IsInline[couleur_rose3]=true

Configuration du fichier de surcharge content.ini.append.php du siteaccess public

• La liste déroulante de la figure 1 est réalisée par l'appel du template extension/ezoe/design/standard/templates/ezoe/customattributes.tpl

• La valeur sélectionnée dans le champ Balise fait appel au template extension/ezoe/design/standard/templates/ezoe/customattributes/select.tpl

• Le nom du champ Bleu1 ainsi que la valeur inscrite dans le champ (voir figure 5) fait appel au template extension/ezoe/design/standard/templates/ezoe/customattributes/text.tpl

Création des templates de vue

Chaque nouvelle balise utilise un template de vue dont le nom est celui de la balise.

La liste suivante de templates doit donc être créée dans design/plain_site/templates/content/datatype/view/ezxmltags/ où plain_site correspond au design du siteaccess public:

ls -la design/plain_site/templates/content/datatype/view/ezxmltags/

-rw-r--r-- 1 root     root       11 mai 19 20:48 couleur_sansCouleur.tpl
-rw-r--r-- 1 root     root       90 mai 19 20:57 couleur_bleu1.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_bleu2.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_bleu3.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_bleu4.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_bleu5.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_jaune1.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_jaune2.tpl
-rw-r--r-- 1 root     root       78 mai 19 21:03 couleur_orange1.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_orange2.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_orange3.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_rose1.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_rose2.tpl
-rw-r--r-- 1 root     root       78 mai 19 20:50 couleur_rose3.tpl

Liste des templates à créer dans le répertoire design/plain_site/templates/content/datatype/view/ezxmltags/

A l'exception du template couleur_sansCouleur.tpl, chacun de ces templates contient une ligne semblable à celle-ci:

<span {if is_set( $bleu1 )}style="color: {$bleu1}"{/if}>{$content}</span>

Dans la ligne ci-dessus on voit que l'attribut personnalisé (voir ligne 57, 60, 63 etc...) sert à créer un style color appliqué à la balise <span> dont la valeur est celle associée à l'attribut personnalisé (voir ligne 58, 61, 64 etc...).

Quant au template couleur_sansCouleur.tpl, il contient simplement:

{$content}

Utilisation des nouvelles balises

Après avoir vidé tous les caches il devient possible d'utiliser les nouvelles balises à partir de l'interface de Online Editor.

Pour mettre un caractère, un mot, une phrase ou un paragraphe en couleur, on commence par le surligner puis on clique sur le bouton « Insérer une balise personnalisée»:

Fig. 4: Les 2 premières étapes pour colorer une chaîne de caractères

Le bouton « Insérer une balise personnalisée» engendre l'affichage de la bote de dialogue suivante:

Fig. 5: La boite de dialogue de sélection d'une couleur

...dans laquelle il est possible de sélectionner l'une des nouvelles couleurs que l'on vient de créer:

Fig. 6: Le menu déroulant de sélection d'une couleur

Après avoir choisi une couleur puis valider son choix avec le bouton OK, l'affichage dans le champ de type Block XML du Online Editor ressemble à ceci:

Fig. 7: Affichage par défaut d'un texte coloré dans l'interface de Online Editor

Si l'on clique sur le bouton Envoyer pour publication puis que l'on rafraîchit la page du site public, on obtient alors:

Fig. 8: Affichage par défaut d'un texte coloré sur le site public

II - Configurer l'affichage dans le champ de type Bloc XML de Online Editor

Si l'affichage des couleurs sur le site public répond en tout point à nos attentes, celui de l'interface d'édition dans le champ Bloc XML de Online Editor est perfectible en deux points:

• Le rédacteur ne voit pas la couleur liée à la balise qu'il sélectionne dans le menu déroulant (voir figure 6),
• Le rédacteur ne voit pas non plus la couleur affectée à une chaîne de caractères dans le champ Bloc XML de Online Editor (voir figure 7).

Nous allons donc remédier à ces deux carences.

Si l'on observe le code source du texte de la figure 7, on constate que le texte surligné en bleu est lié au code HTML suivant:

<span class="mceItemCustomTag couleur_rose2" customattributes="rose2|#ff00a0" type="custom">Papa Kourand participe au 12ème Festival de la Jeunesse à Moscou</span>

La simple règle CSS suivante:

1 span.couleur_rose2 {
2     background-color: transparent;
3     color: #ff00a0;
4 }

placée dans une feuille de style située obligatoirement dans un sous-répertoire de extension/ezoe/design/standard/stylesheets/skins/xxx/ permettra de modifier ainsi l'affichage dans Online Editor:

Fig. 9: Affichage de la couleur du texte dans l'interface de Online Editor

Définir la feuille de style CSS

Pour indiquer à Online Editor quelle feuille de styles CSS utiliser, vous devez renseigner le tableau EditorCSSFileList[] de la section [StylesheetSettings] du fichier de surcharge extension/ezoe/settings/design.ini.append.php de l'extension ezoe:

[StylesheetSettings]
EditorCSSFileList[]=skins/xxx/onlineEditor.css

où xxx sera remplacer le nom d'un sous-répertoire.

Pensez à vider les caches.

Pour l'ensemble des couleurs définies dans notre exemple, la feuille de styles onlineEditor.css contiendra:

1 span.couleur_sansCouleur {         <== RÈGLE POUR SUPPRIMER LA COULEUR !!!
2     background-color: transparent;
3 }
4 span.couleur_bleu1 {
5     background-color: transparent;
6     color: #000079;
7 }
8 span.couleur_bleu2 {
9     background-color: transparent;
10     color: #334499;
11 }
12 span.couleur_bleu3 {
13     background-color: transparent;
14     color: #4c4c7e;
15 }
16 span.couleur_bleu4 {
17     background-color: transparent;
18     color: #b8bfb8;
19 }
20 span.couleur_bleu5 {
21     background-color: transparent;
22     color: #007bff;
23 }
24 span.couleur_jaune1 {
25     background-color: transparent;
26     color: #ffff00;
27 }
28 span.couleur_jaune2 {
29     background-color: transparent;
30     color: #f5ff00;
31 }
32 span.couleur_orange1 {
33     background-color: transparent;
34     color: #ff7b00;
35 }
36 span.couleur_orange2 {
37     background-color: transparent;
38     color: #feaa33;
39 }
40 span.couleur_orange3 {
41     background-color: transparent;
42     color: #ffc900;
43 }
44 span.couleur_rose1 {
45     background-color: transparent;
46     color: #ed33fe;
47 }
48 span.couleur_rose2 {
49     background-color: transparent;
50     color: #ff00a0;
51 }
52 span.couleur_rose3 {
53     background-color: transparent;
54     color: #ff64ff;
55 }

III - Configurer l'affichage des boites de dialogue de Online Editor

Nous allons à présent configurer l'affichage des couleurs dans le menu déroulant (voir figure 1).

Voici les lignes 4 et 8 du fichier extension/ezoe/design/standard/templates/ezoe/customattributes/select.tpl:

4  <option class="{$custom_value}" value="{if $custom_value|ne('0')}{$custom_value|wash}{/if}"{if $custom_value|eq( $custom_attribute_default )} selected="selected"{/if}>{$custom_name|wash}</option>
8  <option class="{$custom_value}" value="{if $custom_value|ne('0')}{$custom_value|wash}{/if}"{if $custom_value|eq( $custom_attribute_default )} selected="selected"{/if}>{$custom_name|wash}</option>

dans lesquelles j'ai ajouté:

class="{$custom_value}"

• $custom_value vaut le nom du paramètre personnalisé défini par les lignes 57, 60, 63 etc...

Une feuille de styles CSS placée dans extension/ezoe/design/standard/stylesheets/skins/xxx/ contenant cette règle:

option.couleur_rose1 {
   color: #ed33fe;
}

suffira à colorer l'entrée couleur_rose1 du menu déroulant de la figure 6

Définir la feuille de style CSS

Pour indiquer à Online Editor quelle feuille de styles CSS utiliser pour ses boites de dialogue, vous devez renseigner le tableau EditorDialogCSSFileList[] de la section [StylesheetSettings] du fichier de surcharge extension/ezoe/settings/design.ini.append.php de l'extension ezoe:

[StylesheetSettings]
EditorCSSFileList[]=skins/xxx/onlineEditor.css
EditorDialogCSSFileList[]=skins/xxx/onlineEditorDialog.css

où xxx sera remplacer le nom d'un sous-répertoire.

Pour l'ensemble des couleurs définies dans notre exemple, la feuille de styles onlineEditorDialog.css contiendra:

1 option.couleur_bleu1 {
2     color: #000079;
3 }
4 option.couleur_bleu2 {
5     color: #334499;
6 }
7 option.couleur_bleu3 {
8     color: #4c4c7e;
9 }
10 option.couleur_bleu4 {
11     color: #b8bfb8;
12 }
13 option.couleur_bleu5 {
14     color: #007bff;
15 }
16 option.couleur_jaune1 {
17     color: #ffff00;
18 }
19 option.couleur_jaune2 {
20     color: #f5ff00;
21 }
22 option.couleur_orange1 {
23     color: #ff7b00;
24 }
25 option.couleur_orange2 {
26     color: #feaa33;
27 }
28 option.couleur_orange3 {
29     color: #ffc900;
30 }
31 option.couleur_rose1 {
32     color: #ed33fe;
33 }
34 option.couleur_rose2 {
35     color: #ff00a0;
36 }
37 option.couleur_rose3 {
38     color: #ff64ff;
39 }

Après avoir vidé tous les caches, le résultat obtenu est celui illustré par la figure 2.

IV - Aller un peu plus loin

Il est même possible d'afficher en couleur le contenu du champ Bleu1 de la figure 5.

Pour cela, dans l'unique ligne du template extension/ezoe/design/standard/templates/ezoe/customattributes/text.tpl:

<input type="text" name="{$custom_attribute}" id="{$custom_attribute_id}_source" value="{$custom_attribute_default|wash}"{if $custom_attribute_disabled} disabled="disabled"{/if} class="{$custom_attribute_classes|implode(' ')}" title="{$custom_attribute_title|wash}" />

on remplace la chaîne:

class="{$custom_attribute_classes|implode(' ')}"

par:

style="color:{$custom_attribute_default|wash};"

Et on vide les caches pour obtenir ceci:

Fig. 10: La couleur affichée dans le deuxième champ s'adapte en temps réel au choix fait dans la liste déroulante Balise

:
Je ne crois pas qu'il soit actuellement possible d'afficher la couleur pour la balise personnalisée qui est sélectionnée et affichée par le champ Balise. Repportez-vous au template extension/ezoe/design/standard/templates/ezoe/customattributes/select.tpl

:
Dans les paragraphes II, III et IV, ce sont les fichiers et templates par défaut qui ont été modifiés. Ils seront donc écrasé lors d'une mise à jour de eZ Publish.

Commentaires