1 | /*
|
---|
2 | Copyright (c) 2003-2009, CKSource - Frederico Knabben. All rights reserved.
|
---|
3 | For licensing, see LICENSE.html or http://ckeditor.com/license
|
---|
4 | */
|
---|
5 |
|
---|
6 | (function()
|
---|
7 | {
|
---|
8 | // Load image preview.
|
---|
9 | var IMAGE = 1,
|
---|
10 | LINK = 2,
|
---|
11 | PREVIEW = 4,
|
---|
12 | CLEANUP = 8,
|
---|
13 | regexGetSize = /^\s*(\d+)((px)|\%)?\s*$/i,
|
---|
14 | regexGetSizeOrEmpty = /(^\s*(\d+)((px)|\%)?\s*$)|^$/i;
|
---|
15 |
|
---|
16 | var onSizeChange = function()
|
---|
17 | {
|
---|
18 | var value = this.getValue(), // This = input element.
|
---|
19 | dialog = this.getDialog(),
|
---|
20 | aMatch = value.match( regexGetSize ); // Check value
|
---|
21 | if ( aMatch )
|
---|
22 | {
|
---|
23 | if ( aMatch[2] == '%' ) // % is allowed - > unlock ratio.
|
---|
24 | switchLockRatio( dialog, false ); // Unlock.
|
---|
25 | value = aMatch[1];
|
---|
26 | }
|
---|
27 |
|
---|
28 | // Only if ratio is locked
|
---|
29 | if ( dialog.lockRatio )
|
---|
30 | {
|
---|
31 | var oImageOriginal = dialog.originalElement;
|
---|
32 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
---|
33 | {
|
---|
34 | if ( this.id == 'txtHeight' )
|
---|
35 | {
|
---|
36 | if ( value && value != '0' )
|
---|
37 | value = Math.round( oImageOriginal.$.width * ( value / oImageOriginal.$.height ) );
|
---|
38 | if ( !isNaN( value ) )
|
---|
39 | dialog.setValueOf( 'info', 'txtWidth', value );
|
---|
40 | }
|
---|
41 | else //this.id = txtWidth.
|
---|
42 | {
|
---|
43 | if ( value && value != '0' )
|
---|
44 | value = Math.round( oImageOriginal.$.height * ( value / oImageOriginal.$.width ) );
|
---|
45 | if ( !isNaN( value ) )
|
---|
46 | dialog.setValueOf( 'info', 'txtHeight', value );
|
---|
47 | }
|
---|
48 | }
|
---|
49 | }
|
---|
50 | updatePreview( dialog );
|
---|
51 | };
|
---|
52 |
|
---|
53 | var updatePreview = function( dialog )
|
---|
54 | {
|
---|
55 | //Don't load before onShow.
|
---|
56 | if ( !dialog.originalElement || !dialog.preview )
|
---|
57 | return 1;
|
---|
58 |
|
---|
59 | // Read attributes and update imagePreview;
|
---|
60 | dialog.commitContent( PREVIEW, dialog.preview );
|
---|
61 | return 0;
|
---|
62 | };
|
---|
63 |
|
---|
64 | var switchLockRatio = function( dialog, value )
|
---|
65 | {
|
---|
66 | var oImageOriginal = dialog.originalElement,
|
---|
67 | ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
|
---|
68 |
|
---|
69 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
---|
70 | {
|
---|
71 | if ( value == 'check' ) // Check image ratio and original image ratio.
|
---|
72 | {
|
---|
73 | var width = dialog.getValueOf( 'info', 'txtWidth' ),
|
---|
74 | height = dialog.getValueOf( 'info', 'txtHeight' ),
|
---|
75 | originalRatio = oImageOriginal.$.width * 1000 / oImageOriginal.$.height,
|
---|
76 | thisRatio = width * 1000 / height;
|
---|
77 | dialog.lockRatio = false; // Default: unlock ratio
|
---|
78 |
|
---|
79 | if ( !width && !height )
|
---|
80 | dialog.lockRatio = true;
|
---|
81 | else if ( !isNaN( originalRatio ) && !isNaN( thisRatio ) )
|
---|
82 | {
|
---|
83 | if ( Math.round( originalRatio ) == Math.round( thisRatio ) )
|
---|
84 | dialog.lockRatio = true;
|
---|
85 | }
|
---|
86 | }
|
---|
87 | else if ( value != undefined )
|
---|
88 | dialog.lockRatio = value;
|
---|
89 | else
|
---|
90 | dialog.lockRatio = !dialog.lockRatio;
|
---|
91 | }
|
---|
92 | else if ( value != 'check' ) // I can't lock ratio if ratio is unknown.
|
---|
93 | dialog.lockRatio = false;
|
---|
94 |
|
---|
95 | if ( dialog.lockRatio )
|
---|
96 | ratioButton.removeClass( 'cke_btn_unlocked' );
|
---|
97 | else
|
---|
98 | ratioButton.addClass( 'cke_btn_unlocked' );
|
---|
99 |
|
---|
100 | return dialog.lockRatio;
|
---|
101 | };
|
---|
102 |
|
---|
103 | var resetSize = function( dialog )
|
---|
104 | {
|
---|
105 | var oImageOriginal = dialog.originalElement;
|
---|
106 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
---|
107 | {
|
---|
108 | dialog.setValueOf( 'info', 'txtWidth', oImageOriginal.$.width );
|
---|
109 | dialog.setValueOf( 'info', 'txtHeight', oImageOriginal.$.height );
|
---|
110 | }
|
---|
111 | updatePreview( dialog );
|
---|
112 | };
|
---|
113 |
|
---|
114 | var setupDimension = function( type, element )
|
---|
115 | {
|
---|
116 | if ( type != IMAGE )
|
---|
117 | return;
|
---|
118 |
|
---|
119 | function checkDimension( size, defaultValue )
|
---|
120 | {
|
---|
121 | var aMatch = size.match( regexGetSize );
|
---|
122 | if ( aMatch )
|
---|
123 | {
|
---|
124 | if ( aMatch[2] == '%' ) // % is allowed.
|
---|
125 | {
|
---|
126 | aMatch[1] += '%';
|
---|
127 | switchLockRatio( dialog, false ); // Unlock ratio
|
---|
128 | }
|
---|
129 | return aMatch[1];
|
---|
130 | }
|
---|
131 | return defaultValue;
|
---|
132 | }
|
---|
133 |
|
---|
134 | var dialog = this.getDialog(),
|
---|
135 | value = '',
|
---|
136 | dimension = (( this.id == 'txtWidth' )? 'width' : 'height' ),
|
---|
137 | size = element.getAttribute( dimension );
|
---|
138 |
|
---|
139 | if ( size )
|
---|
140 | value = checkDimension( size, value );
|
---|
141 | value = checkDimension( element.$.style[ dimension ], value );
|
---|
142 |
|
---|
143 | this.setValue( value );
|
---|
144 | };
|
---|
145 |
|
---|
146 | var imageDialog = function( editor, dialogType )
|
---|
147 | {
|
---|
148 | var onImgLoadEvent = function()
|
---|
149 | {
|
---|
150 | // Image is ready.
|
---|
151 | var original = this.originalElement;
|
---|
152 | original.setCustomData( 'isReady', 'true' );
|
---|
153 | original.removeListener( 'load', onImgLoadEvent );
|
---|
154 | original.removeListener( 'error', onImgLoadErrorEvent );
|
---|
155 | original.removeListener( 'abort', onImgLoadErrorEvent );
|
---|
156 |
|
---|
157 | // Hide loader
|
---|
158 | CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
|
---|
159 |
|
---|
160 | // New image -> new domensions
|
---|
161 | if ( !this.dontResetSize )
|
---|
162 | resetSize( this );
|
---|
163 |
|
---|
164 | if ( this.firstLoad )
|
---|
165 | switchLockRatio( this, 'check' );
|
---|
166 | this.firstLoad = false;
|
---|
167 | this.dontResetSize = false;
|
---|
168 | };
|
---|
169 |
|
---|
170 | var onImgLoadErrorEvent = function()
|
---|
171 | {
|
---|
172 | // Error. Image is not loaded.
|
---|
173 | var original = this.originalElement;
|
---|
174 | original.removeListener( 'load', onImgLoadEvent );
|
---|
175 | original.removeListener( 'error', onImgLoadErrorEvent );
|
---|
176 | original.removeListener( 'abort', onImgLoadErrorEvent );
|
---|
177 |
|
---|
178 | // Set Error image.
|
---|
179 | var noimage = CKEDITOR.getUrl( editor.skinPath + 'images/noimage.png' );
|
---|
180 |
|
---|
181 | if ( this.preview )
|
---|
182 | this.preview.setAttribute( 'src', noimage );
|
---|
183 |
|
---|
184 | // Hide loader
|
---|
185 | CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
|
---|
186 | switchLockRatio( this, false ); // Unlock.
|
---|
187 | };
|
---|
188 | return {
|
---|
189 | title : ( dialogType == 'image' ) ? editor.lang.image.title : editor.lang.image.titleButton,
|
---|
190 | minWidth : 420,
|
---|
191 | minHeight : 310,
|
---|
192 | onShow : function()
|
---|
193 | {
|
---|
194 | this.imageElement = false;
|
---|
195 | this.linkElement = false;
|
---|
196 |
|
---|
197 | // Default: create a new element.
|
---|
198 | this.imageEditMode = false;
|
---|
199 | this.linkEditMode = false;
|
---|
200 |
|
---|
201 | this.lockRatio = true;
|
---|
202 | this.dontResetSize = false;
|
---|
203 | this.firstLoad = true;
|
---|
204 | this.addLink = false;
|
---|
205 |
|
---|
206 | //Hide loader.
|
---|
207 | CKEDITOR.document.getById( 'ImagePreviewLoader' ).setStyle( 'display', 'none' );
|
---|
208 | // Preview
|
---|
209 | this.preview = CKEDITOR.document.getById( 'previewImage' );
|
---|
210 |
|
---|
211 | var editor = this.getParentEditor(),
|
---|
212 | sel = this.getParentEditor().getSelection(),
|
---|
213 | element = sel.getSelectedElement(),
|
---|
214 | link = element && element.getAscendant( 'a' );
|
---|
215 |
|
---|
216 | // Copy of the image
|
---|
217 | this.originalElement = editor.document.createElement( 'img' );
|
---|
218 | this.originalElement.setAttribute( 'alt', '' );
|
---|
219 | this.originalElement.setCustomData( 'isReady', 'false' );
|
---|
220 |
|
---|
221 | if ( link )
|
---|
222 | {
|
---|
223 | this.linkElement = link;
|
---|
224 | this.linkEditMode = true;
|
---|
225 |
|
---|
226 | // Look for Image element.
|
---|
227 | var linkChildren = link.getChildren();
|
---|
228 | if ( linkChildren.count() == 1 ) // 1 child.
|
---|
229 | {
|
---|
230 | var childTagName = linkChildren.getItem( 0 ).getName();
|
---|
231 | if ( childTagName == 'img' || childTagName == 'input' )
|
---|
232 | {
|
---|
233 | this.imageElement = linkChildren.getItem( 0 );
|
---|
234 | if ( this.imageElement.getName() == 'img' )
|
---|
235 | this.imageEditMode = 'img';
|
---|
236 | else if ( this.imageElement.getName() == 'input' )
|
---|
237 | this.imageEditMode = 'input';
|
---|
238 | }
|
---|
239 | }
|
---|
240 | // Fill out all fields.
|
---|
241 | if ( dialogType == 'image' )
|
---|
242 | this.setupContent( LINK, link );
|
---|
243 | }
|
---|
244 |
|
---|
245 | if ( element && element.getName() == 'img' && !element.getAttribute( '_cke_protected_html' ) )
|
---|
246 | this.imageEditMode = 'img';
|
---|
247 | else if ( element && element.getName() == 'input' && element.getAttribute( 'type' ) && element.getAttribute( 'type' ) == 'image' )
|
---|
248 | this.imageEditMode = 'input';
|
---|
249 |
|
---|
250 | if ( this.imageEditMode || this.imageElement )
|
---|
251 | {
|
---|
252 | if ( !this.imageElement )
|
---|
253 | this.imageElement = element;
|
---|
254 |
|
---|
255 | // Fill out all fields.
|
---|
256 | this.setupContent( IMAGE, this.imageElement );
|
---|
257 |
|
---|
258 | // Refresh LockRatio button
|
---|
259 | switchLockRatio ( this, true );
|
---|
260 | }
|
---|
261 |
|
---|
262 | // Dont show preview if no URL given.
|
---|
263 | if ( !CKEDITOR.tools.trim( this.getValueOf( 'info', 'txtUrl' ) ) )
|
---|
264 | {
|
---|
265 | this.preview.removeAttribute( 'src' );
|
---|
266 | this.preview.setStyle( 'display', 'none' );
|
---|
267 | }
|
---|
268 | },
|
---|
269 | onOk : function()
|
---|
270 | {
|
---|
271 | // Edit existing Image.
|
---|
272 | if ( this.imageEditMode )
|
---|
273 | {
|
---|
274 | var imgTagName = this.imageEditMode;
|
---|
275 |
|
---|
276 | // Image dialog and Input element.
|
---|
277 | if ( dialogType == 'image' && imgTagName == 'input' && confirm( editor.lang.image.button2Img ) )
|
---|
278 | {
|
---|
279 | // Replace INPUT-> IMG
|
---|
280 | imgTagName = 'img';
|
---|
281 | this.imageElement = editor.document.createElement( 'img' );
|
---|
282 | this.imageElement.setAttribute( 'alt', '' );
|
---|
283 | editor.insertElement( this.imageElement );
|
---|
284 | }
|
---|
285 | // ImageButton dialog and Image element.
|
---|
286 | else if ( dialogType != 'image' && imgTagName == 'img' && confirm( editor.lang.image.img2Button ))
|
---|
287 | {
|
---|
288 | // Replace IMG -> INPUT
|
---|
289 | imgTagName = 'input';
|
---|
290 | this.imageElement = editor.document.createElement( 'input' );
|
---|
291 | this.imageElement.setAttributes(
|
---|
292 | {
|
---|
293 | type : 'image',
|
---|
294 | alt : ''
|
---|
295 | }
|
---|
296 | );
|
---|
297 | editor.insertElement( this.imageElement );
|
---|
298 | }
|
---|
299 | }
|
---|
300 | else // Create a new image.
|
---|
301 | {
|
---|
302 | // Image dialog -> create IMG element.
|
---|
303 | if ( dialogType == 'image' )
|
---|
304 | this.imageElement = editor.document.createElement( 'img' );
|
---|
305 | else
|
---|
306 | {
|
---|
307 | this.imageElement = editor.document.createElement( 'input' );
|
---|
308 | this.imageElement.setAttribute ( 'type' ,'image' );
|
---|
309 | }
|
---|
310 | this.imageElement.setAttribute( 'alt', '' );
|
---|
311 | }
|
---|
312 |
|
---|
313 | // Create a new link.
|
---|
314 | if ( !this.linkEditMode )
|
---|
315 | this.linkElement = editor.document.createElement( 'a' );
|
---|
316 |
|
---|
317 | // Set attributes.
|
---|
318 | this.commitContent( IMAGE, this.imageElement );
|
---|
319 | this.commitContent( LINK, this.linkElement );
|
---|
320 |
|
---|
321 | // Insert a new Image.
|
---|
322 | if ( !this.imageEditMode )
|
---|
323 | {
|
---|
324 | if ( this.addLink )
|
---|
325 | {
|
---|
326 | //Insert a new Link.
|
---|
327 | if ( !this.linkEditMode )
|
---|
328 | {
|
---|
329 | editor.insertElement(this.linkElement);
|
---|
330 | this.linkElement.append(this.imageElement, false);
|
---|
331 | }
|
---|
332 | else //Link already exists, image not.
|
---|
333 | editor.insertElement(this.imageElement );
|
---|
334 | }
|
---|
335 | else
|
---|
336 | editor.insertElement( this.imageElement );
|
---|
337 | }
|
---|
338 | else // Image already exists.
|
---|
339 | {
|
---|
340 | //Add a new link element.
|
---|
341 | if ( !this.linkEditMode && this.addLink )
|
---|
342 | {
|
---|
343 | editor.insertElement( this.linkElement );
|
---|
344 | this.imageElement.appendTo( this.linkElement );
|
---|
345 | }
|
---|
346 | //Remove Link, Image exists.
|
---|
347 | else if ( this.linkEditMode && !this.addLink )
|
---|
348 | {
|
---|
349 | editor.getSelection().selectElement( this.linkElement );
|
---|
350 | editor.insertElement( this.imageElement );
|
---|
351 | }
|
---|
352 | }
|
---|
353 | },
|
---|
354 | onLoad : function()
|
---|
355 | {
|
---|
356 | if ( dialogType != 'image' )
|
---|
357 | this.hidePage( 'Link' ); //Hide Link tab.
|
---|
358 | var doc = this._.element.getDocument();
|
---|
359 | this.addFocusable( doc.getById( 'btnResetSize' ), 5 );
|
---|
360 | this.addFocusable( doc.getById( 'btnLockSizes' ), 5 );
|
---|
361 | },
|
---|
362 | onHide : function()
|
---|
363 | {
|
---|
364 | if ( this.preview )
|
---|
365 | this.commitContent( CLEANUP, this.preview );
|
---|
366 |
|
---|
367 | if ( this.originalElement )
|
---|
368 | {
|
---|
369 | this.originalElement.removeListener( 'load', onImgLoadEvent );
|
---|
370 | this.originalElement.removeListener( 'error', onImgLoadErrorEvent );
|
---|
371 | this.originalElement.removeListener( 'abort', onImgLoadErrorEvent );
|
---|
372 | this.originalElement.remove();
|
---|
373 | this.originalElement = false; // Dialog is closed.
|
---|
374 | }
|
---|
375 | },
|
---|
376 | contents : [
|
---|
377 | {
|
---|
378 | id : 'info',
|
---|
379 | label : editor.lang.image.infoTab,
|
---|
380 | accessKey : 'I',
|
---|
381 | elements :
|
---|
382 | [
|
---|
383 | {
|
---|
384 | type : 'vbox',
|
---|
385 | padding : 0,
|
---|
386 | children :
|
---|
387 | [
|
---|
388 | {
|
---|
389 | type : 'html',
|
---|
390 | html : '<span>' + CKEDITOR.tools.htmlEncode( editor.lang.image.url ) + '</span>'
|
---|
391 | },
|
---|
392 | {
|
---|
393 | type : 'hbox',
|
---|
394 | widths : [ '280px', '110px' ],
|
---|
395 | align : 'right',
|
---|
396 | children :
|
---|
397 | [
|
---|
398 | {
|
---|
399 | id : 'txtUrl',
|
---|
400 | type : 'text',
|
---|
401 | label : '',
|
---|
402 | onChange : function()
|
---|
403 | {
|
---|
404 | var dialog = this.getDialog(),
|
---|
405 | newUrl = this.getValue();
|
---|
406 |
|
---|
407 | //Update original image
|
---|
408 | if ( newUrl.length > 0 ) //Prevent from load before onShow
|
---|
409 | {
|
---|
410 | dialog = this.getDialog();
|
---|
411 | var original = dialog.originalElement;
|
---|
412 |
|
---|
413 | dialog.preview.removeStyle( 'display' );
|
---|
414 |
|
---|
415 | original.setCustomData( 'isReady', 'false' );
|
---|
416 | // Show loader
|
---|
417 | var loader = CKEDITOR.document.getById( 'ImagePreviewLoader' );
|
---|
418 | if ( loader )
|
---|
419 | loader.setStyle( 'display', '' );
|
---|
420 |
|
---|
421 | original.on( 'load', onImgLoadEvent, dialog );
|
---|
422 | original.on( 'error', onImgLoadErrorEvent, dialog );
|
---|
423 | original.on( 'abort', onImgLoadErrorEvent, dialog );
|
---|
424 | original.setAttribute( 'src', newUrl );
|
---|
425 | dialog.preview.setAttribute( 'src', newUrl );
|
---|
426 |
|
---|
427 | updatePreview( dialog );
|
---|
428 | }
|
---|
429 | // Dont show preview if no URL given.
|
---|
430 | else if ( dialog.preview )
|
---|
431 | {
|
---|
432 | dialog.preview.removeAttribute( 'src' );
|
---|
433 | dialog.preview.setStyle( 'display', 'none' );
|
---|
434 | }
|
---|
435 | },
|
---|
436 | setup : function( type, element )
|
---|
437 | {
|
---|
438 | if ( type == IMAGE )
|
---|
439 | {
|
---|
440 | var url = element.getAttribute( '_cke_saved_src' ) || element.getAttribute( 'src' );
|
---|
441 | var field = this;
|
---|
442 |
|
---|
443 | this.getDialog().dontResetSize = true;
|
---|
444 |
|
---|
445 | // In IE7 the dialog is being rendered improperly when loading
|
---|
446 | // an image with a long URL. So we need to delay it a bit. (#4122)
|
---|
447 | setTimeout( function()
|
---|
448 | {
|
---|
449 | field.setValue( url ); // And call this.onChange()
|
---|
450 | // Manually set the initial value.(#4191)
|
---|
451 | field.setInitValue();
|
---|
452 | field.focus();
|
---|
453 | }, 0 );
|
---|
454 | }
|
---|
455 | },
|
---|
456 | commit : function( type, element )
|
---|
457 | {
|
---|
458 | if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
|
---|
459 | {
|
---|
460 | element.setAttribute( '_cke_saved_src', decodeURI( this.getValue() ) );
|
---|
461 | element.setAttribute( 'src', decodeURI( this.getValue() ) );
|
---|
462 | }
|
---|
463 | else if ( type == CLEANUP )
|
---|
464 | {
|
---|
465 | element.setAttribute( 'src', '' ); // If removeAttribute doesn't work.
|
---|
466 | element.removeAttribute( 'src' );
|
---|
467 | }
|
---|
468 | },
|
---|
469 | validate : CKEDITOR.dialog.validate.notEmpty( editor.lang.image.urlMissing )
|
---|
470 | },
|
---|
471 | {
|
---|
472 | type : 'button',
|
---|
473 | id : 'browse',
|
---|
474 | align : 'center',
|
---|
475 | label : editor.lang.common.browseServer,
|
---|
476 | hidden : true,
|
---|
477 | filebrowser : 'info:txtUrl'
|
---|
478 | }
|
---|
479 | ]
|
---|
480 | }
|
---|
481 | ]
|
---|
482 | },
|
---|
483 | {
|
---|
484 | id : 'txtAlt',
|
---|
485 | type : 'text',
|
---|
486 | label : editor.lang.image.alt,
|
---|
487 | accessKey : 'A',
|
---|
488 | 'default' : '',
|
---|
489 | onChange : function()
|
---|
490 | {
|
---|
491 | updatePreview( this.getDialog() );
|
---|
492 | },
|
---|
493 | setup : function( type, element )
|
---|
494 | {
|
---|
495 | if ( type == IMAGE )
|
---|
496 | this.setValue( element.getAttribute( 'alt' ) );
|
---|
497 | },
|
---|
498 | commit : function( type, element )
|
---|
499 | {
|
---|
500 | if ( type == IMAGE )
|
---|
501 | {
|
---|
502 | if ( this.getValue() || this.isChanged() )
|
---|
503 | element.setAttribute( 'alt', this.getValue() );
|
---|
504 | }
|
---|
505 | else if ( type == PREVIEW )
|
---|
506 | {
|
---|
507 | element.setAttribute( 'alt', this.getValue() );
|
---|
508 | }
|
---|
509 | else if ( type == CLEANUP )
|
---|
510 | {
|
---|
511 | element.removeAttribute( 'alt' );
|
---|
512 | }
|
---|
513 | }
|
---|
514 | },
|
---|
515 | {
|
---|
516 | type : 'hbox',
|
---|
517 | widths : [ '140px', '240px' ],
|
---|
518 | children :
|
---|
519 | [
|
---|
520 | {
|
---|
521 | type : 'vbox',
|
---|
522 | padding : 10,
|
---|
523 | children :
|
---|
524 | [
|
---|
525 | {
|
---|
526 | type : 'hbox',
|
---|
527 | widths : [ '70%', '30%' ],
|
---|
528 | children :
|
---|
529 | [
|
---|
530 | {
|
---|
531 | type : 'vbox',
|
---|
532 | padding : 1,
|
---|
533 | children :
|
---|
534 | [
|
---|
535 | {
|
---|
536 | type : 'text',
|
---|
537 | width: '40px',
|
---|
538 | id : 'txtWidth',
|
---|
539 | labelLayout : 'horizontal',
|
---|
540 | label : editor.lang.image.width,
|
---|
541 | onKeyUp : onSizeChange,
|
---|
542 | validate: function()
|
---|
543 | {
|
---|
544 | var aMatch = this.getValue().match( regexGetSizeOrEmpty );
|
---|
545 | if ( !aMatch )
|
---|
546 | alert( editor.lang.common.validateNumberFailed );
|
---|
547 | return !!aMatch;
|
---|
548 | },
|
---|
549 | setup : setupDimension,
|
---|
550 | commit : function( type, element )
|
---|
551 | {
|
---|
552 | if ( type == IMAGE )
|
---|
553 | {
|
---|
554 | var value = this.getValue();
|
---|
555 | if ( value )
|
---|
556 | element.setAttribute( 'width', value );
|
---|
557 | else if ( !value && this.isChanged() )
|
---|
558 | element.removeAttribute( 'width' );
|
---|
559 | }
|
---|
560 | else if ( type == PREVIEW )
|
---|
561 | {
|
---|
562 | value = this.getValue();
|
---|
563 | var aMatch = value.match( regexGetSize );
|
---|
564 | if ( !aMatch )
|
---|
565 | {
|
---|
566 | var oImageOriginal = this.getDialog().originalElement;
|
---|
567 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
---|
568 | element.setStyle( 'width', oImageOriginal.$.width + 'px');
|
---|
569 | }
|
---|
570 | else
|
---|
571 | element.setStyle( 'width', value + 'px');
|
---|
572 | }
|
---|
573 | else if ( type == CLEANUP )
|
---|
574 | {
|
---|
575 | element.setStyle( 'width', '0px' ); // If removeAttribute doesn't work.
|
---|
576 | element.removeAttribute( 'width' );
|
---|
577 | element.removeStyle( 'width' );
|
---|
578 | }
|
---|
579 | }
|
---|
580 | },
|
---|
581 | {
|
---|
582 | type : 'text',
|
---|
583 | id : 'txtHeight',
|
---|
584 | width: '40px',
|
---|
585 | labelLayout : 'horizontal',
|
---|
586 | label : editor.lang.image.height,
|
---|
587 | onKeyUp : onSizeChange,
|
---|
588 | validate: function()
|
---|
589 | {
|
---|
590 | var aMatch = this.getValue().match( regexGetSizeOrEmpty );
|
---|
591 | if ( !aMatch )
|
---|
592 | alert( editor.lang.common.validateNumberFailed );
|
---|
593 | return !!aMatch;
|
---|
594 | },
|
---|
595 | setup : setupDimension,
|
---|
596 | commit : function( type, element )
|
---|
597 | {
|
---|
598 | if ( type == IMAGE )
|
---|
599 | {
|
---|
600 | var value = this.getValue();
|
---|
601 | if ( value )
|
---|
602 | element.setAttribute( 'height', value );
|
---|
603 | else if ( !value && this.isChanged() )
|
---|
604 | element.removeAttribute( 'height' );
|
---|
605 | }
|
---|
606 | else if ( type == PREVIEW )
|
---|
607 | {
|
---|
608 | value = this.getValue();
|
---|
609 | var aMatch = value.match( regexGetSize );
|
---|
610 | if ( !aMatch )
|
---|
611 | {
|
---|
612 | var oImageOriginal = this.getDialog().originalElement;
|
---|
613 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
|
---|
614 | element.setStyle( 'height', oImageOriginal.$.height + 'px');
|
---|
615 | }
|
---|
616 | else
|
---|
617 | element.setStyle( 'height', value + 'px');
|
---|
618 | }
|
---|
619 | else if ( type == CLEANUP )
|
---|
620 | {
|
---|
621 | element.setStyle( 'height', '0px' ); // If removeAttribute doesn't work.
|
---|
622 | element.removeAttribute( 'height' );
|
---|
623 | element.removeStyle( 'height' );
|
---|
624 | }
|
---|
625 | }
|
---|
626 | }
|
---|
627 | ]
|
---|
628 | },
|
---|
629 | {
|
---|
630 | type : 'html',
|
---|
631 | style : 'margin-top:10px;width:40px;height:40px;',
|
---|
632 | onLoad : function()
|
---|
633 | {
|
---|
634 | // Activate Reset button
|
---|
635 | var resetButton = CKEDITOR.document.getById( 'btnResetSize' ),
|
---|
636 | ratioButton = CKEDITOR.document.getById( 'btnLockSizes' );
|
---|
637 | if ( resetButton )
|
---|
638 | {
|
---|
639 | resetButton.on( 'click', function()
|
---|
640 | {
|
---|
641 | resetSize( this );
|
---|
642 | }, this.getDialog() );
|
---|
643 | resetButton.on( 'mouseover', function()
|
---|
644 | {
|
---|
645 | this.addClass( 'cke_btn_over' );
|
---|
646 | }, resetButton );
|
---|
647 | resetButton.on( 'mouseout', function()
|
---|
648 | {
|
---|
649 | this.removeClass( 'cke_btn_over' );
|
---|
650 | }, resetButton );
|
---|
651 | }
|
---|
652 | // Activate (Un)LockRatio button
|
---|
653 | if ( ratioButton )
|
---|
654 | {
|
---|
655 | ratioButton.on( 'click', function()
|
---|
656 | {
|
---|
657 | var locked = switchLockRatio( this ),
|
---|
658 | oImageOriginal = this.originalElement,
|
---|
659 | width = this.getValueOf( 'info', 'txtWidth' );
|
---|
660 |
|
---|
661 | if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' && width )
|
---|
662 | {
|
---|
663 | var height = oImageOriginal.$.height / oImageOriginal.$.width * width;
|
---|
664 | if ( !isNaN( height ) )
|
---|
665 | {
|
---|
666 | this.setValueOf( 'info', 'txtHeight', Math.round( height ) );
|
---|
667 | updatePreview( this );
|
---|
668 | }
|
---|
669 | }
|
---|
670 | }, this.getDialog() );
|
---|
671 | ratioButton.on( 'mouseover', function()
|
---|
672 | {
|
---|
673 | this.addClass( 'cke_btn_over' );
|
---|
674 | }, ratioButton );
|
---|
675 | ratioButton.on( 'mouseout', function()
|
---|
676 | {
|
---|
677 | this.removeClass( 'cke_btn_over' );
|
---|
678 | }, ratioButton );
|
---|
679 | }
|
---|
680 | },
|
---|
681 | html : '<div>'+
|
---|
682 | '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.lockRatio +
|
---|
683 | '" class="cke_btn_locked" id="btnLockSizes"></a>' +
|
---|
684 | '<a href="javascript:void(0)" tabindex="-1" title="' + editor.lang.image.resetSize +
|
---|
685 | '" class="cke_btn_reset" id="btnResetSize"></a>'+
|
---|
686 | '</div>'
|
---|
687 | }
|
---|
688 | ]
|
---|
689 | },
|
---|
690 | {
|
---|
691 | type : 'vbox',
|
---|
692 | padding : 1,
|
---|
693 | children :
|
---|
694 | [
|
---|
695 | {
|
---|
696 | type : 'text',
|
---|
697 | id : 'txtBorder',
|
---|
698 | width: '60px',
|
---|
699 | labelLayout : 'horizontal',
|
---|
700 | label : editor.lang.image.border,
|
---|
701 | 'default' : '',
|
---|
702 | onKeyUp : function()
|
---|
703 | {
|
---|
704 | updatePreview( this.getDialog() );
|
---|
705 | },
|
---|
706 | validate: function()
|
---|
707 | {
|
---|
708 | var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
|
---|
709 | return func.apply( this );
|
---|
710 | },
|
---|
711 | setup : function( type, element )
|
---|
712 | {
|
---|
713 | if ( type == IMAGE )
|
---|
714 | this.setValue( element.getAttribute( 'border' ) );
|
---|
715 | },
|
---|
716 | commit : function( type, element )
|
---|
717 | {
|
---|
718 | if ( type == IMAGE )
|
---|
719 | {
|
---|
720 | if ( this.getValue() || this.isChanged() )
|
---|
721 | element.setAttribute( 'border', this.getValue() );
|
---|
722 | }
|
---|
723 | else if ( type == PREVIEW )
|
---|
724 | {
|
---|
725 | var value = parseInt( this.getValue(), 10 );
|
---|
726 | value = isNaN( value ) ? 0 : value;
|
---|
727 | element.setAttribute( 'border', value );
|
---|
728 | element.setStyle( 'border', value + 'px solid black' );
|
---|
729 | }
|
---|
730 | else if ( type == CLEANUP )
|
---|
731 | {
|
---|
732 | element.removeAttribute( 'border' );
|
---|
733 | element.removeStyle( 'border' );
|
---|
734 | }
|
---|
735 | }
|
---|
736 | },
|
---|
737 | {
|
---|
738 | type : 'text',
|
---|
739 | id : 'txtHSpace',
|
---|
740 | width: '60px',
|
---|
741 | labelLayout : 'horizontal',
|
---|
742 | label : editor.lang.image.hSpace,
|
---|
743 | 'default' : '',
|
---|
744 | onKeyUp : function()
|
---|
745 | {
|
---|
746 | updatePreview( this.getDialog() );
|
---|
747 | },
|
---|
748 | validate: function()
|
---|
749 | {
|
---|
750 | var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
|
---|
751 | return func.apply( this );
|
---|
752 | },
|
---|
753 | setup : function( type, element )
|
---|
754 | {
|
---|
755 | if ( type == IMAGE )
|
---|
756 | {
|
---|
757 | var value = element.getAttribute( 'hspace' );
|
---|
758 | if ( value != -1 ) // In IE empty = -1.
|
---|
759 | this.setValue( value );
|
---|
760 | }
|
---|
761 | },
|
---|
762 | commit : function( type, element )
|
---|
763 | {
|
---|
764 | if ( type == IMAGE )
|
---|
765 | {
|
---|
766 | if ( this.getValue() || this.isChanged() )
|
---|
767 | element.setAttribute( 'hspace', this.getValue() );
|
---|
768 | }
|
---|
769 | else if ( type == PREVIEW )
|
---|
770 | {
|
---|
771 | var value = parseInt( this.getValue(), 10 );
|
---|
772 | value = isNaN( value ) ? 0 : value;
|
---|
773 | element.setAttribute( 'hspace', value );
|
---|
774 | element.setStyle( 'margin-left', value + 'px' );
|
---|
775 | element.setStyle( 'margin-right', value + 'px' );
|
---|
776 | }
|
---|
777 | else if ( type == CLEANUP )
|
---|
778 | {
|
---|
779 | element.removeAttribute( 'hspace' );
|
---|
780 | element.removeStyle( 'margin-left' );
|
---|
781 | element.removeStyle( 'margin-right' );
|
---|
782 | }
|
---|
783 | }
|
---|
784 | },
|
---|
785 | {
|
---|
786 | type : 'text',
|
---|
787 | id : 'txtVSpace',
|
---|
788 | width : '60px',
|
---|
789 | labelLayout : 'horizontal',
|
---|
790 | label : editor.lang.image.vSpace,
|
---|
791 | 'default' : '',
|
---|
792 | onKeyUp : function()
|
---|
793 | {
|
---|
794 | updatePreview( this.getDialog() );
|
---|
795 | },
|
---|
796 | validate: function()
|
---|
797 | {
|
---|
798 | var func = CKEDITOR.dialog.validate.integer( editor.lang.common.validateNumberFailed );
|
---|
799 | return func.apply( this );
|
---|
800 | },
|
---|
801 | setup : function( type, element )
|
---|
802 | {
|
---|
803 | if ( type == IMAGE )
|
---|
804 | this.setValue( element.getAttribute( 'vspace' ) );
|
---|
805 | },
|
---|
806 | commit : function( type, element )
|
---|
807 | {
|
---|
808 | if ( type == IMAGE )
|
---|
809 | {
|
---|
810 | if ( this.getValue() || this.isChanged() )
|
---|
811 | element.setAttribute( 'vspace', this.getValue() );
|
---|
812 | }
|
---|
813 | else if ( type == PREVIEW )
|
---|
814 | {
|
---|
815 | var value = parseInt( this.getValue(), 10 );
|
---|
816 | value = isNaN( value ) ? 0 : value;
|
---|
817 | element.setAttribute( 'vspace', this.getValue() );
|
---|
818 | element.setStyle( 'margin-top', value + 'px' );
|
---|
819 | element.setStyle( 'margin-bottom', value + 'px' );
|
---|
820 | }
|
---|
821 | else if ( type == CLEANUP )
|
---|
822 | {
|
---|
823 | element.removeAttribute( 'vspace' );
|
---|
824 | element.removeStyle( 'margin-top' );
|
---|
825 | element.removeStyle( 'margin-bottom' );
|
---|
826 | }
|
---|
827 | }
|
---|
828 | },
|
---|
829 | {
|
---|
830 | id : 'cmbAlign',
|
---|
831 | type : 'select',
|
---|
832 | labelLayout : 'horizontal',
|
---|
833 | widths : [ '35%','65%' ],
|
---|
834 | style : 'width:90px',
|
---|
835 | label : editor.lang.image.align,
|
---|
836 | 'default' : '',
|
---|
837 | items :
|
---|
838 | [
|
---|
839 | [ editor.lang.common.notSet , ''],
|
---|
840 | [ editor.lang.image.alignLeft , 'left'],
|
---|
841 | [ editor.lang.image.alignAbsBottom , 'absBottom'],
|
---|
842 | [ editor.lang.image.alignAbsMiddle , 'absMiddle'],
|
---|
843 | [ editor.lang.image.alignBaseline , 'baseline'],
|
---|
844 | [ editor.lang.image.alignBottom , 'bottom'],
|
---|
845 | [ editor.lang.image.alignMiddle , 'middle'],
|
---|
846 | [ editor.lang.image.alignRight , 'right'],
|
---|
847 | [ editor.lang.image.alignTextTop , 'textTop'],
|
---|
848 | [ editor.lang.image.alignTop , 'top']
|
---|
849 | ],
|
---|
850 | onChange : function()
|
---|
851 | {
|
---|
852 | updatePreview( this.getDialog() );
|
---|
853 | },
|
---|
854 | setup : function( type, element )
|
---|
855 | {
|
---|
856 | if ( type == IMAGE )
|
---|
857 | this.setValue( element.getAttribute( 'align' ) );
|
---|
858 | },
|
---|
859 | commit : function( type, element )
|
---|
860 | {
|
---|
861 | var value = this.getValue();
|
---|
862 | if ( type == IMAGE )
|
---|
863 | {
|
---|
864 | if ( value || this.isChanged() )
|
---|
865 | element.setAttribute( 'align', value );
|
---|
866 | }
|
---|
867 | else if ( type == PREVIEW )
|
---|
868 | {
|
---|
869 | element.setAttribute( 'align', this.getValue() );
|
---|
870 |
|
---|
871 | if ( value == 'absMiddle' || value == 'middle' )
|
---|
872 | element.setStyle( 'vertical-align', 'middle' );
|
---|
873 | else if ( value == 'top' || value == 'textTop' )
|
---|
874 | element.setStyle( 'vertical-align', 'top' );
|
---|
875 | else
|
---|
876 | element.removeStyle( 'vertical-align' );
|
---|
877 |
|
---|
878 | if ( value == 'right' || value == 'left' )
|
---|
879 | element.setStyle( 'styleFloat', value );
|
---|
880 | else
|
---|
881 | element.removeStyle( 'styleFloat' );
|
---|
882 |
|
---|
883 | }
|
---|
884 | else if ( type == CLEANUP )
|
---|
885 | {
|
---|
886 | element.removeAttribute( 'align' );
|
---|
887 | }
|
---|
888 | }
|
---|
889 | }
|
---|
890 | ]
|
---|
891 | }
|
---|
892 | ]
|
---|
893 | },
|
---|
894 | {
|
---|
895 | type : 'vbox',
|
---|
896 | height : '250px',
|
---|
897 | children :
|
---|
898 | [
|
---|
899 | {
|
---|
900 | type : 'html',
|
---|
901 | style : 'width:95%;',
|
---|
902 | html : '<div>' + CKEDITOR.tools.htmlEncode( editor.lang.image.preview ) +'<br>'+
|
---|
903 | '<div id="ImagePreviewLoader" style="display:none"><div class="loading"> </div></div>'+
|
---|
904 | '<div id="ImagePreviewBox">'+
|
---|
905 | '<a href="javascript:void(0)" target="_blank" onclick="return false;" id="previewLink">'+
|
---|
906 | '<img id="previewImage" src="" alt="" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. '+
|
---|
907 | 'Maecenas feugiat consequat diam. Maecenas metus. Vivamus diam purus, cursus a, commodo non, facilisis vitae, '+
|
---|
908 | 'nulla. Aenean dictum lacinia tortor. Nunc iaculis, nibh non iaculis aliquam, orci felis euismod neque, sed ornare massa mauris sed velit. Nulla pretium mi et risus. Fusce mi pede, tempor id, cursus ac, ullamcorper nec, enim. Sed tortor. Curabitur molestie. Duis velit augue, condimentum at, ultrices a, luctus ut, orci. Donec pellentesque egestas eros. Integer cursus, augue in cursus faucibus, eros pede bibendum sem, in tempus tellus justo quis ligula. Etiam eget tortor. Vestibulum rutrum, est ut placerat elementum, lectus nisl aliquam velit, tempor aliquam eros nunc nonummy metus. In eros metus, gravida a, gravida sed, lobortis id, turpis. Ut ultrices, ipsum at venenatis fringilla, sem nulla lacinia tellus, eget aliquet turpis mauris non enim. Nam turpis. Suspendisse lacinia. Curabitur ac tortor ut ipsum egestas elementum. Nunc imperdiet gravida mauris.' +
|
---|
909 | '</div>'+'</div>'
|
---|
910 | }
|
---|
911 | ]
|
---|
912 | }
|
---|
913 | ]
|
---|
914 | }
|
---|
915 | ]
|
---|
916 | },
|
---|
917 | {
|
---|
918 | id : 'Link',
|
---|
919 | label : editor.lang.link.title,
|
---|
920 | padding : 0,
|
---|
921 | elements :
|
---|
922 | [
|
---|
923 | {
|
---|
924 | id : 'txtUrl',
|
---|
925 | type : 'text',
|
---|
926 | label : editor.lang.image.url,
|
---|
927 | style : 'width: 100%',
|
---|
928 | 'default' : '',
|
---|
929 | setup : function( type, element )
|
---|
930 | {
|
---|
931 | if ( type == LINK )
|
---|
932 | {
|
---|
933 | var href = element.getAttribute( '_cke_saved_href' );
|
---|
934 | if ( !href )
|
---|
935 | href = element.getAttribute( 'href' );
|
---|
936 | this.setValue( href );
|
---|
937 | }
|
---|
938 | },
|
---|
939 | commit : function( type, element )
|
---|
940 | {
|
---|
941 | if ( type == LINK )
|
---|
942 | {
|
---|
943 | if ( this.getValue() || this.isChanged() )
|
---|
944 | {
|
---|
945 | element.setAttribute( '_cke_saved_href', decodeURI( this.getValue() ) );
|
---|
946 | element.setAttribute( 'href', 'javascript:void(0)/*' +
|
---|
947 | CKEDITOR.tools.getNextNumber() + '*/' );
|
---|
948 |
|
---|
949 | if ( this.getValue() || !editor.config.image_removeLinkByEmptyURL )
|
---|
950 | this.getDialog().addLink = true;
|
---|
951 | }
|
---|
952 | }
|
---|
953 | }
|
---|
954 | },
|
---|
955 | {
|
---|
956 | type : 'button',
|
---|
957 | id : 'browse',
|
---|
958 | filebrowser : 'Link:txtUrl',
|
---|
959 | style : 'float:right',
|
---|
960 | hidden : true,
|
---|
961 | label : editor.lang.common.browseServer
|
---|
962 | },
|
---|
963 | {
|
---|
964 | id : 'cmbTarget',
|
---|
965 | type : 'select',
|
---|
966 | label : editor.lang.link.target,
|
---|
967 | 'default' : '',
|
---|
968 | items :
|
---|
969 | [
|
---|
970 | [ editor.lang.link.targetNotSet , ''],
|
---|
971 | [ editor.lang.link.targetNew , '_blank'],
|
---|
972 | [ editor.lang.link.targetTop , '_top'],
|
---|
973 | [ editor.lang.link.targetSelf , '_self'],
|
---|
974 | [ editor.lang.link.targetParent , '_parent']
|
---|
975 | ],
|
---|
976 | setup : function( type, element )
|
---|
977 | {
|
---|
978 | if ( type == LINK )
|
---|
979 | this.setValue( element.getAttribute( 'target' ) );
|
---|
980 | },
|
---|
981 | commit : function( type, element )
|
---|
982 | {
|
---|
983 | if ( type == LINK )
|
---|
984 | {
|
---|
985 | if ( this.getValue() || this.isChanged() )
|
---|
986 | element.setAttribute( 'target', this.getValue() );
|
---|
987 | }
|
---|
988 | }
|
---|
989 | }
|
---|
990 | ]
|
---|
991 | },
|
---|
992 | {
|
---|
993 | id : 'Upload',
|
---|
994 | hidden : true,
|
---|
995 | filebrowser : 'uploadButton',
|
---|
996 | label : editor.lang.image.upload,
|
---|
997 | elements :
|
---|
998 | [
|
---|
999 | {
|
---|
1000 | type : 'file',
|
---|
1001 | id : 'upload',
|
---|
1002 | label : editor.lang.image.btnUpload,
|
---|
1003 | style: 'height:40px',
|
---|
1004 | size : 38
|
---|
1005 | },
|
---|
1006 | {
|
---|
1007 | type : 'fileButton',
|
---|
1008 | id : 'uploadButton',
|
---|
1009 | filebrowser : 'info:txtUrl',
|
---|
1010 | label : editor.lang.image.btnUpload,
|
---|
1011 | 'for' : [ 'Upload', 'upload' ]
|
---|
1012 | }
|
---|
1013 | ]
|
---|
1014 | },
|
---|
1015 | {
|
---|
1016 | id : 'advanced',
|
---|
1017 | label : editor.lang.common.advancedTab,
|
---|
1018 | elements :
|
---|
1019 | [
|
---|
1020 | {
|
---|
1021 | type : 'hbox',
|
---|
1022 | widths : [ '50%', '25%', '25%' ],
|
---|
1023 | children :
|
---|
1024 | [
|
---|
1025 | {
|
---|
1026 | type : 'text',
|
---|
1027 | id : 'linkId',
|
---|
1028 | label : editor.lang.common.id,
|
---|
1029 | setup : function( type, element )
|
---|
1030 | {
|
---|
1031 | if ( type == IMAGE )
|
---|
1032 | this.setValue( element.getAttribute( 'id' ) );
|
---|
1033 | },
|
---|
1034 | commit : function( type, element )
|
---|
1035 | {
|
---|
1036 | if ( type == IMAGE )
|
---|
1037 | {
|
---|
1038 | if ( this.getValue() || this.isChanged() )
|
---|
1039 | element.setAttribute( 'id', this.getValue() );
|
---|
1040 | }
|
---|
1041 | }
|
---|
1042 | },
|
---|
1043 | {
|
---|
1044 | id : 'cmbLangDir',
|
---|
1045 | type : 'select',
|
---|
1046 | style : 'width : 100px;',
|
---|
1047 | label : editor.lang.common.langDir,
|
---|
1048 | 'default' : '',
|
---|
1049 | items :
|
---|
1050 | [
|
---|
1051 | [ editor.lang.common.notSet, '' ],
|
---|
1052 | [ editor.lang.common.langDirLtr, 'ltr' ],
|
---|
1053 | [ editor.lang.common.langDirRtl, 'rtl' ]
|
---|
1054 | ],
|
---|
1055 | setup : function( type, element )
|
---|
1056 | {
|
---|
1057 | if ( type == IMAGE )
|
---|
1058 | this.setValue( element.getAttribute( 'dir' ) );
|
---|
1059 | },
|
---|
1060 | commit : function( type, element )
|
---|
1061 | {
|
---|
1062 | if ( type == IMAGE )
|
---|
1063 | {
|
---|
1064 | if ( this.getValue() || this.isChanged() )
|
---|
1065 | element.setAttribute( 'dir', this.getValue() );
|
---|
1066 | }
|
---|
1067 | }
|
---|
1068 | },
|
---|
1069 | {
|
---|
1070 | type : 'text',
|
---|
1071 | id : 'txtLangCode',
|
---|
1072 | label : editor.lang.common.langCode,
|
---|
1073 | 'default' : '',
|
---|
1074 | setup : function( type, element )
|
---|
1075 | {
|
---|
1076 | if ( type == IMAGE )
|
---|
1077 | this.setValue( element.getAttribute( 'lang' ) );
|
---|
1078 | },
|
---|
1079 | commit : function( type, element )
|
---|
1080 | {
|
---|
1081 | if ( type == IMAGE )
|
---|
1082 | {
|
---|
1083 | if ( this.getValue() || this.isChanged() )
|
---|
1084 | element.setAttribute( 'lang', this.getValue() );
|
---|
1085 | }
|
---|
1086 | }
|
---|
1087 | }
|
---|
1088 | ]
|
---|
1089 | },
|
---|
1090 | {
|
---|
1091 | type : 'text',
|
---|
1092 | id : 'txtGenLongDescr',
|
---|
1093 | label : editor.lang.common.longDescr,
|
---|
1094 | setup : function( type, element )
|
---|
1095 | {
|
---|
1096 | if ( type == IMAGE )
|
---|
1097 | this.setValue( element.getAttribute( 'longDesc' ) );
|
---|
1098 | },
|
---|
1099 | commit : function( type, element )
|
---|
1100 | {
|
---|
1101 | if ( type == IMAGE )
|
---|
1102 | {
|
---|
1103 | if ( this.getValue() || this.isChanged() )
|
---|
1104 | element.setAttribute( 'longDesc', this.getValue() );
|
---|
1105 | }
|
---|
1106 | }
|
---|
1107 | },
|
---|
1108 | {
|
---|
1109 | type : 'hbox',
|
---|
1110 | widths : [ '50%', '50%' ],
|
---|
1111 | children :
|
---|
1112 | [
|
---|
1113 | {
|
---|
1114 | type : 'text',
|
---|
1115 | id : 'txtGenClass',
|
---|
1116 | label : editor.lang.common.cssClass,
|
---|
1117 | 'default' : '',
|
---|
1118 | setup : function( type, element )
|
---|
1119 | {
|
---|
1120 | if ( type == IMAGE )
|
---|
1121 | this.setValue( element.getAttribute( 'class' ) );
|
---|
1122 | },
|
---|
1123 | commit : function( type, element )
|
---|
1124 | {
|
---|
1125 | if ( type == IMAGE )
|
---|
1126 | {
|
---|
1127 | if ( this.getValue() || this.isChanged() )
|
---|
1128 | element.setAttribute( 'class', this.getValue() );
|
---|
1129 | }
|
---|
1130 | }
|
---|
1131 | },
|
---|
1132 | {
|
---|
1133 | type : 'text',
|
---|
1134 | id : 'txtGenTitle',
|
---|
1135 | label : editor.lang.common.advisoryTitle,
|
---|
1136 | 'default' : '',
|
---|
1137 | onChange : function()
|
---|
1138 | {
|
---|
1139 | updatePreview( this.getDialog() );
|
---|
1140 | },
|
---|
1141 | setup : function( type, element )
|
---|
1142 | {
|
---|
1143 | if ( type == IMAGE )
|
---|
1144 | this.setValue( element.getAttribute( 'title' ) );
|
---|
1145 | },
|
---|
1146 | commit : function( type, element )
|
---|
1147 | {
|
---|
1148 | if ( type == IMAGE )
|
---|
1149 | {
|
---|
1150 | if ( this.getValue() || this.isChanged() )
|
---|
1151 | element.setAttribute( 'title', this.getValue() );
|
---|
1152 | }
|
---|
1153 | else if ( type == PREVIEW )
|
---|
1154 | {
|
---|
1155 | element.setAttribute( 'title', this.getValue() );
|
---|
1156 | }
|
---|
1157 | else if ( type == CLEANUP )
|
---|
1158 | {
|
---|
1159 | element.removeAttribute( 'title' );
|
---|
1160 | }
|
---|
1161 | }
|
---|
1162 | }
|
---|
1163 | ]
|
---|
1164 | },
|
---|
1165 | {
|
---|
1166 | type : 'text',
|
---|
1167 | id : 'txtdlgGenStyle',
|
---|
1168 | label : editor.lang.common.cssStyle,
|
---|
1169 | 'default' : '',
|
---|
1170 | setup : function( type, element )
|
---|
1171 | {
|
---|
1172 | if ( type == IMAGE )
|
---|
1173 | {
|
---|
1174 | var genStyle = element.getAttribute( 'style' );
|
---|
1175 | if ( !genStyle && element.$.style.cssText )
|
---|
1176 | genStyle = element.$.style.cssText;
|
---|
1177 | this.setValue( genStyle );
|
---|
1178 |
|
---|
1179 | var height = element.$.style.height,
|
---|
1180 | width = element.$.style.width,
|
---|
1181 | aMatchH = ( height ? height : '' ).match( regexGetSize ),
|
---|
1182 | aMatchW = ( width ? width : '').match( regexGetSize );
|
---|
1183 |
|
---|
1184 | this.attributesInStyle =
|
---|
1185 | {
|
---|
1186 | height : !!aMatchH,
|
---|
1187 | width : !!aMatchW
|
---|
1188 | };
|
---|
1189 | }
|
---|
1190 | },
|
---|
1191 | commit : function( type, element )
|
---|
1192 | {
|
---|
1193 | if ( type == IMAGE && ( this.getValue() || this.isChanged() ) )
|
---|
1194 | {
|
---|
1195 | element.setAttribute( 'style', this.getValue() );
|
---|
1196 |
|
---|
1197 | // Set STYLE dimensions.
|
---|
1198 | var height = element.getAttribute( 'height' ),
|
---|
1199 | width = element.getAttribute( 'width' );
|
---|
1200 |
|
---|
1201 | if ( this.attributesInStyle && this.attributesInStyle.height )
|
---|
1202 | {
|
---|
1203 | if ( height )
|
---|
1204 | {
|
---|
1205 | if ( height.match( regexGetSize )[2] == '%' ) // % is allowed
|
---|
1206 | element.setStyle( 'height', height + '%' );
|
---|
1207 | else
|
---|
1208 | element.setStyle( 'height', height + 'px' );
|
---|
1209 | }
|
---|
1210 | else
|
---|
1211 | element.removeStyle( 'height' );
|
---|
1212 | }
|
---|
1213 | if ( this.attributesInStyle && this.attributesInStyle.width )
|
---|
1214 | {
|
---|
1215 | if ( width )
|
---|
1216 | {
|
---|
1217 | if ( width.match( regexGetSize )[2] == '%' ) // % is allowed
|
---|
1218 | element.setStyle( 'width', width + '%' );
|
---|
1219 | else
|
---|
1220 | element.setStyle( 'width', width + 'px' );
|
---|
1221 | }
|
---|
1222 | else
|
---|
1223 | element.removeStyle( 'width' );
|
---|
1224 | }
|
---|
1225 | }
|
---|
1226 | }
|
---|
1227 | }
|
---|
1228 | ]
|
---|
1229 | }
|
---|
1230 | ]
|
---|
1231 | };
|
---|
1232 | };
|
---|
1233 |
|
---|
1234 | CKEDITOR.dialog.add( 'image', function( editor )
|
---|
1235 | {
|
---|
1236 | return imageDialog( editor, 'image' );
|
---|
1237 | });
|
---|
1238 |
|
---|
1239 | CKEDITOR.dialog.add( 'imagebutton', function( editor )
|
---|
1240 | {
|
---|
1241 | return imageDialog( editor, 'imagebutton' );
|
---|
1242 | });
|
---|
1243 | })();
|
---|