8
0
Просмотр исходного кода

Added ImageUpload and ui/FileUploadButtonView.

Szymon Kupś 8 лет назад
Родитель
Сommit
bd93d5efe7

+ 55 - 0
packages/ckeditor5-upload/src/imageupload.js

@@ -0,0 +1,55 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module upload/imageupload
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ImageUploadEngine from './imageuploadengine';
+import FileDialogButtonView from './ui/fileuploadbuttonview';
+import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
+
+/**
+ * Image upload plugin.
+ * Adds `insertImage` button to UI component factory.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageUpload extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageUploadEngine ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		editor.ui.componentFactory.add( 'insertImage', ( locale ) => {
+			const view = new FileDialogButtonView( locale );
+
+			view.set( {
+				label: t( 'Insert image' ),
+				icon: imageIcon,
+				tooltip: true,
+				acceptedType: 'image/*'
+			} );
+
+			view.on( 'done', ( evt, files ) => {
+				for ( const file of files ) {
+					editor.execute( 'imageUpload', { file: file } );
+				}
+			} );
+
+			return view;
+		} );
+	}
+}

+ 4 - 0
packages/ckeditor5-upload/src/imageuploadcommand.js

@@ -11,6 +11,10 @@ import FileRepository from './filerepository';
 import { isImageType } from './utils';
 import Command from '@ckeditor/ckeditor5-core/src/command/command';
 
+/**
+ * @module upload/imageuploadcommand
+ */
+
 /**
  * Image upload command.
  *

+ 4 - 0
packages/ckeditor5-upload/src/imageuploadengine.js

@@ -3,6 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
+/**
+ * @module upload/imageuploadengine
+ */
+
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import { eventNameToConsumableType } from '@ckeditor/ckeditor5-engine/src/conversion/model-to-view-converters';
 import FileRepository from './filerepository';

+ 134 - 0
packages/ckeditor5-upload/src/ui/fileuploadbuttonview.js

@@ -0,0 +1,134 @@
+/**
+ * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals document */
+
+/**
+ * @module upload/ui/fileuploadbuttonview
+ */
+
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+import View from '@ckeditor/ckeditor5-ui/src/view';
+import Template from '@ckeditor/ckeditor5-ui/src/template';
+
+/**
+ * File Upload button view.
+ *
+ * @extends module:ui/button/buttonview~ButtonView
+ */
+export default class FileUploadButtonView extends ButtonView {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * Hidden input view used to execute file dialog. It will be hidden and added to the end of `document.body`.
+		 *
+		 * @private
+		 * @member module:upload/ui/fileuploadbuttonview~FileDialogButtonView #_fileInputView
+		 */
+		this._fileInputView = new FileInputView( locale );
+
+		/**
+		 * Accepted file types. Can be provided in form of file extensions, media type or one of:
+		 * * `audio/*`,
+		 * * `video/*`,
+		 * * `image/*`.
+		 *
+		 * @observable
+		 * @member {String} #acceptedType
+		 */
+		this._fileInputView.bind( 'acceptedType' ).to( this, 'acceptedType' );
+
+		/**
+		 * Fired when file dialog is closed with file selected.
+		 *
+		 *	fileUploadButtonView.on( 'done', ( evt, files ) => {
+		 *		for ( const file of files ) {
+		 *			processFile( file );
+		 *		}
+		 *	}
+		 *
+		 * @event done
+		 * @param {Array.<File>} files Array of selected files.
+		 */
+		this._fileInputView.delegate( 'done' ).to( this );
+
+		this.on( 'execute', () => {
+			this._fileInputView.open();
+		} );
+
+		document.body.appendChild( this._fileInputView.element );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		document.body.removeChild( this._fileInputView.element );
+
+		return super.destroy();
+	}
+}
+
+/**
+ * Hidden file input view class.
+ *
+ * @private
+ * @extends {module:ui/view~View}
+ */
+class FileInputView extends View {
+	/**
+	 * @inheritDoc
+	 */
+	constructor( locale ) {
+		super( locale );
+
+		/**
+		 * Accepted file types. Can be provided in form of file extensions, media type or one of:
+		 * * `audio/*`,
+		 * * `video/*`,
+		 * * `image/*`.
+		 *
+		 * @observable
+		 * @member {String} #acceptedType
+		 */
+		this.set( 'acceptedType' );
+
+		const bind = this.bindTemplate;
+
+		this.template = new Template( {
+			tag: 'input',
+
+			attributes: {
+				class: [
+					'ck-hidden'
+				],
+				type: 'file',
+				tabindex: '-1',
+				accept: bind.to( 'acceptedType' )
+			},
+
+			on: {
+				change: bind.to( () => {
+					if ( this.element && this.element.files && this.element.files.length ) {
+						this.fire( 'done', this.element.files );
+					}
+
+					this.element.value = '';
+				} )
+			}
+		} );
+	}
+
+	/**
+	 * Opens file dialog.
+	 */
+	open() {
+		this.element.click();
+	}
+}

+ 4 - 0
packages/ckeditor5-upload/src/utils.js

@@ -3,6 +3,10 @@
  * For licensing, see LICENSE.md.
  */
 
+/**
+ * @module upload/utils
+ */
+
 /**
  * Checks if given file is an image.
  *

+ 3 - 3
packages/ckeditor5-upload/tests/manual/imageupload.js

@@ -19,15 +19,15 @@ import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
 import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
 import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
 import List from '@ckeditor/ckeditor5-list/src/list';
-import ImageUploadEngine from '../../src/imageuploadengine';
+import ImageUpload from '../../src/imageupload';
 import { AdapterMock } from '../_utils/mocks';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
 	plugins: [
 		Enter, Typing, Paragraph, Heading, Undo, Bold, Italic, Heading, List, Image, ImageToolbar, Clipboard,
-		ImageCaption, ImageStyle, ImageUploadEngine
+		ImageCaption, ImageStyle, ImageUpload
 	],
-	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ]
+	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList', 'insertImage' ]
 } )
 .then( editor => {
 	let adapterMock, progress;