Configuring the rich editor

The online editor at CMS lets you visualize the text of a content item as close as possible to its final rendering on the page with the current graphic charter.

Various files are involved in defining the styles available in the online editor:

• the file cms/skins/[skinName]/conf/edition-styles.xml is used to add style buttons to the online editor. Each button is defined by a name, a description, a class CSS which will style the button, and a selector which will style the element to which it will be applied.

  Oops!

  Copy to clipboard failed. Open the code and copy it manually.

  <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_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_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>
  

• the cms/skins/[skinName]/resources/css/bo/buttons stylesheet.css defines the styles of the CSS classes applied to buttons.

  

   

• the style sheet cms/skins/[skinName]/resources/css/bo/editor-content.css defines the styles of the CSS classes applied to elements in the editor. In fact, the online editor window is wrapped in a layer with the class mceContentBody

  Oops!

  Copy to clipboard failed. Open the code and copy it manually.

  .mceContentBody p.important{
      /* styles css */
  }
  

  .mceContentBody p.important{
      /* styles css */
  }
  

  .mceContentBody p.important{
      /* styles css */
  }
  

• the style sheet cms/skins/[skinName]/resources/css/ametys.css or the project's main style sheet, which defines the styles of the CSS classes applied to the elements in the site. In fact, all site content is wrapped in a layer bearing the class ametys-cms-content

  Oops!

  Copy to clipboard failed. Open the code and copy it manually.

  .ametys-cms-content p.important{
      /* styles css */
  }
  

  .ametys-cms-content p.important{
      /* styles css */
  }
  

  .ametys-cms-content p.important{
      /* styles css */
  }
  

Style sheets are freely organized, and selectors are used to apply the right class to the element, depending on whether the contributor

• previews the rendering of the style on the button,
• apply style to an element in the online editor
•  visualizes the final rendering of its element in the site.
  
  

Attention aux styles des titres
Noter que dans l'exemple présenté dans le tableau ci-dessus le titre de niveau 1 dans l'éditeur riche n'est pas le titre de niveau 1 dans le rendu final intégré dans la page. En effet, c'est le titre du contenu qui porte au final la balise <h1>.
Dès lors la classe .mceContentBody h1 (qui se réfère au rendu dans l'éditeur) comporte les mêmes styles que la classe .ametys-cms-content h2 (qui se réfère au rendu final dans la page) ; la classe .mceContentBody h2 comporte les mêmes styles que la classe .ametys-cms-content h3 ; ...etc

It is also possible to add a particular behavior when applying a style, to do this create the folder cms/skins/[skinName]/stylesheets/io/ and override :

• the docbook2html file .xsl (for page rendering)
• and possibly the docbook2htmleditor.xsl file (for rendering in the online editor).