Bladeren bron

Add integrations.

panr 5 jaren geleden
bovenliggende
commit
f5d550e7b2

+ 51 - 3
packages/ckeditor5-image/src/imageupload/imageuploadui.js

@@ -35,12 +35,14 @@ export default class ImageUploadUI extends Plugin {
 	/**
 	 * @inheritDoc
 	 */
-	init() {
+	afterInit() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'imageUpload' );
 
 		editor.ui.componentFactory.add( 'imageUpload', locale => {
-			const imageUploadView = new ImageUploadPanelView( locale );
+			const integrations = this._prepareIntegrations();
+
+			const imageUploadView = new ImageUploadPanelView( locale, integrations && { integrations } );
 			const dropdownView = imageUploadView.dropdownView;
 			const panelView = dropdownView.panelView;
 			const splitButtonView = dropdownView.buttonView;
@@ -87,6 +89,7 @@ export default class ImageUploadUI extends Plugin {
 		} );
 
 		imageUploadView.delegate( 'submit', 'cancel' ).to( dropdownView );
+		this.delegate( 'cancel' ).to( dropdownView );
 
 		dropdownView.on( 'submit', () => {
 			closePanel();
@@ -107,7 +110,7 @@ export default class ImageUploadUI extends Plugin {
 					writer.removeAttribute( 'sizes', selectedElement );
 				} );
 			} else {
-				editor.execute( 'imageInsert', { source: this.imageURLInputValue } );
+				editor.execute( 'imageInsert', { source: imageUploadView.imageURLInputValue } );
 			}
 		}
 
@@ -147,4 +150,49 @@ export default class ImageUploadUI extends Plugin {
 
 		return fileDialogButtonView;
 	}
+
+	/**
+	 * Creates integrations object that will be passed to the
+	 * {@link module:image/imageupload/ui/imageuploadpanelview~ImageUploadPanelView}.
+	 *
+	 * @private
+	 * @returns {Object}
+	 */
+	_prepareIntegrations() {
+		const editor = this.editor;
+		const panelItems = editor.config.get( 'image.upload.panel.items' );
+
+		if ( !panelItems ) {
+			return;
+		}
+
+		const PREDEFINED_INTEGRATIONS = {
+			'insertImageViaUrl': 'insertImageViaUrl'
+		};
+
+		// Prepares ckfinder component.
+		if ( editor.ui.componentFactory.has( 'ckfinder' ) ) {
+			const ckFinderButton = editor.ui.componentFactory.create( 'ckfinder' );
+			ckFinderButton.set( {
+				withText: true,
+				class: 'ck-image-upload__ck-finder-button'
+			} );
+
+			// We want to close the dropdown panel view when user clicks the ckFinderButton.
+			ckFinderButton.delegate( 'execute' ).to( this, 'cancel' );
+
+			PREDEFINED_INTEGRATIONS.openCKFinder = ckFinderButton;
+		}
+
+		// Creates integrations object of valid views to pass it to the ImageUploadPanelView.
+		const integrations = panelItems.reduce( ( object, key ) => {
+			if ( PREDEFINED_INTEGRATIONS[ key ] ) {
+				object[ key ] = PREDEFINED_INTEGRATIONS[ key ];
+			}
+
+			return object;
+		}, {} );
+
+		return Object.keys( integrations ).length ? integrations : null;
+	}
 }

+ 28 - 4
packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js

@@ -17,6 +17,7 @@ import ImageUploadFormRowView from './imageuploadformrowview';
 import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
 import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
@@ -31,9 +32,14 @@ import '../../../theme/imageupload.css';
 
 export default class ImageUploadPanelView extends View {
 	/**
-	 * @inheritDoc
+	 * Creates a view for the dropdown panel of {@link module:image/imageupload/imageuploadui~ImageUploadUI}.
+	 *
+	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
+	 * @param {Object} [options] Options for the panel view.
+	 * @param {Object} [options.integrations={insertImageViaUrl:'insertImageViaUrl'}] Integrations object that contain
+	 * components (or tokens for components) to be shown in the panel view. By default it has `insertImageViaUrl` view.
 	 */
-	constructor( locale ) {
+	constructor( locale, options = { integrations: { insertImageViaUrl: 'insertImageViaUrl' } } ) {
 		super( locale );
 
 		/**
@@ -119,6 +125,24 @@ export default class ImageUploadPanelView extends View {
 			}
 		} );
 
+		/**
+		 * Collection of the defined integrations for inserting the images.
+		 *
+		 * @private
+		 * @member {module:utils/collection~Collection}
+		 */
+		this.set( '_integrations', new Collection() );
+
+		for ( const integration of Object.values( options.integrations ) ) {
+			if ( integration === 'insertImageViaUrl' ) {
+				this._integrations.add( this.labeledInputView );
+
+				continue;
+			}
+
+			this._integrations.add( integration );
+		}
+
 		this.setTemplate( {
 			tag: 'form',
 
@@ -132,7 +156,7 @@ export default class ImageUploadPanelView extends View {
 			},
 
 			children: [
-				this.labeledInputView,
+				...this._integrations,
 				new ImageUploadFormRowView( locale, {
 					children: [
 						this.insertButtonView,
@@ -200,7 +224,7 @@ export default class ImageUploadPanelView extends View {
 		const labeledInputView = new LabeledFieldView( locale, createLabeledInputText );
 
 		labeledInputView.set( {
-			label: t( 'Insert image' )
+			label: t( 'Insert image via URL' )
 		} );
 		labeledInputView.fieldView.placeholder = t( 'Image source URL...' );
 		labeledInputView.fieldView.bind( 'value' ).to( this, 'imageURLInputValue' );