(Article contents added) |
m (Minor formatting changes) |
||
| Line 5: | Line 5: | ||
CKEDITOR.stylesSet.add( 'my_styles', | 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' } } | |
]); | ]); | ||
</source> | </source> | ||
Revision as of 06:49, 9 March 2011
You need to pass your own style definitions to the CKEDITOR.stylesSet.add function, giving them a unique name, and then configure the editor to use them by setting the stylesSet value.
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' } }
]);
Depending on whether your definitions were placed inline or in an external file, you need to set the stylesSet configuration setting accordingly.
// For inline style definition config.stylesSet = 'my_styles'; // For a definition in an external file config.stylesSet = 'my_styles:http://www.example.com/styles.js';
For more details on the definition format and best practices on how to customize the styles please refer to the Styles article from the Developer's Guide.