FrançaisEnglish

Inline editor styles

There is a list of buttons and menus in the inline editor that have an influence on the style of objects.

  • Paragraphs : The drop down list allow to choose the style of a paragraph (normal, introduction, title 1...)
  • Images : The style gallery (simple, framed...)
  • Link : The style gallery (normal, invisible, external...)
  • Tables : The style gallery (normal, invisible, data light...)
  • Unordered list : The gallery to create a list (dics, square, check...)
  • Ordered list : The gallery to create a list (arabic, roman,alpha...)

These buttons are autoconfigured throught the extension point org.ametys.cms.clientsideelement.styles.HTMLEditorStyleExtensionPoint

The possible implementations are :

Choose the implementation in the WEB-INF/param/runtime.xml file.

org.ametys.cms.clientsideelement.styles.EmptyHTMLEditorStyleExtension

This implementation is the default one and configure no styles at all.

Nevertheless you will see a few styles in each button/menu that are hardcoded.

  • Paragraphs : none
  • Images : border (img.simple), no border (img.invisible)
  • Link : normal (a.simple), invisible (a.invisible) (these css class has to be declined into pseudo classes :hover :active :link :visited)
  • Tables : border (table.simple), no border (table.invisible)
  • Unordered list : disc (ul.disc), square (ul.square)
  • Ordered list : arabic (ol.arabic), lowerroman (ol.lowerroman), upperroman (ol.upperroman), loweralpha (ol.loweralpha), upperalpha (ol.upperalpha)

This means you should always handle this minimal styles in you css files. (class names are between the paranthesis)

org.ametys.cms.clientsideelement.styles.StaticHTMLEditorStyleExtension

This implementation is based upon a configuration file WEB-INF/param/edition-styles.xml

The file structure is the following

<?xml version="1.0" encoding="UTF-8" ?>
<styles>
	<para>...</para>
	<table>...</table>
	<orderedlist>...</orderedlist>
	<unorderedlist>...</unorderedlist>
	<link>...</link>
	<image>...</image>

</styles>

Each one of the root tag represent the styles of a button/menu. Theses are named "Category".
A category is definded by :

  • A css file to import in the inline editor to preview the item. This is very usefull to style items during edition and make the editor WYSIWYG.
  • A css file to import in the backoffice to style the button that will apply the style. This is very usefull to style for example the item "Title 1" in the drop down list of paragraphs.
  • A list of styles.

The structure of a category is the following :

        <para>
                <import>
                        <button plugin="myplugin">css/backoffice-buttons.css</button>
                        <inline-editor plugin="myplugin">css/content.css</inline-editor>
                </import>
                <style>...</style>
                <style>...</style>
                <style>...</style>
        </para>

Where the tag <button> tells where to fin the css for backoffice styles. The file will be located in the resource directory of the plugin gives as an attribute
Where the tag <inline-editor> tells where to fin the css for inline editor preview. The file will be located in the resource directory of the plugin gives as an attribute
Where each <style> describe a style for the category.

A style is defined by the following items. Please note the items to use may differ following the category.

  • A button icon (not for paragraphs) 32*32 for the icon in the gallery
  • A button label. Can be an i18n key
  • A button description that appears as a tooltip. Can be an i18n key.
  • A button css class to use (only for paragraphs)
  • An inline editor representation.
    • For paragraphs, this is a tag name + an optionnal css class name (with a dot separator). e.g. "h1" "p" "p.introduction". Authorized tagnames are p, h1 to h6.
    • For other, this is a css class name only.

Here is an example. This a style defined for a paragraph. This will add a "Title 1" item in the style drop down list. This item will have a css class "htmleditor-h1" defined in the file "plugins/myplugin/resources/css/backoffice-buttons.css" to make this item have a pseudo look of a title. When selected this item will create a tag "h1" that have to be styled in the file "plugins/myplugin/resources/css/content.css" to have a worty preview.

                <style>
                        <button>
                                <label>Title 1</label>
                                <description>Title of level 1 in the document hierarchy</description>
                                <cssclass>htmleditor-h1<cssclass>
                        </button>
                        <inline-editor>h1</inline-editor>
                </style>

Here is an other example. This is a style defined for a table. This will add a "Light table" item in the table styles gallery. This item will have the icon "plugins/myplugin/resources/img/bo/Table_Data_Light_32.png". When selected this item will apply the css class "datalight" on the table (that should be declared "plugins/myplugin/resources/css/content.css" to have a worthy preview)

                <style>
                        <button>
                                <icon plugin="myplugin">img/bo/Table_Data_Light_32.png</icon>
                                <label i18n="true">plugin.myplugin:SKIN_BO_EDITOR_STYLES_TABLE_DATALIGHT</label>
                                <description i18n="true">plugin.myplugin:SKIN_BO_EDITOR_STYLES_TABLE_DATALIGHT_DESC</description>
                        </button>
                        <inline-editor>datalight</inline-editor>
                </style>

Note that label and description are defined in the myplugin i18n catalogue

 See a complete sample of a file in the skin extension (under)

org.ametys.web.clientsideelement.styles.SkinHTMLEditorStyleExtension

This implementation is the same as the static one, but there is a file per skin (placed in skin's conf directory)
The files uri are located in the resources dir of the skin. The attribute "plugin" is not supported.

 Here is a sample of a complete file for the demo skin.

It defines

  • Paragraphs: Title 1, Title2, Title3, Subtitle, Introduction, Normal, Narrowspaced, Important, Secondary
  • Links: Download, Knowmore, External
  • Tables : Datalight, Data, Datastrong
  • Images: Frame, Large frame
  • Unordered lists : Arrow, Check
  • Ordered lists: none.

Remember that hard coded styles are always added to these preceding styles..

<?xml version="1.0" encoding="UTF-8" ?>
<!--
   Copyright 2010 Anyware Services

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
   -->
<styles>
	<para>
		<import>
			<button>css/backoffice-buttons.css</button>
			<inline-editor>css/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/backoffice-buttons.css</button>
			<inline-editor>css/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/backoffice-buttons.css</button>
			<inline-editor>css/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>
	</link>

	<image>
		<import>
			<button>css/backoffice-buttons.css</button>
			<inline-editor>css/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/backoffice-buttons.css</button>
			<inline-editor>css/content.css</inline-editor>
		</import>
		<style>
			<button>
				<icon>img/bo/UnorderedList_Arrow_32.png</icon>
				<label i18n="true">SKIN_BO_EDITOR_STYLES_UNORDEREDLIST_ARROW</label>
				<description i18n="true">SKIN_BO_EDITOR_STYLES_UNORDEREDLIST_ARROW_DESC</description>
			</button>
			<inline-editor>arrow</inline-editor>
		</style>
		<style>
			<button>
				<icon>img/bo/UnorderedList_Check_32.png</icon>
				<label i18n="true">SKIN_BO_EDITOR_STYLES_UNORDEREDLIST_CHECK</label>
				<description i18n="true">SKIN_BO_EDITOR_STYLES_UNORDEREDLIST_CHECK_DESC</description>
			</button>
			<inline-editor>check</inline-editor>
		</style>
	</unorderedlist>

	<orderedlist>
		<import>
			<button>css/backoffice-buttons.css</button>
			<inline-editor>css/content.css</inline-editor>
		</import>
	</orderedlist>
</styles>
Back to top

Integration