8
0

imageuploadcommand.js 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. import ModelRange from '@ckeditor/ckeditor5-engine/src/model/range';
  6. import ModelSelection from '@ckeditor/ckeditor5-engine/src/model/selection';
  7. import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
  8. import Command from '@ckeditor/ckeditor5-core/src/command';
  9. /**
  10. * @module image/imageupload/imageuploadcommand
  11. */
  12. /**
  13. * Image upload command.
  14. *
  15. * @extends module:core/command~Command
  16. */
  17. export default class ImageUploadCommand extends Command {
  18. /**
  19. * @inheritDoc
  20. */
  21. refresh() {
  22. const model = this.editor.model;
  23. const selection = model.document.selection;
  24. const schema = model.schema;
  25. const position = selection.getFirstPosition();
  26. let parent = position.parent;
  27. if ( parent != parent.root ) {
  28. parent = parent.parent;
  29. }
  30. this.isEnabled = schema.checkChild( parent, 'image' );
  31. }
  32. /**
  33. * Executes the command.
  34. *
  35. * @fires execute
  36. * @param {Object} options Options for the executed command.
  37. * @param {File|Array.<File>} options.files The image file or an array of image files to upload.
  38. * @param {module:engine/model/position~Position} [options.insertAt] The position at which the images should be inserted.
  39. * If the position is not specified, the image will be inserted into the current selection.
  40. * Note: You can use the {@link module:widget/utils~findOptimalInsertionPosition} function
  41. * to calculate (e.g. based on the current selection) a position which is more optimal from the UX perspective.
  42. */
  43. execute( options ) {
  44. const editor = this.editor;
  45. editor.model.change( writer => {
  46. const filesToUpload = Array.isArray( options.files ) ? options.files : [ options.files ];
  47. // Reverse the order of items as the editor will place in reverse when using the same position.
  48. for ( const file of filesToUpload.reverse() ) {
  49. uploadImage( writer, editor, file, options.insertAt );
  50. }
  51. } );
  52. }
  53. }
  54. // Handles uploading single file.
  55. //
  56. // @param {module:engine/model/writer~writer} writer
  57. // @param {module:core/editor/editor~Editor} editor
  58. // @param {File} file
  59. // @param {module:engine/model/position~Position} insertAt
  60. function uploadImage( writer, editor, file, insertAt ) {
  61. const doc = editor.model.document;
  62. const fileRepository = editor.plugins.get( FileRepository );
  63. const loader = fileRepository.createLoader( file );
  64. // Do not throw when upload adapter is not set. FileRepository will log an error anyway.
  65. if ( !loader ) {
  66. return;
  67. }
  68. const imageElement = writer.createElement( 'image', {
  69. uploadId: loader.id
  70. } );
  71. let insertAtSelection;
  72. if ( insertAt ) {
  73. insertAtSelection = new ModelSelection( [ new ModelRange( insertAt ) ] );
  74. } else {
  75. insertAtSelection = doc.selection;
  76. }
  77. editor.model.insertContent( imageElement, insertAtSelection );
  78. // Inserting an image might've failed due to schema regulations.
  79. if ( imageElement.parent ) {
  80. writer.setSelection( imageElement, 'on' );
  81. }
  82. }