m (Minor formatting changes) |
(Stylesheet Parser Plugin information added) |
||
Line 2: | Line 2: | ||
You need to pass your own style definitions to the <code>CKEDITOR.stylesSet.add</code> function, giving them a unique name, and then configure the editor to use them by setting the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.stylesSet stylesSet]</code> value. | You need to pass your own style definitions to the <code>CKEDITOR.stylesSet.add</code> function, giving them a unique name, and then configure the editor to use them by setting the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.stylesSet stylesSet]</code> value. | ||
− | <source language=" | + | <source language="javascript"> |
CKEDITOR.stylesSet.add( 'my_styles', | CKEDITOR.stylesSet.add( 'my_styles', | ||
[ | [ | ||
Line 17: | Line 17: | ||
Depending on whether your definitions were placed inline or in an external file, you need to set the <code>stylesSet</code> configuration setting accordingly. | Depending on whether your definitions were placed inline or in an external file, you need to set the <code>stylesSet</code> configuration setting accordingly. | ||
− | <source language=" | + | <source language="javascript"> |
// For inline style definition | // For inline style definition | ||
config.stylesSet = 'my_styles'; | config.stylesSet = 'my_styles'; | ||
Line 26: | Line 26: | ||
For more details on the definition format and best practices on how to customize the styles please refer to the [[CKEditor_3.x/Developers_Guide/Styles|Styles]] article from the [[CKEditor_3.x/Developers_Guide|Developer's Guide]]. | For more details on the definition format and best practices on how to customize the styles please refer to the [[CKEditor_3.x/Developers_Guide/Styles|Styles]] article from the [[CKEditor_3.x/Developers_Guide|Developer's Guide]]. | ||
+ | |||
+ | == Stylesheet Parser Plugin == | ||
+ | Note that since CKEditor 3.6 you can also populate the '''Styles''' drop-down list with style definitions added in an external CSS stylesheet file. The optional '''Stylesheet Parser''' plugin (<code>stylesheetparser</code>) lets you use your existing CSS styles without the need to define the styles specifically for CKEditor in the format presented above. | ||
+ | |||
+ | For more information on using the plugin refer to the [[CKEditor_3.x/Developers_Guide/Styles#Stylesheet_Parser_Plugin|Stylesheet Parser Plugin]] section of the Developer's Guide and check the "Stylesheet Parser plugin" (<code>stylesheetparser.html</code>) sample from the <code>_samples</code> folder of your CKEditor installation package. |
Revision as of 12:41, 31 May 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.
Stylesheet Parser Plugin
Note that since CKEditor 3.6 you can also populate the Styles drop-down list with style definitions added in an external CSS stylesheet file. The optional 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.
For more information on using the plugin refer to the Stylesheet Parser Plugin section of the Developer's Guide and check the "Stylesheet Parser plugin" (stylesheetparser.html
) sample from the _samples
folder of your CKEditor installation package.