Le fichier edition-styles.xml

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 modifiables qu'à partir d'Ametys 4.8.

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é.

A partir de Ametys 4.3.0, les balises <button> et <inline-editor> peuvent être multiples pour importer plusieurs CSS si nécessaire.

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" />

Style par défaut

A partir de Ametys 4.8, il est possible d'ajouter l'attribut defaultInlineEditor sur une balise de style pour spécifier le style par défaut.
Par exemple

<ol defaultInlineEditor="custom">

Styles automatiques

A partir de Ametys 4.8, il est possible de désactiver les styles automatiques fournis par le noyau Ametys, comme le style "invisible" sur les liens par exemple avec l'attribut multivalué removeInlineEditor.

<link removeInlineEditor="simple,invisible">

Attention, si vous retirez le style par défaut, pensez à en spécifier un nouveau. Dans l'exemple précédent, le fait de retirer "simple" qui est le style par défaut implique d'ajouter defaultInlineEditor="xxx" où xxx est une valeur de style apportée par le fichier.

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> 

Héritage de charte

A partir de Ametys 4.3.0

Fichier absent

Comme la règle d'héritage générique l'indique, si le fichier est absent, c'est le fichier de la charte parente qui est utilisé.

Héritage

Si le fichier est présent il va être mélangé au fichier de la charte parente selon les règles suivantes :

  • Si la catégorie (para, table...) existe dans un seul des deux fichiers, elle est utilisée
  • Si la catégorie (para, table...) existe dans les deux fichiers
    • les imports sont concaténés
    • Tous les styles du fichier hérité sont mis mais on peut en retirer certains en mettant un style avec l'attribut remove="true". C'est la valeur de <inline-editor> qui permet d'identifier un style.
    • On peut ajouter un style avec une valeur de <inline-editor> non existant dans le fichier hérité est ajouté.
<styles>
    <para> <!-- présent dans le fichier d'origine -->
        <style remove="true">
            <inline-editor>h3</inline-editor> <!-- Style retiré du fichier d'origine -->
        </style>
        <!-- les autres styles sont copiés du fichier d'origine -->
        <style> <!-- nouveau style ajouté -->
            ...
            <inline-editor>X</inline-editor><!-- valeur unique -->
        </style>
    </para>     
    <table> <!-- non présent dans le fichier d'origine : tout est ajouté -->
        ...
    </table>
    <!-- les autres catégories sont copiées du fichier hérité -->
</styles>

Bloquer l'héritage

Par défaut, l'héritage s'applique, mais si le fichier possède l'attribut inherit="false", alors c'est uniquement le fichier local qui est utilisé.

<?xml version="1.0" encoding="UTF-8"?>
<styles inherit="false">
    ...
</styles> 
Retour en haut

Manuel de paramétrage et d'intégration