_source/plugins/image/plugin.js

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