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