2 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
3 * For licensing, see LICENSE.md or http://ckeditor.com/license
7 * @fileOverview The Image plugin.
12 CKEDITOR
.plugins
.add( 'image', {
14 // jscs:disable maximumLineLength
15 lang: 'af,ar,az,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,oc,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
)
25 var pluginName
= 'image';
27 // Register the dialog.
28 CKEDITOR
.dialog
.add( pluginName
, this.path
+ 'dialogs/image.js' );
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]';
33 if ( CKEDITOR
.dialog
.isTabEnabled( editor
, pluginName
, 'advanced' ) )
34 allowed
= 'img[alt,dir,id,lang,longdesc,!src,title]{*}(*)';
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' ]
46 // Register the toolbar button.
47 editor
.ui
.addButton
&& editor
.ui
.addButton( 'Image', {
48 label: editor
.lang
.common
.image
,
53 editor
.on( 'doubleclick', function( evt
) {
54 var element
= evt
.data
.element
;
56 if ( element
.is( 'img' ) && !element
.data( 'cke-realelement' ) && !element
.isReadOnly() )
57 evt
.data
.dialog
= 'image';
60 // If the "menu" plugin is loaded, register the menu items.
61 if ( editor
.addMenuItems
) {
62 editor
.addMenuItems( {
64 label: editor
.lang
.image
.menu
,
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
};
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
)
85 // Customize the behavior of the alignment commands. (#7430)
86 setupAlignCommand( 'left' );
87 setupAlignCommand( 'right' );
88 setupAlignCommand( 'center' );
89 setupAlignCommand( 'block' );
91 function setupAlignCommand( value
) {
92 var command
= editor
.getCommand( 'justify' + value
);
94 if ( value
== 'left' || value
== 'right' ) {
95 command
.on( 'exec', function( evt
) {
96 var img
= getSelectedImage( editor
),
99 align
= getImageAlignment( img
);
100 if ( align
== value
) {
101 img
.removeStyle( 'float' );
103 // Remove "align" attribute when necessary.
104 if ( value
== getImageAlignment( img
) )
105 img
.removeAttribute( 'align' );
107 img
.setStyle( 'float', value
);
115 command
.on( 'refresh', function( evt
) {
116 var img
= getSelectedImage( editor
),
119 align
= getImageAlignment( img
);
122 ( align
== value
) ? CKEDITOR
.TRISTATE_ON : ( value
== 'right' || value
== 'left' ) ? CKEDITOR
.TRISTATE_OFF : CKEDITOR
.TRISTATE_DISABLED
);
132 function getSelectedImage( editor
, element
) {
134 var sel
= editor
.getSelection();
135 element
= sel
.getSelectedElement();
138 if ( element
&& element
.is( 'img' ) && !element
.data( 'cke-realelement' ) && !element
.isReadOnly() )
142 function getImageAlignment( element
) {
143 var align
= element
.getStyle( 'float' );
145 if ( align
== 'inherit' || align
== 'none' )
149 align
= element
.getAttribute( 'align' );
157 * Determines whether dimension inputs should be automatically filled when the image URL changes in the Image plugin dialog window.
159 * config.image_prefillDimensions = false;
162 * @cfg {Boolean} [image_prefillDimensions=true]
163 * @member CKEDITOR.config
167 * Whether to remove links when emptying the link URL field in the Image dialog window.
169 * config.image_removeLinkByEmptyURL = false;
171 * @cfg {Boolean} [image_removeLinkByEmptyURL=true]
172 * @member CKEDITOR.config
174 CKEDITOR
.config
.image_removeLinkByEmptyURL
= true;
177 * Padding text to set off the image in the preview area.
179 * config.image_previewText = CKEDITOR.tools.repeat( '___ ', 100 );
181 * @cfg {String} [image_previewText='Lorem ipsum dolor...' (placeholder text)]
182 * @member CKEDITOR.config