ckfindercommand.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* global window */
  6. /**
  7. * @module ckfinder/ckfindercommand
  8. */
  9. import Command from '@ckeditor/ckeditor5-core/src/command';
  10. import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
  11. /**
  12. * The CKFinder command. It is used by the {@link module:ckfinder/ckfinderediting~CKFinderEditing ckfinder editng feature}
  13. * to open a CKFinder file browser to insert an image or a link to a file into content.
  14. *
  15. * editor.execute( 'ckfinder' );
  16. *
  17. * @extends module:core/command~Command
  18. */
  19. export default class CKFinderCommand extends Command {
  20. /**
  21. * @inheritDoc
  22. */
  23. constructor( editor ) {
  24. super( editor );
  25. // Remove default document listener to lower its priority.
  26. this.stopListening( this.editor.model.document, 'change' );
  27. // Lower this command listener priority to be sure that refresh() will be called after link & image refresh.
  28. this.listenTo( this.editor.model.document, 'change', () => this.refresh(), { priority: 'low' } );
  29. }
  30. /**
  31. * @inheritDoc
  32. */
  33. refresh() {
  34. const imageCommand = this.editor.commands.get( 'imageInsert' );
  35. const linkCommand = this.editor.commands.get( 'link' );
  36. // The CKFinder command is enabled when one of image or link command is enabled.
  37. this.isEnabled = imageCommand && linkCommand && ( imageCommand.isEnabled || linkCommand.isEnabled );
  38. }
  39. /**
  40. * @inheritDoc
  41. */
  42. execute() {
  43. const editor = this.editor;
  44. const openerMethod = this.editor.config.get( 'ckfinder.openerMethod' ) || 'modal';
  45. if ( openerMethod != 'popup' && openerMethod != 'modal' ) {
  46. throw new CKEditorError( 'ckfinder-unknown-openerMethod: The openerMethod config option must by "popup" or "modal".', editor );
  47. }
  48. const options = this.editor.config.get( 'ckfinder.options' ) || {};
  49. options.chooseFiles = true;
  50. // Cache the user-defined onInit method
  51. const originalOnInit = options.onInit;
  52. // Pass the lang code to the CKFinder if not defined by user.
  53. if ( !options.language ) {
  54. options.language = editor.locale.uiLanguage;
  55. }
  56. // The onInit method allows to extend CKFinder's behavior. It is used to attach event listeners to file choosing related events.
  57. options.onInit = finder => {
  58. // Call original options.onInit if it was defined by user.
  59. if ( originalOnInit ) {
  60. originalOnInit( finder );
  61. }
  62. finder.on( 'files:choose', evt => {
  63. const files = evt.data.files.toArray();
  64. // Insert links
  65. const links = files.filter( file => !file.isImage() );
  66. const images = files.filter( file => file.isImage() );
  67. for ( const linkFile of links ) {
  68. editor.execute( 'link', linkFile.getUrl() );
  69. }
  70. const imagesUrls = [];
  71. for ( const image of images ) {
  72. const url = image.getUrl();
  73. imagesUrls.push( url ? url : finder.request( 'file:getProxyUrl', { file: image } ) );
  74. }
  75. if ( imagesUrls.length ) {
  76. insertImages( editor, imagesUrls );
  77. }
  78. } );
  79. finder.on( 'file:choose:resizedImage', evt => {
  80. const resizedUrl = evt.data.resizedUrl;
  81. if ( !resizedUrl ) {
  82. const notification = editor.plugins.get( 'Notification' );
  83. const t = editor.locale.t;
  84. notification.showWarning( t( 'Could not obtain resized image URL.' ), {
  85. title: t( 'Selecting resized image failed' ),
  86. namespace: 'ckfinder'
  87. } );
  88. return;
  89. }
  90. insertImages( editor, [ resizedUrl ] );
  91. } );
  92. };
  93. window.CKFinder[ openerMethod ]( options );
  94. }
  95. }
  96. function insertImages( editor, urls ) {
  97. const imageCommand = editor.commands.get( 'imageInsert' );
  98. // Check if inserting an image is actually possible - it might be possible to only insert a link.
  99. if ( !imageCommand.isEnabled ) {
  100. const notification = editor.plugins.get( 'Notification' );
  101. const t = editor.locale.t;
  102. notification.showWarning( t( 'Could not insert image at the current position.' ), {
  103. title: t( 'Inserting image failed' ),
  104. namespace: 'ckfinder'
  105. } );
  106. return;
  107. }
  108. editor.execute( 'imageInsert', { source: urls } );
  109. }