8
0

imageuploadbutton.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module upload/imageuploadbutton
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import ImageUploadEngine from './imageuploadengine';
  10. import FileDialogButtonView from './ui/filedialogbuttonview';
  11. import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
  12. import { isImageType, findOptimalInsertionPosition } from './utils';
  13. /**
  14. * Image upload button plugin.
  15. * Adds `insertImage` button to UI component factory.
  16. *
  17. * @extends module:core/plugin~Plugin
  18. */
  19. export default class ImageUploadButton extends Plugin {
  20. /**
  21. * @inheritDoc
  22. */
  23. static get requires() {
  24. return [ ImageUploadEngine ];
  25. }
  26. /**
  27. * @inheritDoc
  28. */
  29. init() {
  30. const editor = this.editor;
  31. const t = editor.t;
  32. // Setup `insertImage` button.
  33. editor.ui.componentFactory.add( 'insertImage', locale => {
  34. const view = new FileDialogButtonView( locale );
  35. const command = editor.commands.get( 'imageUpload' );
  36. view.set( {
  37. label: t( 'Insert image' ),
  38. icon: imageIcon,
  39. tooltip: true,
  40. acceptedType: 'image/*',
  41. allowMultipleFiles: true
  42. } );
  43. view.bind( 'isEnabled' ).to( command );
  44. view.on( 'done', ( evt, files ) => {
  45. for ( const file of files ) {
  46. const insertAt = findOptimalInsertionPosition( editor.document.selection );
  47. if ( isImageType( file ) ) {
  48. editor.execute( 'imageUpload', { file, insertAt } );
  49. }
  50. }
  51. } );
  52. return view;
  53. } );
  54. }
  55. }