]>
Commit | Line | Data |
---|---|---|
c63493c8 IB |
1 | /**\r |
2 | * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r | |
3 | * For licensing, see LICENSE.md or http://ckeditor.com/license\r | |
4 | */\r | |
5 | \r | |
6 | CKEDITOR.plugins.add( 'format', {\r | |
7 | requires: 'richcombo',\r | |
8 | // jscs:disable maximumLineLength\r | |
1794320d | 9 | lang: 'af,ar,az,bg,bn,bs,ca,cs,cy,da,de,de-ch,el,en,en-au,en-ca,en-gb,eo,es,es-mx,et,eu,fa,fi,fo,fr,fr-ca,gl,gu,he,hi,hr,hu,id,is,it,ja,ka,km,ko,ku,lt,lv,mk,mn,ms,nb,nl,no,oc,pl,pt,pt-br,ro,ru,si,sk,sl,sq,sr,sr-latn,sv,th,tr,tt,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%\r |
c63493c8 IB |
10 | // jscs:enable maximumLineLength\r |
11 | init: function( editor ) {\r | |
12 | if ( editor.blockless )\r | |
13 | return;\r | |
14 | \r | |
15 | var config = editor.config,\r | |
16 | lang = editor.lang.format;\r | |
17 | \r | |
18 | // Gets the list of tags from the settings.\r | |
19 | var tags = config.format_tags.split( ';' );\r | |
20 | \r | |
21 | // Create style objects for all defined styles.\r | |
22 | var styles = {},\r | |
23 | stylesCount = 0,\r | |
24 | allowedContent = [];\r | |
25 | for ( var i = 0; i < tags.length; i++ ) {\r | |
26 | var tag = tags[ i ];\r | |
27 | var style = new CKEDITOR.style( config[ 'format_' + tag ] );\r | |
28 | if ( !editor.filter.customConfig || editor.filter.check( style ) ) {\r | |
29 | stylesCount++;\r | |
30 | styles[ tag ] = style;\r | |
31 | styles[ tag ]._.enterMode = editor.config.enterMode;\r | |
32 | allowedContent.push( style );\r | |
33 | }\r | |
34 | }\r | |
35 | \r | |
36 | // Hide entire combo when all formats are rejected.\r | |
37 | if ( stylesCount === 0 )\r | |
38 | return;\r | |
39 | \r | |
40 | editor.ui.addRichCombo( 'Format', {\r | |
41 | label: lang.label,\r | |
42 | title: lang.panelTitle,\r | |
43 | toolbar: 'styles,20',\r | |
44 | allowedContent: allowedContent,\r | |
45 | \r | |
46 | panel: {\r | |
47 | css: [ CKEDITOR.skin.getPath( 'editor' ) ].concat( config.contentsCss ),\r | |
48 | multiSelect: false,\r | |
49 | attributes: { 'aria-label': lang.panelTitle }\r | |
50 | },\r | |
51 | \r | |
52 | init: function() {\r | |
53 | this.startGroup( lang.panelTitle );\r | |
54 | \r | |
55 | for ( var tag in styles ) {\r | |
56 | var label = lang[ 'tag_' + tag ];\r | |
57 | \r | |
58 | // Add the tag entry to the panel list.\r | |
59 | this.add( tag, styles[ tag ].buildPreview( label ), label );\r | |
60 | }\r | |
61 | },\r | |
62 | \r | |
63 | onClick: function( value ) {\r | |
64 | editor.focus();\r | |
65 | editor.fire( 'saveSnapshot' );\r | |
66 | \r | |
67 | var style = styles[ value ],\r | |
68 | elementPath = editor.elementPath();\r | |
69 | \r | |
70 | editor[ style.checkActive( elementPath, editor ) ? 'removeStyle' : 'applyStyle' ]( style );\r | |
71 | \r | |
1794320d | 72 | // Save the undo snapshot after all changes are affected. (http://dev.ckeditor.com/ticket/4899)\r |
c63493c8 IB |
73 | setTimeout( function() {\r |
74 | editor.fire( 'saveSnapshot' );\r | |
75 | }, 0 );\r | |
76 | },\r | |
77 | \r | |
78 | onRender: function() {\r | |
79 | editor.on( 'selectionChange', function( ev ) {\r | |
80 | var currentTag = this.getValue(),\r | |
81 | elementPath = ev.data.path;\r | |
82 | \r | |
83 | this.refresh();\r | |
84 | \r | |
85 | for ( var tag in styles ) {\r | |
86 | if ( styles[ tag ].checkActive( elementPath, editor ) ) {\r | |
87 | if ( tag != currentTag )\r | |
88 | this.setValue( tag, editor.lang.format[ 'tag_' + tag ] );\r | |
89 | return;\r | |
90 | }\r | |
91 | }\r | |
92 | \r | |
93 | // If no styles match, just empty it.\r | |
94 | this.setValue( '' );\r | |
95 | \r | |
96 | }, this );\r | |
97 | },\r | |
98 | \r | |
99 | onOpen: function() {\r | |
100 | this.showAll();\r | |
101 | for ( var name in styles ) {\r | |
102 | var style = styles[ name ];\r | |
103 | \r | |
104 | // Check if that style is enabled in activeFilter.\r | |
105 | if ( !editor.activeFilter.check( style ) )\r | |
106 | this.hideItem( name );\r | |
107 | \r | |
108 | }\r | |
109 | },\r | |
110 | \r | |
111 | refresh: function() {\r | |
112 | var elementPath = editor.elementPath();\r | |
113 | \r | |
114 | if ( !elementPath )\r | |
115 | return;\r | |
116 | \r | |
117 | // Check if element path contains 'p' element.\r | |
118 | if ( !elementPath.isContextFor( 'p' ) ) {\r | |
119 | this.setState( CKEDITOR.TRISTATE_DISABLED );\r | |
120 | return;\r | |
121 | }\r | |
122 | \r | |
123 | // Check if there is any available style.\r | |
124 | for ( var name in styles ) {\r | |
125 | if ( editor.activeFilter.check( styles[ name ] ) )\r | |
126 | return;\r | |
127 | }\r | |
128 | this.setState( CKEDITOR.TRISTATE_DISABLED );\r | |
129 | }\r | |
130 | } );\r | |
131 | }\r | |
132 | } );\r | |
133 | \r | |
134 | /**\r | |
135 | * A list of semicolon-separated style names (by default: tags) representing\r | |
136 | * the style definition for each entry to be displayed in the Format drop-down list\r | |
137 | * in the toolbar. Each entry must have a corresponding configuration in a\r | |
138 | * setting named `'format_(tagName)'`. For example, the `'p'` entry has its\r | |
139 | * definition taken from [config.format_p](#!/api/CKEDITOR.config-cfg-format_p).\r | |
140 | *\r | |
141 | * Read more in the [documentation](#!/guide/dev_format)\r | |
142 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
143 | *\r | |
144 | * config.format_tags = 'p;h2;h3;pre';\r | |
145 | *\r | |
146 | * @cfg {String} [format_tags='p;h1;h2;h3;h4;h5;h6;pre;address;div']\r | |
147 | * @member CKEDITOR.config\r | |
148 | */\r | |
149 | CKEDITOR.config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';\r | |
150 | \r | |
151 | /**\r | |
152 | * The style definition to be used to apply the `Normal` format.\r | |
153 | *\r | |
154 | * Read more in the [documentation](#!/guide/dev_format)\r | |
155 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
156 | *\r | |
157 | * config.format_p = { element: 'p', attributes: { 'class': 'normalPara' } };\r | |
158 | *\r | |
159 | * @cfg {Object} [format_p={ element: 'p' }]\r | |
160 | * @member CKEDITOR.config\r | |
161 | */\r | |
162 | CKEDITOR.config.format_p = { element: 'p' };\r | |
163 | \r | |
164 | /**\r | |
165 | * The style definition to be used to apply the `Normal (DIV)` format.\r | |
166 | *\r | |
167 | * Read more in the [documentation](#!/guide/dev_format)\r | |
168 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
169 | *\r | |
170 | * config.format_div = { element: 'div', attributes: { 'class': 'normalDiv' } };\r | |
171 | *\r | |
172 | * @cfg {Object} [format_div={ element: 'div' }]\r | |
173 | * @member CKEDITOR.config\r | |
174 | */\r | |
175 | CKEDITOR.config.format_div = { element: 'div' };\r | |
176 | \r | |
177 | /**\r | |
178 | * The style definition to be used to apply the `Formatted` format.\r | |
179 | *\r | |
180 | * Read more in the [documentation](#!/guide/dev_format)\r | |
181 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
182 | *\r | |
183 | * config.format_pre = { element: 'pre', attributes: { 'class': 'code' } };\r | |
184 | *\r | |
185 | * @cfg {Object} [format_pre={ element: 'pre' }]\r | |
186 | * @member CKEDITOR.config\r | |
187 | */\r | |
188 | CKEDITOR.config.format_pre = { element: 'pre' };\r | |
189 | \r | |
190 | /**\r | |
191 | * The style definition to be used to apply the `Address` format.\r | |
192 | *\r | |
193 | * Read more in the [documentation](#!/guide/dev_format)\r | |
194 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
195 | *\r | |
196 | * config.format_address = { element: 'address', attributes: { 'class': 'styledAddress' } };\r | |
197 | *\r | |
198 | * @cfg {Object} [format_address={ element: 'address' }]\r | |
199 | * @member CKEDITOR.config\r | |
200 | */\r | |
201 | CKEDITOR.config.format_address = { element: 'address' };\r | |
202 | \r | |
203 | /**\r | |
204 | * The style definition to be used to apply the `Heading 1` format.\r | |
205 | *\r | |
206 | * Read more in the [documentation](#!/guide/dev_format)\r | |
207 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
208 | *\r | |
209 | * config.format_h1 = { element: 'h1', attributes: { 'class': 'contentTitle1' } };\r | |
210 | *\r | |
211 | * @cfg {Object} [format_h1={ element: 'h1' }]\r | |
212 | * @member CKEDITOR.config\r | |
213 | */\r | |
214 | CKEDITOR.config.format_h1 = { element: 'h1' };\r | |
215 | \r | |
216 | /**\r | |
217 | * The style definition to be used to apply the `Heading 2` format.\r | |
218 | *\r | |
219 | * Read more in the [documentation](#!/guide/dev_format)\r | |
220 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
221 | *\r | |
222 | * config.format_h2 = { element: 'h2', attributes: { 'class': 'contentTitle2' } };\r | |
223 | *\r | |
224 | * @cfg {Object} [format_h2={ element: 'h2' }]\r | |
225 | * @member CKEDITOR.config\r | |
226 | */\r | |
227 | CKEDITOR.config.format_h2 = { element: 'h2' };\r | |
228 | \r | |
229 | /**\r | |
230 | * The style definition to be used to apply the `Heading 3` format.\r | |
231 | *\r | |
232 | * Read more in the [documentation](#!/guide/dev_format)\r | |
233 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
234 | *\r | |
235 | * config.format_h3 = { element: 'h3', attributes: { 'class': 'contentTitle3' } };\r | |
236 | *\r | |
237 | * @cfg {Object} [format_h3={ element: 'h3' }]\r | |
238 | * @member CKEDITOR.config\r | |
239 | */\r | |
240 | CKEDITOR.config.format_h3 = { element: 'h3' };\r | |
241 | \r | |
242 | /**\r | |
243 | * The style definition to be used to apply the `Heading 4` format.\r | |
244 | *\r | |
245 | * Read more in the [documentation](#!/guide/dev_format)\r | |
246 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
247 | *\r | |
248 | * config.format_h4 = { element: 'h4', attributes: { 'class': 'contentTitle4' } };\r | |
249 | *\r | |
250 | * @cfg {Object} [format_h4={ element: 'h4' }]\r | |
251 | * @member CKEDITOR.config\r | |
252 | */\r | |
253 | CKEDITOR.config.format_h4 = { element: 'h4' };\r | |
254 | \r | |
255 | /**\r | |
256 | * The style definition to be used to apply the `Heading 5` format.\r | |
257 | *\r | |
258 | * Read more in the [documentation](#!/guide/dev_format)\r | |
259 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
260 | *\r | |
261 | * config.format_h5 = { element: 'h5', attributes: { 'class': 'contentTitle5' } };\r | |
262 | *\r | |
263 | * @cfg {Object} [format_h5={ element: 'h5' }]\r | |
264 | * @member CKEDITOR.config\r | |
265 | */\r | |
266 | CKEDITOR.config.format_h5 = { element: 'h5' };\r | |
267 | \r | |
268 | /**\r | |
269 | * The style definition to be used to apply the `Heading 6` format.\r | |
270 | *\r | |
271 | * Read more in the [documentation](#!/guide/dev_format)\r | |
272 | * and see the [SDK sample](http://sdk.ckeditor.com/samples/format.html).\r | |
273 | *\r | |
274 | * config.format_h6 = { element: 'h6', attributes: { 'class': 'contentTitle6' } };\r | |
275 | *\r | |
276 | * @cfg {Object} [format_h6={ element: 'h6' }]\r | |
277 | * @member CKEDITOR.config\r | |
278 | */\r | |
279 | CKEDITOR.config.format_h6 = { element: 'h6' };\r |