imageuploadbutton.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  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. /**
  13. * Image upload button plugin.
  14. * Adds `insertImage` button to UI component factory.
  15. *
  16. * @extends module:core/plugin~Plugin
  17. */
  18. export default class ImageUploadButton extends Plugin {
  19. /**
  20. * @inheritDoc
  21. */
  22. static get requires() {
  23. return [ ImageUploadEngine ];
  24. }
  25. /**
  26. * @inheritDoc
  27. */
  28. init() {
  29. const editor = this.editor;
  30. const t = editor.t;
  31. // Setup `insertImage` button.
  32. editor.ui.componentFactory.add( 'insertImage', ( locale ) => {
  33. const view = new FileDialogButtonView( locale );
  34. view.set( {
  35. label: t( 'Insert image' ),
  36. icon: imageIcon,
  37. tooltip: true,
  38. acceptedType: 'image/*',
  39. allowMultipleFiles: true
  40. } );
  41. view.on( 'done', ( evt, files ) => {
  42. for ( const file of files ) {
  43. editor.execute( 'imageUpload', { file: file } );
  44. }
  45. } );
  46. return view;
  47. } );
  48. }
  49. }