CKEditor 3.x/Howto/Styles List Customization - Revision history

Anna: /* Stylesheet Parser Plugin */ Text replaced with a link to a dedicated HOWTO article

2011-05-31T13:22:24Z

‎Stylesheet Parser Plugin: Text replaced with a link to a dedicated HOWTO article

Anna: Stylesheet Parser Plugin information added

2011-05-31T11:41:18Z

Stylesheet Parser Plugin information added

Anna: Minor formatting changes

2011-03-09T05:49:15Z

Minor formatting changes

Anna: Article contents added

2011-03-09T05:40:47Z

Article contents added

New page

{{#CUSTOMTITLE:How Do I Customize the Styles Drop-Down List?}}
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="js">
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>

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="js">
// 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';
</source>

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]].

← Older revision		Revision as of 13:22, 31 May 2011
Line 28:		Line 28:

	== Stylesheet Parser Plugin ==		== 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.	+	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. Check the [[CKEditor_3.x/Howto/External_CSS_Styles\|How Do I Add Existing CSS Styles from an External File to the Styles Drop-Down List?]] article for more information about using the new (and optional) '''Stylesheet Parser''' plugin.
−
−	~~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~~.

@@ 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.
-<source language="js">
+<source language="javascript">
 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.
-<source language="js">
+<source language="javascript">
 // For inline style definition
 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]].

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