Le fichier edition-styles.xml permet de définir des styles qui seront automatiquement appliqués aux éléments de l'éditeur riche. Par défaut, il est possible de définir des styles pour les titres, les images, les tableaux, les liens, les paragraphes, les listes ordonnées et les listes non ordonnées.

Noter que des styles par défaut sont définis dans l'application Ametys et ne sont pas modifiables.

Les différents éléments et leurs styles par défaut

Les styles des paragraphes sont définis par la balise para et ne comportent aucune classe par défaut.

Les styles des images sont définis par la balise image et comportent par défaut les classes "simple" et "invisible".

Les styles des tableaux sont définis par la balise table et comportent par défaut les classes "simple" et "invisible".

Les styles des liens sont définis par la balise link et comportent par défaut les styles "Normal" et "Invisible".

Les styles des listes ordonnées sont définis par la balise orderedlist et comportent par défaut les classes "arabic", "lowerroman", "upperroman", "loweralpha et "upperalpha".

Les styles des listes non ordonnées sont définis par la balise unorderedlist et comportent par défaut les classes, "disc" et "square".

Créer des styles personnalisés pour un élément

Import des feuilles de styles

Pour chaque élément, 2 imports de CSS décrivant les styles des boutons et les styles dans l'éditeur riche sont opérés

<import>
	<button><!-- Chemin vers la CSS des boutons --></button>
	<inline-editor><!-- Chemin vers la CSS des styles de l'élément --></inline-editor>
</import>

Les chemins définis dans les balises sous-jacentes sont relatifs au dossier de ressources de la charte graphique : skin://resources.

La balise <button> comprend le chemin vers la CSS qui définit les styles des boutons. Cette balise n'est utile que lorsque cssclass est défini dans la balise button d'un des styles.

La balise <inline-editor> comprend le chemin vers la CSS qui définit les styles des l'éléments dans l'éditeur riche. Le style appliqué sera celui défini dans la balise inline-editor dans la définition du style sélectionné.

Définition d'un style

La balise style apparaît autant de fois par élément qu'il y a de styles personnalisés définis.

<style>
	<button>
		<icon><!-- Chemin vers l'icône pour le bouton --></icon>
		<label i18n="true/false"><!-- Libellé du bouton --></label>
		<description i18n="true/false"><!-- Description du bouton --></description>
		<cssclass><!-- Classe CSS du bouton --></cssclass>
	</button>
	<inline-editor><!-- Style appliqué à l'élément --></inline-editor>
</style>

La balise <button> décrit le bouton utilisé pour appliquer le style. Il comprend le libellé (label) et la description (description) qui sont internationalisables et un icône (icon) ou une classe CSS (cssclass). La classe CSS est uniquement appliquée aux styles de paragraphe et de titre pour prévisualiser le rendu ; l'icône est appliquée à tous les autres éléments (images, tableaux, listes et liens), c'est le pictogramme qui sert de prévisualisation du style.

La balise <inline-editor> défini le style qui sera appliqué à l'élément. Par exemple, si le style défini est custom, custom sera le nom de la classe CSS appliquée à l'élément.

Noter que le fonctionnement diffère légèrement pour les paragraphes. En effet, si le style défini est h1, la balise HTML appliquée à l'élément sera <h1></h1>, mais si le style défini est p.custom, la balise HTML appliquée à l'élément sera <p class="custom" />

Exemple de fichier edition-styles.xml

edition-styles.xml

