Éditeur de textes (htmlArea RTE)

Au menu de cet article :

Il est également utile de lire  la documentation complète de cet éditeur ou de jeter un œil à ce tutoriel : «  Recommended Configuration for htmlArea ».

Remarque : Sauf contre-indication, le code TypoScript proposé se tape dans la zone pageTS, et non pas dans la zone Setup du template.

À la fin de chaque partie, un fichier à télécharger propose une configuration « type ». Les différents fichiers peuvent simplement être enregistrés dans le répertoire fileadmin puis référencés dans la zone pageTS de la façon suivante :

<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/rte.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/rte_buttons.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/rte_proc.txt">
<INCLUDE_TYPOSCRIPT: source="FILE: fileadmin/static/ts/rte_styles.txt">

Configuration de base de l’éditeur

Masquer les boutons inutiles

Le principe de base est de commencer par demander d’afficher tous les boutons de l’éditeur puis de masquer ceux qui sont inutiles :

RTE.default {
	// Buttons to show
	showButtons = *
 
	// Buttons to hide
	hideButtons (
	  underline,strikethrough,user,acronym,inserttag,about,
	  showhelp,fontstyle,fontsize,lefttoright,righttoleft,
	  textcolor,bgcolor,textindicator
	)
 
	// Group buttons (Mozilla only)
	keepButtonGroupTogether = 1
 
	// Hide table operations
	hideTableOperationsInToolbar = 0
 
	// Show toggle borders item even if table operations are disabled
	keepToggleBordersInToolbar = 0
 
	// Display status bar
	showStatusBar = 1
}

La liste exhaustive des boutons disponibles est la suivante :

Alignement
center, indent, justifyfull, left, lefttoright, outdent, right, righttoleft
Édition
chMode, copy, cut, findreplace, paste, redo, selectall, spellcheck, undo
Formatage
bgcolor, bold, cleanword, italic, orderedlist, removeformat, strikethrough, subscript, superscript, textcolor, underline, unorderedlist
Insertion
acronym, emoticon, image, insertcharacter, inserttag, line, link
Styles
blockstyle, blockstylelabel, fontsize, fontstyle, formatblock, splitblock, textindicator, textstyle, textstylelabel
Tableaux
celldelete, cellinsertafter, cellinsertbefore, cellmerge, cellproperties, cellsplit, columndelete, columninsertafter, columninsertbefore, columnsplit, rowdelete, rowinsertabove, rowinsertunder, rowproperties, rowsplit, table, tableproperties, toggleborders
Autres boutons
about, showhelp, user

Ordonner les boutons

Il suffit de définir comme suit la liste des boutons dans l’ordre désiré. Les mots-clés space, bar et linebreak permettent respectivement d’espacer les boutons, de créer un séparateur vertical (ligne pointillée) ou de revenir à la ligne.

RTE.default {
    toolbarOrder {
        blockstylelabel, blockstyle, space, textstylelabel,
        textstyle, bar, linebreak, fontstyle, space, fontsize,
        space, formatblock, bar, bold, italic, underline, bar,
        ...
    }
}

Configuration prête à l’emploi

Remarque : Le contenu est à coller dans le pageTS ou à référencer comme expliqué en début d'article.

Restreindre les balises autorisées

La configuration est trop longue pour être affichée sur cette page. Lisez simplement le contenu du fichier de configuration proposé ci-dessous.

L’astuce pour que tout fonctionne correctement, est de bien connaître les interactions entre l’éditeur RTE et TYPO3 pour générer les pages. En particulier, la configuration du RTE dans le pageTS ne suffit pas à obtenir un rendu valide. Il faut encore modifier un peu le fonctionnement de l’extension css_styled_content, qui se charge de générer le code HTML qui est effectivement affiché dans le navigateur :

	## Tags allowed
	## Please use the same list as RTE.default.proc.allowTags (pageTS)
lib.parseFunc.allowTags (
	a, abbr, acronym, address, blockquote, b, br, caption, cite,
	code, ...
)
 
	## Tags denied
 	## Make sure we can set rules on any tag listed in allowTags.
lib.parseFunc.denyTags >
 
lib.parseFunc_RTE.allowTags < lib.parseFunc.allowTags
lib.parseFunc_RTE.denyTags >

Une question qui revient régulièrement sur les forums, c’est de savoir comment effectivement afficher une balise address sans qu’elle soit entourée d’une balise p. Le code suivant permet d’y arriver :

	## We still want address tags being parsed to enable links
lib.parseFunc_RTE.externalBlocks.address {
	stripNL = 1
	stdWrap.parseFunc = < lib.parseFunc
}

Configuration prête à l’emploi

Remarque : Le contenu est à coller dans le pageTS ou à référencer comme expliqué en début d'article.

Dans tous les cas, n’hésitez pas à lire  la documentation sur le fonctionnement des transformations.

Choisir les styles disponibles

Consultez le tutoriel «  Customizing RTE » de Marlies Cohen.

Masquer les styles de blocs inutiles

Consultez le tutoriel «  Customizing RTE » de Marlies Cohen.

Configuration prête à l’emploi

Remarque : Le contenu est à coller dans le pageTS ou à référencer comme expliqué en début d'article.

Ajouter des styles de blocs

Consultez le tutoriel «  Customizing RTE » de Marlies Cohen.

Flattr