HtmlArea RTE : gestion des couleurs
De Typo3 CMS / Documentation Typo3 / Support Typo3.
Sommaire |
Avant-propos
La méthode décrite dans ce document correspond à une utilisation "classique" du RTE htmlArea, c'est-à-dire qu'on part du principe qu'on utilise la configuration par défaut :
Default configuration settings : Typical
Toute la configuration décrite se fait dans le module "Page - TS Config" sur la page racine d'un site.
Pour appliquer la configuration aux utilisateurs FE, on peut ajouter ces lignes tout en bas de la config employée :
RTE.default.FE < RTE.default
Autorisation et conformité des tags
Afin d'éviter la génération de tags <font> (dépréciés), on utilise le paramètre suivant :
RTE.default.useCSS=1
De cette façon, au lieu de générer <font color="couleur"> l'outil génère ce code : <span style="color:couleur">
Pour que cela fonctionne, il faut ajouter cette ligne sinon l'attribut style ne peut être appliqué au tag <span> :
RTE.default.proc.entryHTMLparser_db.tags.span.fixAttrib.style.unset >
Application des couleurs aux autres tags
- Sur le tags <p> et <div>, par défaut on ne peut pas appliquer l'attribut style, les attributs autorisés sont : id, title, dir, lang et xml:lang
On peut donc ajouter cette ligne, à configurer selon ses besoins :
RTE.default.proc.keepPDIVattribs= style,class RTE.default.proc.entryHTMLparser_db.tags.p.allowedAttribs:= addToList(style)
- Pour les autres tags, il suffit de suivre l'exemple ci-dessous et de l'adapter à ses besoins, l'idée étant d'autoriser l'attribut style sur les tags choisis :
RTE.default.proc.entryHTMLparser_db.tags.em.allowedAttribs=style RTE.default.proc.entryHTMLparser_db.tags.strong.allowedAttribs=style RTE.default.proc.entryHTMLparser_db.tags.ul.allowedAttribs=style,class
Internet Explorer
Dans les versions de htmlArea ≤ 1.7.6 le paramétrage ci-dessus ne fonctionne pas avec IE qui génère des tags <font>.
On a deux possibilités :
- soit ne pas utiliser le sélecteur de couleur et créer des classes spécifiques pour ces couleurs (mise en œuvre lourde)
- soit autoriser les tags <font> et leurs attributs, ce qui se fait comme ceci :
RTE.default.proc.entryHTMLparser_db.removeTags := removeFromList(font) RTE.default.removeTags := removeFromList(font) RTE.default.proc.entryHTMLparser_db.tags.font.allowedAttribs = color
Une autre solution est possible dans les dernières versions de Typo3, elle est décrite en fin d'article (IE et les couleurs via <span>)
Ajout des boutons
L'ajout des boutons se fait via le paramètre RTE.default.showButtons dans Page TSConfig.
Si ce paramètre est déjà renseigné, il suffit d'ajouter textcolor et bgcolor à la liste des boutons déjà présents, sinon on peut ajouter cette ligne :
RTE.default.showButtons := addToList (textcolor,bgcolor)
Le color picker et les couleurs personnalisées
Quand on utilise un bouton de couleur, par défaut on affiche une popup contenant un sélecteur de couleur standard :
Un clic sur la couleur choisie applique le code au texte sélectionné.
Pour retirer cette couleur, l'outil propose la petite croix (no color) ; cependant son utilisation est particulière : pour que cela fonctionne la sélection manuelle du texte à modifier n'est pas efficace, il faut dans l'éditeur cliquer sur le tag qui applique la couleur au texte (en bas de l'éditeur, ici : span) et ensuite utiliser le bouton de couleur appliquer no color :
Couleurs personnalisées
Pour ajouter ses propres couleurs, il suffit de les définir dans le TS Config ; voici un exemple qui correspond aux couleurs par défaut de l'éditeur MS Word :
RTE.colors {
color1 {
name = Rouge foncé
value = #c00000
}
color2 {
name = Rouge
value = #ff0000
}
color3 {
name = Jaune orangé
value = #ffc000
}
color4 {
name = Jaune vif
value = #ffff00
}
color5 {
name = Vert clair
value = #92d050
}
color6 {
name = Vert foncé
value = #00b050
}
color7 {
name = Bleu clair
value = #00b0f0
}
color8 {
name = Bleu foncé
value = #0070c0
}
color9 {
name = Bleu outremer
value = #002060
}
color10 {
name = Violet
value = #7030a0
}
color11 {
name = Blanc
value = #ffffff
}
}
RTE.default.colors = color1,color2,color3,color4,color5,color6,color7,color8,color9,color10,color11
On obtient un nouveau sélecteur de couleurs :
Par la suite, on peut aussi enlever le sélecteur par défaut, avec cette ligne :
RTE.default.disableColorPicker = 1
et on obtient ce résultat :
IE et les couleurs via <span>
Dans les versions de Typo3 à partir de la 4.2, le htmlArea a subi une refonte assez importante.
Le cas d'Internet Explorer n'est pas encore réglé mais le problème a été soulevé : http://bugs.typo3.org/view.php?id=7875
Il est dorénavant réglé dans la future version 4.3 de Typo3.
Le htmlArea est passé en version 1.8.0, cela dit il n'est pas encore disponible sur le TER.
Ayant installé une version alpha de Typo3 4.3 j'ai pu récupérer un .t3x de cette version et l'ai testée sur un Typo3 version 4.2.2, en l'installant en local.
Une fois ignoré le message d'alerte quant à la version de Typo3, j'ai pu tester le fonctionnement des couleurs dans IE6, IE7 qui ont généré les bons tags, en cochant la case "Enable features that use the style..." dans la configuration de l'extension :
Tant que j'y étais, j'ai pu tester l'outil sous d'autres navigateurs avec succès, en activant le RTE sous Opera :
Navigateurs testés :
- IE6
- IE7
- Firefox 3 (Windows)
- Firefox 3 (Ubuntu)
- Opera (Windows)
- Opera (Ubuntu)
- Safari (Windows)
Attention : ceci a été testé sur une version 4.2.2 de Typo3 et ne fonctionnera pas sur des versions antérieures à la 4.2 qui utilisent des versions plus anciennes d'htmlArea (antérieures à 1.7.x).
