Defining styles for the editor

The editor 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 minified <web project>\CMS\CMSAdminControls\CKeditor\styles.js file. For illustration purposes, the structure of the unminified file looks like this:

List of existing styles




CKEDITOR.stylesSet.add( 'default',
[
    { name: 'Italic Title',     element: 'h2', styles: { 'font-style': 'italic' } },
    { name: 'Subtitle',         element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },
    {
        name: 'Special Container',
        element: 'div',
        styles: {
            padding: '5px 10px',
            background: '#eee',
            border: '1px solid #ccc'
        }
    },
    { 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' } },
    {
        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 more styles for one object, separate individual style definitions with a comma:

Defining more 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 some image, the styles for the img element will be offered. If you select some 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>

As you can see, the text was encapsulated with 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 stylesheet, you need to define the GreenText class name like this:

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>