8
0

imageuploadui.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module image/imageupload/imageuploadui
  7. */
  8. import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
  9. import FileDialogButtonView from '@ckeditor/ckeditor5-upload/src/ui/filedialogbuttonview';
  10. import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
  11. import { isImageType } from './utils';
  12. /**
  13. * The image upload button plugin.
  14. *
  15. * For a detailed overview, check the {@glink features/image-upload Image upload feature} documentation.
  16. *
  17. * Adds the `'imageUpload'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
  18. *
  19. * @extends module:core/plugin~Plugin
  20. */
  21. export default class ImageUploadUI extends Plugin {
  22. /**
  23. * @inheritDoc
  24. */
  25. init() {
  26. const editor = this.editor;
  27. const t = editor.t;
  28. // Setup `imageUpload` button.
  29. editor.ui.componentFactory.add( 'imageUpload', locale => {
  30. const view = new FileDialogButtonView( locale );
  31. const command = editor.commands.get( 'imageUpload' );
  32. view.set( {
  33. acceptedType: 'image/*',
  34. allowMultipleFiles: true
  35. } );
  36. view.buttonView.set( {
  37. label: t( 'Insert image' ),
  38. icon: imageIcon,
  39. tooltip: true
  40. } );
  41. view.buttonView.bind( 'isEnabled' ).to( command );
  42. view.on( 'done', ( evt, files ) => {
  43. const imagesToUpload = Array.from( files ).filter( isImageType );
  44. if ( imagesToUpload.length ) {
  45. editor.execute( 'imageUpload', { files: imagesToUpload } );
  46. }
  47. } );
  48. return view;
  49. } );
  50. }
  51. }