Styling the editor for rich text fields

The editor for rich text fields in the administration interface allows you to apply a selected style to the text using the Style drop-down list. You can use either built-in styles or your custom styles:

Choosing styles in the editor

The styles offered in the list are defined in the CMS\CMSAdminControls\CKeditor\styles.js file within the Xperience administration project. The structure of the file looks like the following:

List of existing styles




CKEDITOR.stylesSet.add( 'default', [
    /* Block Styles */
    { name: 'Paragraph',        element: 'p' },
    { name: 'Heading 1',        element: 'h1' },
    { name: 'Heading 2',        element: 'h2' },
    { name: 'Heading 3',        element: 'h3' },
    { name: 'Heading 4',        element: 'h4' },
    { name: 'Heading 5',        element: 'h5' },
    { name: 'Heading 6',        element: 'h6' },
    { name: 'Preformatted Text',element: 'pre' },
    { name: 'Address',          element: 'address' },

    /* Inline Styles */
    { name: 'Strikethrough',    element: 'strike' },
    { name: 'Subscript',        element: 'sub' },
    { name: 'Superscript',      element: 'sup' },
    { name: 'Marker',           element: 'span', attributes: { 'class': 'marker' } },
    { name: 'Big',              element: 'big' },
    { name: 'Small',            element: 'small' },
    { name: 'Typewriter',       element: 'tt' },
    { name: 'Computer Code',    element: 'code' },
    { name: 'Keyboard Phrase',  element: 'kbd' },
    { name: 'Sample Text',      element: 'samp' },
    { name: 'Variable',         element: 'var' },
    { name: 'Deleted Text',     element: 'del' },
    { name: 'Inserted Text',    element: 'ins' },
    { name: 'Cited Work',       element: 'cite' },
    { name: 'Inline Quotation', element: 'q' },
    { name: 'Language: RTL',    element: 'span', attributes: { 'dir': 'rtl' } },
    { name: 'Language: LTR',    element: 'span', attributes: { 'dir': 'ltr' } },

    /* Object Styles */
    {
        name: 'Styled image (left)',
        element: 'img',
        attributes: { 'class': 'left' }
    },
    {
        name: 'Styled image (right)',
        element: 'img',
        attributes: { 'class': 'right' }
    },
    {
        name: 'Compact table',
        element: 'table',
        attributes: {
            cellpadding: '5',
            cellspacing: '0',
            border: '1',
            bordercolor: '#ccc'
        },
        styles: {
            'border-collapse': 'collapse'
        }
    },
    { name: 'Borderless Table',     element: 'table',   styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
    { name: 'Square Bulleted List', element: 'ul',      styles: { 'list-style-type': 'square' } }
] );

Every time you modify the styles.js file (or any other file that is used for the editor), you need to clear the cache of your browser so that the changes are applied.

If you need to set multiple styles for one object, separate individual style definitions with a comma:

Defining multiple styles for a single object




 { name : 'Object', element : 'element', styles : { 'style 1' : 'value' , 'style 2' : 'value' } }

Every style has its name and element for which it is used. The styles are offered in the drop-down list based on the current position of the cursor. If you select an image, the styles for the img element will be offered. If you select text, the styles for the h3 or span element will be offered.

If you choose to apply e.g. the Red Title style to the following HTML code:




We provide web development services.

the result will be as follows:

The resulting html code after applying the Red Title style to a text




<h3 style="color: red">We provide web development services.</h3>

The text becomes encapsulated into the h3 element with the style attribute set to color: red.

However, you may want to apply CSS class names instead of hard-coded styles. If you want to add a new style, the definition of the style needs to be inserted into the styles.js file in front of the last square bracket. In this case, your style definition will look like this:

Style definition when using CSS




name : 'Green text',
element : 'h3',
attributes :
{
    'class' : 'GreenText'
}

In your CSS stylesheets, you need to define the GreenText class name:

Styling the Greentext class inside the CSS stylesheet




.GreenText { color: green; }

and the result will be:

The resulting text after applying the style




<h3 class="GreenText">We provide web development services.</h3>

Defining stylesheets for editor content

To ensure that content added through the editor is displayed correctly on the live site, create and link any required stylesheets for the pages of your live site application (depending on your live site’s CSS implementation).

Additionally, to make editing consistent in the administration interface, we recommend specifying a stylesheet that the system applies to the content of rich text fields edited using the WYSIWYG editor:

Open the Settings application in the Xperience administration interface.
Expand the Content -> Content management settings category.
Specify the stylesheet in the CSS stylesheet for WYSIWYG editor setting.
- Enter the stylesheet’s absolute URL or virtual path. For example: ~/styles/stylesheet.css or https://www.sitedomain.com/styles/stylesheet.css
- If a virtual path is used, the system resolves the URL based on the Presentation URL of your live site (the CSS file must be located within the live site project files).
Click Save.

Tip: If your instance contains multiple sites, we recommend specifying the stylesheet separately for each site (select the Site in the Settings application and then configure the setting). Each site typically has its own styles and stylesheet files.