imageuploadcommand.js 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. /**
  2. * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import ModelDocumentFragment from '@ckeditor/ckeditor5-engine/src/model/documentfragment';
  6. import ModelElement from '@ckeditor/ckeditor5-engine/src/model/element';
  7. import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
  8. import ModelPosition from '@ckeditor/ckeditor5-engine/src/model/position';
  9. import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
  10. import FileRepository from './filerepository';
  11. import { isImageType } from './utils';
  12. import Command from '@ckeditor/ckeditor5-core/src/command/command';
  13. /**
  14. * @module upload/imageuploadcommand
  15. */
  16. /**
  17. * Image upload command.
  18. *
  19. * @extends module:core/command/command~Command
  20. */
  21. export default class ImageUploadCommand extends Command {
  22. /**
  23. * Executes command.
  24. *
  25. * @protected
  26. * @param {Object} options Options for executed command.
  27. * @param {File} options.file Image file to upload.
  28. * @param {module:engine/model/batch~Batch} [options.batch] Batch to collect all the change steps.
  29. * New batch will be created if this option is not set.
  30. */
  31. _doExecute( options ) {
  32. const editor = this.editor;
  33. const doc = editor.document;
  34. const batch = options.batch || doc.batch();
  35. const file = options.file;
  36. const selection = doc.selection;
  37. const fileRepository = editor.plugins.get( FileRepository );
  38. if ( !isImageType( file ) ) {
  39. return;
  40. }
  41. doc.enqueueChanges( () => {
  42. let insertPosition;
  43. const selectedElement = selection.getSelectedElement();
  44. // If selected element is placed directly in root - put image after it.
  45. if ( selectedElement && selectedElement.parent.is( 'rootElement' ) ) {
  46. insertPosition = ModelPosition.createAfter( selectedElement );
  47. } else {
  48. // If selection is inside some block - put image before it.
  49. const firstBlock = doc.selection.getSelectedBlocks().next().value;
  50. if ( firstBlock ) {
  51. insertPosition = ModelPosition.createBefore( firstBlock );
  52. }
  53. }
  54. // No position to insert.
  55. if ( !insertPosition ) {
  56. return;
  57. }
  58. const imageElement = new ModelElement( 'image', {
  59. uploadId: fileRepository.createLoader( file ).id
  60. } );
  61. const documentFragment = new ModelDocumentFragment( [ imageElement ] );
  62. const range = new ModelRange( insertPosition );
  63. const insertSelection = new ModelSelection();
  64. insertSelection.setRanges( [ range ] );
  65. editor.data.insertContent( documentFragment, insertSelection, batch );
  66. selection.setRanges( [ ModelRange.createOn( imageElement ) ] );
  67. } );
  68. }
  69. }