<?xml version="1.0" encoding="UTF-8" ?>
<styles>
    <para>
        <import>
            <button>css/bo/buttons.css</button>
            <inline-editor>css/bo/editor-content.css</inline-editor>
        </import>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE1_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE1_DESCRIPTION</description>
                <cssclass>htmleditor-h1</cssclass>
            </button>
            <inline-editor>h1</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE2_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE2_DESCRIPTION</description>
                <cssclass>htmleditor-h2</cssclass>
            </button>
            <inline-editor>h2</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE3_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_TITLE3_DESCRIPTION</description>
                <cssclass>htmleditor-h3</cssclass>
            </button>
            <inline-editor>h3</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_SUBTITLE_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_SUBTITLE_DESCRIPTION</description>
                <cssclass>htmleditor-p-sub-title</cssclass>
            </button>
            <inline-editor>p.sub-title</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_INTRODUCTION_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_INTRODUCTION_DESCRIPTION</description>
                <cssclass>htmleditor-p-introduction</cssclass>
            </button>
            <inline-editor>p.introduction</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_NORMAL_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_NORMAL_DESCRIPTION</description>
                <cssclass>htmleditor-p</cssclass>
            </button>
            <inline-editor>p</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_NARROWSPACED_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_NARROWSPACED_DESCRIPTION</description>
                <cssclass>htmleditor-p-narrow-spaced</cssclass>
            </button>
            <inline-editor>p.narrow-spaced</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_IMPORTANT_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_IMPORTANT_DESCRIPTION</description>
                <cssclass>htmleditor-p-important</cssclass>
            </button>
            <inline-editor>p.important</inline-editor>
        </style>
        <style>
            <button>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_PARA_SECONDARY_LABEL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_PARA_SECONDARY_DESCRIPTION</description>
                <cssclass>htmleditor-p-secondary</cssclass>
            </button>
            <inline-editor>p.secondary</inline-editor>
        </style>
    </para>
    
    <table>
        <import>
            <button>css/bo/buttons.css</button>
            <inline-editor>css/bo/editor-content.css</inline-editor>
        </import>
        <style>
            <button>
                <icon>img/bo/Table_Data_Light_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATALIGHT</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATALIGHT_DESC</description>
            </button>
            <inline-editor>datalight</inline-editor>
        </style>
        <style>
            <button>
                <icon>img/bo/Table_Data_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATA</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATA_DESC</description>
            </button>
            <inline-editor>data</inline-editor>
        </style>
        <style>
            <button>
                <icon>img/bo/Table_Data_Strong_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATASTRONG</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_TABLE_DATASTRONG_DESC</description>
            </button>
            <inline-editor>datastrong</inline-editor>
        </style>
    </table>
    
    <link>
        <import>
            <button>css/bo/buttons.css</button>
            <inline-editor>css/bo/editor-content.css</inline-editor>
        </import>
        <style>
            <button>
                <icon>img/bo/Link_Download_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_LINK_DOWNLOAD</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_LINK_DOWNLOAD_DESC</description>
            </button>
            <inline-editor>download</inline-editor>
        </style>
        <style>
            <button>
                <icon>img/bo/Link_KnowMore_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_LINK_KNOWMORE</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_LINK_KNOWMORE_DESC</description>
            </button>
            <inline-editor>know-more</inline-editor>
        </style>
        <style>
            <button>
                <icon>img/bo/Link_External_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_LINK_EXTERNAL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_LINK_EXTERNAL_DESC</description>
            </button>
            <inline-editor>external</inline-editor>
        </style>
        <style>
            <button>
                <icon>img/bo/Link_Mail_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_LINK_MAIL</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_LINK_MAIL_DESC</description>
            </button>
            <inline-editor>mailto</inline-editor>
        </style>
    </link>
    
    <image>
        <import>
            <button>css/bo/buttons.css</button>
            <inline-editor>css/bo/editor-content.css</inline-editor>
        </import>
        <style>
            <button>
                <icon>img/bo/Image_Frame_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_IMAGE_FRAME</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_IMAGE_FRAME_DESC</description>
            </button>
            <inline-editor>frame</inline-editor>
        </style>
        <style>
            <button>
                <icon>img/bo/Image_LargeFrame_32.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_IMAGE_LARGEFRAME</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_IMAGE_LARGEFRAME_DESC</description>
            </button>
            <inline-editor>largeframe</inline-editor>
        </style>
    </image>
    
    <unorderedlist>
        <import>
            <button>css/bo/buttons.css</button>
            <inline-editor>css/bo/editor-content.css</inline-editor>
        </import>
        <style>
            <button>
                <icon>img/postbullets.png</icon>
                <label i18n="true">SKIN_BO_EDITOR_STYLES_UNORDEREDLIST_CUSTOM</label>
                <description i18n="true">SKIN_BO_EDITOR_STYLES_UNORDEREDLIST_CUSTOM_DESC</description>
            </button>
            <inline-editor>custom</inline-editor>
        </style>
    </unorderedlist>
    
    <orderedlist>
        <import>
            <button>css/bo/buttons.css</button>
            <inline-editor>css/bo/editor-content.css</inline-editor>
        </import>
    </orderedlist>
</styles>
Retour en haut

Manuel de paramétrage et d'intégration