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