- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
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 stylescombo
plugin adds the Styles drop-down list to the CKEditor toolbar
Defining Styles
JavaScript array which is registered by calling the CKEDITOR.stylesSet.add
function.
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.js
file, 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.js
file.
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 stylesSet
setting 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 stylesheetparser
plugin for your CKEditor instances
You then need to supply the location of the CSS file that contains your style definitions by using the contentsCss
configuration setting:
config.contentsCss = 'sample_CSS_file.css';
For an example of this usage scenario check the "Stylesheet Parser plugin" (stylesheetparser.html
) sample from the _samples
folder 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