JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
9c7c1e38d7d95c660f7111725ad6fffcc346c22a
[ckeditor.git] / _source / plugins / format / plugin.js
1 /*\r
2 Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.\r
3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
4 */\r
5 \r
6 CKEDITOR.plugins.add( 'format',\r
7 {\r
8         requires : [ 'richcombo', 'styles' ],\r
9 \r
10         init : function( editor )\r
11         {\r
12                 var config = editor.config,\r
13                         lang = editor.lang.format;\r
14 \r
15                 // Gets the list of tags from the settings.\r
16                 var tags = config.format_tags.split( ';' );\r
17 \r
18                 // Create style objects for all defined styles.\r
19                 var styles = {};\r
20                 for ( var i = 0 ; i < tags.length ; i++ )\r
21                 {\r
22                         var tag = tags[ i ];\r
23                         styles[ tag ] = new CKEDITOR.style( config[ 'format_' + tag ] );\r
24                 }\r
25 \r
26                 editor.ui.addRichCombo( 'Format',\r
27                         {\r
28                                 label : lang.label,\r
29                                 title : lang.panelTitle,\r
30                                 voiceLabel : lang.voiceLabel,\r
31                                 className : 'cke_format',\r
32                                 multiSelect : false,\r
33 \r
34                                 panel :\r
35                                 {\r
36                                         css : [ config.contentsCss, CKEDITOR.getUrl( editor.skinPath + 'editor.css' ) ],\r
37                                         voiceLabel : lang.panelVoiceLabel\r
38                                 },\r
39 \r
40                                 init : function()\r
41                                 {\r
42                                         this.startGroup( lang.panelTitle );\r
43 \r
44                                         for ( var tag in styles )\r
45                                         {\r
46                                                 var label = lang[ 'tag_' + tag ];\r
47 \r
48                                                 // Add the tag entry to the panel list.\r
49                                                 this.add( tag, '<' + tag + '>' + label + '</' + tag + '>', label );\r
50                                         }\r
51                                 },\r
52 \r
53                                 onClick : function( value )\r
54                                 {\r
55                                         editor.focus();\r
56                                         editor.fire( 'saveSnapshot' );\r
57 \r
58                                         styles[ value ].apply( editor.document );\r
59 \r
60                                         editor.fire( 'saveSnapshot' );\r
61                                 },\r
62 \r
63                                 onRender : function()\r
64                                 {\r
65                                         editor.on( 'selectionChange', function( ev )\r
66                                                 {\r
67                                                         var currentTag = this.getValue();\r
68 \r
69                                                         var elementPath = ev.data.path;\r
70 \r
71                                                         for ( var tag in styles )\r
72                                                         {\r
73                                                                 if ( styles[ tag ].checkActive( elementPath ) )\r
74                                                                 {\r
75                                                                         if ( tag != currentTag )\r
76                                                                                 this.setValue( tag, editor.lang.format[ 'tag_' + tag ] );\r
77                                                                         return;\r
78                                                                 }\r
79                                                         }\r
80 \r
81                                                         // If no styles match, just empty it.\r
82                                                         this.setValue( '' );\r
83                                                 },\r
84                                                 this);\r
85                                 }\r
86                         });\r
87         }\r
88 });\r
89 \r
90 /**\r
91  * A list of semi colon separated style names (by default tags) representing\r
92  * the style definition for each entry to be displayed in the Format combo in\r
93  * the toolbar. Each entry must have its relative definition configuration in a\r
94  * setting named "format_(tagName)". For example, the "p" entry has its\r
95  * definition taken from config.format_p.\r
96  * @type String\r
97  * @default 'p;h1;h2;h3;h4;h5;h6;pre;address;div'\r
98  * @example\r
99  * config.format_tags = 'p;h2;h3;pre'\r
100  */\r
101 CKEDITOR.config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';\r
102 \r
103 /**\r
104  * The style definition to be used to apply the "Normal" format.\r
105  * @type Object\r
106  * @default { element : 'p' }\r
107  * @example\r
108  * config.format_p = { element : 'p', attributes : { class : 'normalPara' } };\r
109  */\r
110 CKEDITOR.config.format_p = { element : 'p' };\r
111 \r
112 /**\r
113  * The style definition to be used to apply the "Normal (DIV)" format.\r
114  * @type Object\r
115  * @default { element : 'div' }\r
116  * @example\r
117  * config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };\r
118  */\r
119 CKEDITOR.config.format_div = { element : 'div' };\r
120 \r
121 /**\r
122  * The style definition to be used to apply the "Formatted" format.\r
123  * @type Object\r
124  * @default { element : 'pre' }\r
125  * @example\r
126  * config.format_pre = { element : 'pre', attributes : { class : 'code' } };\r
127  */\r
128 CKEDITOR.config.format_pre = { element : 'pre' };\r
129 \r
130 /**\r
131  * The style definition to be used to apply the "Address" format.\r
132  * @type Object\r
133  * @default { element : 'address' }\r
134  * @example\r
135  * config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };\r
136  */\r
137 CKEDITOR.config.format_address = { element : 'address' };\r
138 \r
139 /**\r
140  * The style definition to be used to apply the "Heading 1" format.\r
141  * @type Object\r
142  * @default { element : 'h1' }\r
143  * @example\r
144  * config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };\r
145  */\r
146 CKEDITOR.config.format_h1 = { element : 'h1' };\r
147 \r
148 /**\r
149  * The style definition to be used to apply the "Heading 1" format.\r
150  * @type Object\r
151  * @default { element : 'h2' }\r
152  * @example\r
153  * config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };\r
154  */\r
155 CKEDITOR.config.format_h2 = { element : 'h2' };\r
156 \r
157 /**\r
158  * The style definition to be used to apply the "Heading 1" format.\r
159  * @type Object\r
160  * @default { element : 'h3' }\r
161  * @example\r
162  * config.format_h3 = { element : 'h3', attributes : { class : 'contentTitle3' } };\r
163  */\r
164 CKEDITOR.config.format_h3 = { element : 'h3' };\r
165 \r
166 /**\r
167  * The style definition to be used to apply the "Heading 1" format.\r
168  * @type Object\r
169  * @default { element : 'h4' }\r
170  * @example\r
171  * config.format_h4 = { element : 'h4', attributes : { class : 'contentTitle4' } };\r
172  */\r
173 CKEDITOR.config.format_h4 = { element : 'h4' };\r
174 \r
175 /**\r
176  * The style definition to be used to apply the "Heading 1" format.\r
177  * @type Object\r
178  * @default { element : 'h5' }\r
179  * @example\r
180  * config.format_h5 = { element : 'h5', attributes : { class : 'contentTitle5' } };\r
181  */\r
182 CKEDITOR.config.format_h5 = { element : 'h5' };\r
183 \r
184 /**\r
185  * The style definition to be used to apply the "Heading 1" format.\r
186  * @type Object\r
187  * @default { element : 'h6' }\r
188  * @example\r
189  * config.format_h6 = { element : 'h6', attributes : { class : 'contentTitle6' } };\r
190  */\r
191 CKEDITOR.config.format_h6 = { element : 'h6' };\r