_source/plugins/image/plugin.js

   1 /*\r
   2 Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.\r
   3 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   4 */\r
   5 \r
   6 /**\r
   7  * @file Image plugin\r
   8  */\r
   9 \r
  10 (function()\r
  11 {\r
  12 \r
  13 CKEDITOR.plugins.add( 'image',\r
  14 {\r
  15         init : function( editor )\r
  16         {\r
  17                 var pluginName = 'image';\r
  18 \r
  19                 // Register the dialog.\r
  20                 CKEDITOR.dialog.add( pluginName, this.path + 'dialogs/image.js' );\r
  21 \r
  22                 // Register the command.\r
  23                 editor.addCommand( pluginName, new CKEDITOR.dialogCommand( pluginName ) );\r
  24 \r
  25                 // Register the toolbar button.\r
  26                 editor.ui.addButton( 'Image',\r
  27                         {\r
  28                                 label : editor.lang.common.image,\r
  29                                 command : pluginName\r
  30                         });\r
  31 \r
  32                 editor.on( 'doubleclick', function( evt )\r
  33                         {\r
  34                                 var element = evt.data.element;\r
  35 \r
  36                                 if ( element.is( 'img' ) && !element.data( 'cke-realelement' ) && !element.isReadOnly() )\r
  37                                         evt.data.dialog = 'image';\r
  38                         });\r
  39 \r
  40                 // If the "menu" plugin is loaded, register the menu items.\r
  41                 if ( editor.addMenuItems )\r
  42                 {\r
  43                         editor.addMenuItems(\r
  44                                 {\r
  45                                         image :\r
  46                                         {\r
  47                                                 label : editor.lang.image.menu,\r
  48                                                 command : 'image',\r
  49                                                 group : 'image'\r
  50                                         }\r
  51                                 });\r
  52                 }\r
  53 \r
  54                 // If the "contextmenu" plugin is loaded, register the listeners.\r
  55                 if ( editor.contextMenu )\r
  56                 {\r
  57                         editor.contextMenu.addListener( function( element, selection )\r
  58                                 {\r
  59                                         if ( getSelectedImage( editor, element ) )\r
  60                                                 return { image : CKEDITOR.TRISTATE_OFF };\r
  61                                 });\r
  62                 }\r
  63         },\r
  64         afterInit : function( editor )\r
  65         {\r
  66                 // Customize the behavior of the alignment commands. (#7430)\r
  67                 setupAlignCommand( 'left' );\r
  68                 setupAlignCommand( 'right' );\r
  69                 setupAlignCommand( 'center' );\r
  70                 setupAlignCommand( 'block' );\r
  71 \r
  72                 function setupAlignCommand( value )\r
  73                 {\r
  74                         var command = editor.getCommand( 'justify' + value );\r
  75                         if ( command )\r
  76                         {\r
  77                                 if ( value == 'left' || value == 'right' )\r
  78                                 {\r
  79                                         command.on( 'exec', function( evt )\r
  80                                                 {\r
  81                                                         var img = getSelectedImage( editor ), align;\r
  82                                                         if ( img )\r
  83                                                         {\r
  84                                                                 align = getImageAlignment( img );\r
  85                                                                 if ( align == value )\r
  86                                                                 {\r
  87                                                                         img.removeStyle( 'float' );\r
  88 \r
  89                                                                         // Remove "align" attribute when necessary.\r
  90                                                                         if ( value == getImageAlignment( img ) )\r
  91                                                                                 img.removeAttribute( 'align' );\r
  92                                                                 }\r
  93                                                                 else\r
  94                                                                         img.setStyle( 'float', value );\r
  95 \r
  96                                                                 evt.cancel();\r
  97                                                         }\r
  98                                                 });\r
  99                                 }\r
 100 \r
 101                                 command.on( 'refresh', function( evt )\r
 102                                         {\r
 103                                                 var img = getSelectedImage( editor ), align;\r
 104                                                 if ( img )\r
 105                                                 {\r
 106                                                         align = getImageAlignment( img );\r
 107 \r
 108                                                         this.setState(\r
 109                                                                 ( align == value ) ? CKEDITOR.TRISTATE_ON :\r
 110                                                                 ( value == 'right' || value == 'left' ) ? CKEDITOR.TRISTATE_OFF :\r
 111                                                                 CKEDITOR.TRISTATE_DISABLED );\r
 112 \r
 113                                                         evt.cancel();\r
 114                                                 }\r
 115                                         });\r
 116                         }\r
 117                 }\r
 118         }\r
 119 });\r
 120 \r
 121 function getSelectedImage( editor, element )\r
 122 {\r
 123         if ( !element )\r
 124         {\r
 125                 var sel = editor.getSelection();\r
 126                 element = ( sel.getType() == CKEDITOR.SELECTION_ELEMENT ) && sel.getSelectedElement();\r
 127         }\r
 128 \r
 129         if ( element && element.is( 'img' ) && !element.data( 'cke-realelement' ) && !element.isReadOnly() )\r
 130                 return element;\r
 131 }\r
 132 \r
 133 function getImageAlignment( element )\r
 134 {\r
 135         var align = element.getStyle( 'float' );\r
 136 \r
 137         if ( align == 'inherit' || align == 'none' )\r
 138                 align = 0;\r
 139 \r
 140         if ( !align )\r
 141                 align = element.getAttribute( 'align' );\r
 142 \r
 143         return align;\r
 144 }\r
 145 \r
 146 })();\r
 147 \r
 148 /**\r
 149  * Whether to remove links when emptying the link URL field in the image dialog.\r
 150  * @type Boolean\r
 151  * @default true\r
 152  * @example\r
 153  * config.image_removeLinkByEmptyURL = false;\r
 154  */\r
 155 CKEDITOR.config.image_removeLinkByEmptyURL = true;\r
 156 \r
 157 /**\r
 158  *  Padding text to set off the image in preview area.\r
 159  * @name CKEDITOR.config.image_previewText\r
 160  * @type String\r
 161  * @default "Lorem ipsum dolor..." placehoder text.\r
 162  * @example\r
 163  * config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 );\r
 164  */\r