171 lines
		
	
	
		
			5.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
		
		
			
		
	
	
			171 lines
		
	
	
		
			5.0 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
| 
								 | 
							
								/**
							 | 
						|||
| 
								 | 
							
								 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
							 | 
						|||
| 
								 | 
							
								 * For licensing, see LICENSE.md or http://ckeditor.com/license
							 | 
						|||
| 
								 | 
							
								 */
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								/**
							 | 
						|||
| 
								 | 
							
								 * @fileOverview Image plugin
							 | 
						|||
| 
								 | 
							
								 */
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								( function() {
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
									CKEDITOR.plugins.add( 'image', {
							 | 
						|||
| 
								 | 
							
										requires: 'dialog',
							 | 
						|||
| 
								 | 
							
										lang: 'af,ar,bg,bn,bs,ca,cs,cy,da,de,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,ug,uk,vi,zh,zh-cn', // %REMOVE_LINE_CORE%
							 | 
						|||
| 
								 | 
							
										icons: 'image', // %REMOVE_LINE_CORE%
							 | 
						|||
| 
								 | 
							
										hidpi: true, // %REMOVE_LINE_CORE%
							 | 
						|||
| 
								 | 
							
										init: function( editor ) {
							 | 
						|||
| 
								 | 
							
											// Abort when Image2 is to be loaded since both plugins
							 | 
						|||
| 
								 | 
							
											// share the same button, command, etc. names (#11222).
							 | 
						|||
| 
								 | 
							
											if ( editor.plugins.image2 )
							 | 
						|||
| 
								 | 
							
												return;
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											var pluginName = 'image';
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											// Register the dialog.
							 | 
						|||
| 
								 | 
							
											CKEDITOR.dialog.add( pluginName, this.path + 'dialogs/image.js' );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											var allowed = 'img[alt,!src]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}',
							 | 
						|||
| 
								 | 
							
												required = 'img[alt,src]';
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											if ( CKEDITOR.dialog.isTabEnabled( editor, pluginName, 'advanced' ) )
							 | 
						|||
| 
								 | 
							
												allowed = 'img[alt,dir,id,lang,longdesc,!src,title]{*}(*)';
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											// Register the command.
							 | 
						|||
| 
								 | 
							
											editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName, {
							 | 
						|||
| 
								 | 
							
												allowedContent: allowed,
							 | 
						|||
| 
								 | 
							
												requiredContent: required,
							 | 
						|||
| 
								 | 
							
												contentTransformations: [
							 | 
						|||
| 
								 | 
							
													[ 'img{width}: sizeToStyle', 'img[width]: sizeToAttribute' ],
							 | 
						|||
| 
								 | 
							
													[ 'img{float}: alignmentToStyle', 'img[align]: alignmentToAttribute' ]
							 | 
						|||
| 
								 | 
							
												]
							 | 
						|||
| 
								 | 
							
											} ) );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											// Register the toolbar button.
							 | 
						|||
| 
								 | 
							
											editor.ui.addButton && editor.ui.addButton( 'Image', {
							 | 
						|||
| 
								 | 
							
												label: editor.lang.common.image,
							 | 
						|||
| 
								 | 
							
												command: pluginName,
							 | 
						|||
| 
								 | 
							
												toolbar: 'insert,10'
							 | 
						|||
| 
								 | 
							
											} );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											editor.on( 'doubleclick', function( evt ) {
							 | 
						|||
| 
								 | 
							
												var element = evt.data.element;
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
												if ( element.is( 'img' ) && !element.data( 'cke-realelement' ) && !element.isReadOnly() )
							 | 
						|||
| 
								 | 
							
													evt.data.dialog = 'image';
							 | 
						|||
| 
								 | 
							
											} );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											// If the "menu" plugin is loaded, register the menu items.
							 | 
						|||
| 
								 | 
							
											if ( editor.addMenuItems ) {
							 | 
						|||
| 
								 | 
							
												editor.addMenuItems( {
							 | 
						|||
| 
								 | 
							
													image: {
							 | 
						|||
| 
								 | 
							
														label: editor.lang.image.menu,
							 | 
						|||
| 
								 | 
							
														command: 'image',
							 | 
						|||
| 
								 | 
							
														group: 'image'
							 | 
						|||
| 
								 | 
							
													}
							 | 
						|||
| 
								 | 
							
												} );
							 | 
						|||
| 
								 | 
							
											}
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											// If the "contextmenu" plugin is loaded, register the listeners.
							 | 
						|||
| 
								 | 
							
											if ( editor.contextMenu ) {
							 | 
						|||
| 
								 | 
							
												editor.contextMenu.addListener( function( element, selection ) {
							 | 
						|||
| 
								 | 
							
													if ( getSelectedImage( editor, element ) )
							 | 
						|||
| 
								 | 
							
														return { image: CKEDITOR.TRISTATE_OFF };
							 | 
						|||
| 
								 | 
							
												} );
							 | 
						|||
| 
								 | 
							
											}
							 | 
						|||
| 
								 | 
							
										},
							 | 
						|||
| 
								 | 
							
										afterInit: function( editor ) {
							 | 
						|||
| 
								 | 
							
											// Abort when Image2 is to be loaded since both plugins
							 | 
						|||
| 
								 | 
							
											// share the same button, command, etc. names (#11222).
							 | 
						|||
| 
								 | 
							
											if ( editor.plugins.image2 )
							 | 
						|||
| 
								 | 
							
												return;
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											// Customize the behavior of the alignment commands. (#7430)
							 | 
						|||
| 
								 | 
							
											setupAlignCommand( 'left' );
							 | 
						|||
| 
								 | 
							
											setupAlignCommand( 'right' );
							 | 
						|||
| 
								 | 
							
											setupAlignCommand( 'center' );
							 | 
						|||
| 
								 | 
							
											setupAlignCommand( 'block' );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
											function setupAlignCommand( value ) {
							 | 
						|||
| 
								 | 
							
												var command = editor.getCommand( 'justify' + value );
							 | 
						|||
| 
								 | 
							
												if ( command ) {
							 | 
						|||
| 
								 | 
							
													if ( value == 'left' || value == 'right' ) {
							 | 
						|||
| 
								 | 
							
														command.on( 'exec', function( evt ) {
							 | 
						|||
| 
								 | 
							
															var img = getSelectedImage( editor ),
							 | 
						|||
| 
								 | 
							
																align;
							 | 
						|||
| 
								 | 
							
															if ( img ) {
							 | 
						|||
| 
								 | 
							
																align = getImageAlignment( img );
							 | 
						|||
| 
								 | 
							
																if ( align == value ) {
							 | 
						|||
| 
								 | 
							
																	img.removeStyle( 'float' );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
																	// Remove "align" attribute when necessary.
							 | 
						|||
| 
								 | 
							
																	if ( value == getImageAlignment( img ) )
							 | 
						|||
| 
								 | 
							
																		img.removeAttribute( 'align' );
							 | 
						|||
| 
								 | 
							
																} else
							 | 
						|||
| 
								 | 
							
																	img.setStyle( 'float', value );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
																evt.cancel();
							 | 
						|||
| 
								 | 
							
															}
							 | 
						|||
| 
								 | 
							
														} );
							 | 
						|||
| 
								 | 
							
													}
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
													command.on( 'refresh', function( evt ) {
							 | 
						|||
| 
								 | 
							
														var img = getSelectedImage( editor ),
							 | 
						|||
| 
								 | 
							
															align;
							 | 
						|||
| 
								 | 
							
														if ( img ) {
							 | 
						|||
| 
								 | 
							
															align = getImageAlignment( img );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
															this.setState(
							 | 
						|||
| 
								 | 
							
															( align == value ) ? CKEDITOR.TRISTATE_ON : ( value == 'right' || value == 'left' ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
															evt.cancel();
							 | 
						|||
| 
								 | 
							
														}
							 | 
						|||
| 
								 | 
							
													} );
							 | 
						|||
| 
								 | 
							
												}
							 | 
						|||
| 
								 | 
							
											}
							 | 
						|||
| 
								 | 
							
										}
							 | 
						|||
| 
								 | 
							
									} );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
									function getSelectedImage( editor, element ) {
							 | 
						|||
| 
								 | 
							
										if ( !element ) {
							 | 
						|||
| 
								 | 
							
											var sel = editor.getSelection();
							 | 
						|||
| 
								 | 
							
											element = sel.getSelectedElement();
							 | 
						|||
| 
								 | 
							
										}
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
										if ( element && element.is( 'img' ) && !element.data( 'cke-realelement' ) && !element.isReadOnly() )
							 | 
						|||
| 
								 | 
							
											return element;
							 | 
						|||
| 
								 | 
							
									}
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
									function getImageAlignment( element ) {
							 | 
						|||
| 
								 | 
							
										var align = element.getStyle( 'float' );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
										if ( align == 'inherit' || align == 'none' )
							 | 
						|||
| 
								 | 
							
											align = 0;
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
										if ( !align )
							 | 
						|||
| 
								 | 
							
											align = element.getAttribute( 'align' );
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
										return align;
							 | 
						|||
| 
								 | 
							
									}
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								} )();
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								/**
							 | 
						|||
| 
								 | 
							
								 * Whether to remove links when emptying the link URL field in the image dialog.
							 | 
						|||
| 
								 | 
							
								 *
							 | 
						|||
| 
								 | 
							
								 *		config.image_removeLinkByEmptyURL = false;
							 | 
						|||
| 
								 | 
							
								 *
							 | 
						|||
| 
								 | 
							
								 * @cfg {Boolean} [image_removeLinkByEmptyURL=true]
							 | 
						|||
| 
								 | 
							
								 * @member CKEDITOR.config
							 | 
						|||
| 
								 | 
							
								 */
							 | 
						|||
| 
								 | 
							
								CKEDITOR.config.image_removeLinkByEmptyURL = true;
							 | 
						|||
| 
								 | 
							
								
							 | 
						|||
| 
								 | 
							
								/**
							 | 
						|||
| 
								 | 
							
								 * Padding text to set off the image in preview area.
							 | 
						|||
| 
								 | 
							
								 *
							 | 
						|||
| 
								 | 
							
								 *		config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 );
							 | 
						|||
| 
								 | 
							
								 *
							 | 
						|||
| 
								 | 
							
								 * @cfg {String} [image_previewText='Lorem ipsum dolor...' (placeholder text)]
							 | 
						|||
| 
								 | 
							
								 * @member CKEDITOR.config
							 | 
						|||
| 
								 | 
							
								 */
							 |