sources/plugins/image/plugin.js

   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 /**
   7  * @fileOverview The Image plugin.
   8  */
   9
  10 ( function() {
  11
  12         CKEDITOR.plugins.add( 'image', {
  13                 requires: 'dialog',
  14                 // jscs:disable maximumLineLength
  15                 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%
  16                 // jscs:enable maximumLineLength
  17                 icons: 'image', // %REMOVE_LINE_CORE%
  18                 hidpi: true, // %REMOVE_LINE_CORE%
  19                 init: function( editor ) {
  20                         // Abort when Image2 is to be loaded since both plugins
  21                         // share the same button, command, etc. names (#11222).
  22                         if ( editor.plugins.image2 )
  23                                 return;
  24
  25                         var pluginName = 'image';
  26
  27                         // Register the dialog.
  28                         CKEDITOR.dialog.add( pluginName, this.path + 'dialogs/image.js' );
  29
  30                         var allowed = 'img[alt,!src]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}',
  31                                 required = 'img[alt,src]';
  32
  33                         if ( CKEDITOR.dialog.isTabEnabled( editor, pluginName, 'advanced' ) )
  34                                 allowed = 'img[alt,dir,id,lang,longdesc,!src,title]{*}(*)';
  35
  36                         // Register the command.
  37                         editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName, {
  38                                 allowedContent: allowed,
  39                                 requiredContent: required,
  40                                 contentTransformations: [
  41                                         [ 'img{width}: sizeToStyle', 'img[width]: sizeToAttribute' ],
  42                                         [ 'img{float}: alignmentToStyle', 'img[align]: alignmentToAttribute' ]
  43                                 ]
  44                         } ) );
  45
  46                         // Register the toolbar button.
  47                         editor.ui.addButton && editor.ui.addButton( 'Image', {
  48                                 label: editor.lang.common.image,
  49                                 command: pluginName,
  50                                 toolbar: 'insert,10'
  51                         } );
  52
  53                         editor.on( 'doubleclick', function( evt ) {
  54                                 var element = evt.data.element;
  55
  56                                 if ( element.is( 'img' ) && !element.data( 'cke-realelement' ) && !element.isReadOnly() )
  57                                         evt.data.dialog = 'image';
  58                         } );
  59
  60                         // If the "menu" plugin is loaded, register the menu items.
  61                         if ( editor.addMenuItems ) {
  62                                 editor.addMenuItems( {
  63                                         image: {
  64                                                 label: editor.lang.image.menu,
  65                                                 command: 'image',
  66                                                 group: 'image'
  67                                         }
  68                                 } );
  69                         }
  70
  71                         // If the "contextmenu" plugin is loaded, register the listeners.
  72                         if ( editor.contextMenu ) {
  73                                 editor.contextMenu.addListener( function( element ) {
  74                                         if ( getSelectedImage( editor, element ) )
  75                                                 return { image: CKEDITOR.TRISTATE_OFF };
  76                                 } );
  77                         }
  78                 },
  79                 afterInit: function( editor ) {
  80                         // Abort when Image2 is to be loaded since both plugins
  81                         // share the same button, command, etc. names (#11222).
  82                         if ( editor.plugins.image2 )
  83                                 return;
  84
  85                         // Customize the behavior of the alignment commands. (#7430)
  86                         setupAlignCommand( 'left' );
  87                         setupAlignCommand( 'right' );
  88                         setupAlignCommand( 'center' );
  89                         setupAlignCommand( 'block' );
  90
  91                         function setupAlignCommand( value ) {
  92                                 var command = editor.getCommand( 'justify' + value );
  93                                 if ( command ) {
  94                                         if ( value == 'left' || value == 'right' ) {
  95                                                 command.on( 'exec', function( evt ) {
  96                                                         var img = getSelectedImage( editor ),
  97                                                                 align;
  98                                                         if ( img ) {
  99                                                                 align = getImageAlignment( img );
 100                                                                 if ( align == value ) {
 101                                                                         img.removeStyle( 'float' );
 102
 103                                                                         // Remove "align" attribute when necessary.
 104                                                                         if ( value == getImageAlignment( img ) )
 105                                                                                 img.removeAttribute( 'align' );
 106                                                                 } else {
 107                                                                         img.setStyle( 'float', value );
 108                                                                 }
 109
 110                                                                 evt.cancel();
 111                                                         }
 112                                                 } );
 113                                         }
 114
 115                                         command.on( 'refresh', function( evt ) {
 116                                                 var img = getSelectedImage( editor ),
 117                                                         align;
 118                                                 if ( img ) {
 119                                                         align = getImageAlignment( img );
 120
 121                                                         this.setState(
 122                                                         ( align == value ) ? CKEDITOR.TRISTATE_ON : ( value == 'right' || value == 'left' ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED );
 123
 124                                                         evt.cancel();
 125                                                 }
 126                                         } );
 127                                 }
 128                         }
 129                 }
 130         } );
 131
 132         function getSelectedImage( editor, element ) {
 133                 if ( !element ) {
 134                         var sel = editor.getSelection();
 135                         element = sel.getSelectedElement();
 136                 }
 137
 138                 if ( element && element.is( 'img' ) && !element.data( 'cke-realelement' ) && !element.isReadOnly() )
 139                         return element;
 140         }
 141
 142         function getImageAlignment( element ) {
 143                 var align = element.getStyle( 'float' );
 144
 145                 if ( align == 'inherit' || align == 'none' )
 146                         align = 0;
 147
 148                 if ( !align )
 149                         align = element.getAttribute( 'align' );
 150
 151                 return align;
 152         }
 153
 154 } )();
 155
 156 /**
 157  * Determines whether dimension inputs should be automatically filled when the image URL changes in the Image plugin dialog window.
 158  *
 159  *              config.image_prefillDimensions = false;
 160  *
 161  * @since 4.5
 162  * @cfg {Boolean} [image_prefillDimensions=true]
 163  * @member CKEDITOR.config
 164  */
 165
 166 /**
 167  * Whether to remove links when emptying the link URL field in the Image dialog window.
 168  *
 169  *              config.image_removeLinkByEmptyURL = false;
 170  *
 171  * @cfg {Boolean} [image_removeLinkByEmptyURL=true]
 172  * @member CKEDITOR.config
 173  */
 174 CKEDITOR.config.image_removeLinkByEmptyURL = true;
 175
 176 /**
 177  * Padding text to set off the image in the preview area.
 178  *
 179  *              config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 );
 180  *
 181  * @cfg {String} [image_previewText='Lorem ipsum dolor...' (placeholder text)]
 182  * @member CKEDITOR.config
 183  */