Styles CKEditor doc

Tags HTML autorisés : <a> <p> <span> <div> <h1> <h2> <h3> <h4> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <caption> <tbody> <tr> <td> <em> <b> <u> <i> <strong> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike>

Source: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

The stylescomboplugin adds the Styles drop-down list to the CKEditor toolbar

Defining Styles

JavaScript array which is registered by calling the CKEDITOR.stylesSet.addfunction.

CKEDITOR.stylesSet.add( 'my_styles',
[
    // Block-level styles
    { name : 'Blue Title', element : 'h2', styles : { 'color' : 'Blue' } },
    { name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
 
    // Inline styles
    { name : 'CSS Style', element : 'span', attributes : { 'class' : 'my_style' } },
    { name : 'Marker: Yellow', element : 'span', styles : { 'background-color' : 'Yellow' } }
]);

can be placed inline in the page source, or can live in an external file which is loaded "on demand", when needed only (see below).

When the definitions are ready, you must instruct the editor to apply the newly registered styles by using the stylesSet setting (cf http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.styl...). This may be set in the config.jsfile, for example:

config.stylesSet = 'my_styles';

Using an External Styles Definition File

The style definition registration call can be included in an external JavaScript file. This method is a recommended one

By default, CKEditor uses the plugins/styles/styles/default.jsfile.

The uncompressed version of this file can be found in the CKEditor package as as _source/plugins/styles/styles/default.js. This file can be used as a template for your custom file.

At that point, change the stylesSetsetting to point the editor to your file:

config.stylesSet = 'my_styles:/styles.js';

or config.stylesSet = 'my_styles:http://www.example.com/styles.js';

The syntax for the style definition setting is always: style definition name : file URL

Note that you must use the unique name you have used to register the style definition in the file.

Style rules

{
    name : 'Name displayed in the Styles drop-down list',
    element : 'HTML element name (for example "span")',
    styles :
    {
        'css-style1' : 'desired value',
        'css-style2' : 'desired value',
        ...
    }
    attributes :
    {
        'attribute-name1' : 'desired value',
        'attribute-name2' : 'desired value',
        ...
    }
}

3 types:

• Block-level styles – applied to the text blocks (paragraphs) as a whole, not limited to the text selections. These apply to the following elements: address, div, h1, h2, h3, h4, h5, h6, p, and pre
• Object styles – applied to special selectable objects (not textual), whenever such selection is supported by the browser. These apply to the following elements:   a, embed, hr, img, li, object, ol, table, td, tr and ul   ul.
• Inline styles – applied to text selections for style rules using elements not defined in other style types.

Stylesheet Parser Plugin

CKEditor 3.6 introduced a simplified method of customizing the styles for the document created in CKEditor and populating the Styles drop-down list with style definitions added in an external CSS stylesheet file. The Stylesheet Parser plugin (stylesheetparser) lets you use your existing CSS styles without the need to define the styles specifically for CKEditor in the format presented above.

To use the new style definition method you need to activate the stylesheetparserplugin for your CKEditor instances

You then need to supply the location of the CSS file that contains your style definitions by using the contentsCssconfiguration setting:

config.contentsCss = 'sample_CSS_file.css';

For an example of this usage scenario check the "Stylesheet Parser plugin" (stylesheetparser.html) sample from the _samplesfolder of your CKEditor installation package.

... voir la suite à http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles

Limiting the CSS Selectors

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html