plugin.js 5.4 KB

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