瀏覽代碼

Create ImageInsert plugin (step2).

panr 5 年之前
父節點
當前提交
ffdb38b2da

+ 140 - 0
packages/ckeditor5-image/src/imageinsert.js

@@ -0,0 +1,140 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module image/imageinsert
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ImageInsertUI from './imageinsert/imageinsertui';
+import ImageInsertEditing from './imageinsert/imageinsertediting';
+import ImageUploadProgress from './imageupload/imageuploadprogress';
+
+// TODO FIX THE DESCR
+/**
+ * The image upload plugin.
+ *
+ * For a detailed overview, check the {@glink features/image-upload/image-upload image upload feature} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins to enable image uploading:
+ *
+ * * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing},
+ * * {@link module:image/imageupload/imageuploadui~ImageUploadUI},
+ * * {@link module:image/imageupload/imageuploadprogress~ImageUploadProgress}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class ImageInsert extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'ImageInsert';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	static get requires() {
+		return [ ImageInsertEditing, ImageInsertUI, ImageUploadProgress ];
+	}
+}
+
+/**
+ * Image upload configuration.
+ *
+ * @member {module:image/imageupload~ImageUploadConfig} module:image/image~ImageConfig#upload
+ */
+
+/**
+ * The configuration of the image upload feature. Used by the image upload feature in the `@ckeditor/ckeditor5-image` package.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ * 				image: {
+ * 					upload:  ... // Image upload feature options.
+ * 				}
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface module:image/imageupload~ImageUploadConfig
+ */
+
+/**
+ * The list of accepted image types.
+ *
+ * The accepted types of images can be customized to allow only certain types of images:
+ *
+ *		// Allow only JPEG and PNG images:
+ *		const imageUploadConfig = {
+ *			types: [ 'png', 'jpeg' ]
+ *		};
+ *
+ * The type string should match [one of the sub-types](https://www.iana.org/assignments/media-types/media-types.xhtml#image)
+ * of the image MIME type. E.g. for the `image/jpeg` MIME type, add `'jpeg'` to your image upload configuration.
+ *
+ * **Note:** This setting only restricts some image types to be selected and uploaded through the CKEditor UI and commands. Image type
+ * recognition and filtering should also be implemented on the server which accepts image uploads.
+ *
+ * @member {Array.<String>} module:image/imageupload~ImageUploadConfig#types
+ * @default [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff' ]
+ */
+
+/**
+ * Image upload panel view configuration.
+ *
+ * @protected
+ * @member {module:image/imageupload~ImageUploadPanelConfig} module:image/imageupload~ImageUploadConfig#panel
+ */
+
+/**
+ * The configuration of the image upload dropdown panel view. Used by the image upload feature in the `@ckeditor/ckeditor5-image` package.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ * 				image: {
+ * 					upload: {
+ * 						panel: ... // panel settings goes here
+ * 					}
+ * 				}
+ *			} )
+ *			.then( ... )
+ *			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @protected
+ * @interface module:image/imageupload~ImageUploadPanelConfig
+ */
+
+/**
+ * The list of {@link module:image/imageupload~ImageUpload} integrations.
+ *
+ * The option accepts string tokens.
+ * * for predefined integrations, we have two special strings: `insertImageViaUrl` and `openCKFinder`.
+ * The former adds **Insert image via URL** feature, while the latter adds built-in **CKFinder** integration.
+ * * for custom integrations, each string should be a name of the already registered component.
+ * If you have a plugin `PluginX` that registers `pluginXButton` component, then the integration token
+ * in that case should be `pluginXButton`.
+ *
+ *		// Add `insertImageViaUrl`, `openCKFinder` and custom `pluginXButton` integrations.
+ *		const imageUploadConfig = {
+ *			upload: {
+ *				panel: {
+ *					items: [
+ *						'insertImageViaUrl',
+ *						'openCKFinder',
+ *						'pluginXButton'
+ *					]
+ *				}
+ *			}
+ *		};
+ *
+ * @member {Array.<String>} module:image/imageupload~ImageUploadPanelConfig#items
+ * @default [ 'insertImageViaUrl' ]
+ */

+ 4 - 43
packages/ckeditor5-image/src/imageinsert/imageinsertcommand.js

@@ -2,15 +2,14 @@
  * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-
-import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
-import Command from '@ckeditor/ckeditor5-core/src/command';
-import { insertImage, isImageAllowed } from '../image/utils';
+import ImageUploadCommand from '@ckeditor/ckeditor5-image/src/imageupload/imageuploadcommand';
+import { isImageAllowed } from '../image/utils';
 
 /**
  * @module image/imageinsert/imageinsertcommand
  */
 
+// TODO?
 /**
  * The image upload command.
  *
@@ -39,7 +38,7 @@ import { insertImage, isImageAllowed } from '../image/utils';
  *
  * @extends module:core/command~Command
  */
-export default class ImageUploadCommand extends Command {
+export default class ImageInsertCommand extends ImageUploadCommand {
 	/**
 	 * @inheritDoc
 	 */
@@ -49,42 +48,4 @@ export default class ImageUploadCommand extends Command {
 
 		this.isEnabled = isImageAllowed( this.editor.model ) || isImage;
 	}
-
-	/**
-	 * Executes the command.
-	 *
-	 * @fires execute
-	 * @param {Object} options Options for the executed command.
-	 * @param {File|Array.<File>} options.file The image file or an array of image files to upload.
-	 */
-	execute( options ) {
-		const editor = this.editor;
-		const model = editor.model;
-
-		const fileRepository = editor.plugins.get( FileRepository );
-
-		model.change( writer => {
-			const filesToUpload = Array.isArray( options.file ) ? options.file : [ options.file ];
-
-			for ( const file of filesToUpload ) {
-				uploadImage( writer, model, fileRepository, file );
-			}
-		} );
-	}
-}
-
-// Handles uploading single file.
-//
-// @param {module:engine/model/writer~writer} writer
-// @param {module:engine/model/model~Model} model
-// @param {File} file
-function uploadImage( writer, model, fileRepository, file ) {
-	const loader = fileRepository.createLoader( file );
-
-	// Do not throw when upload adapter is not set. FileRepository will log an error anyway.
-	if ( !loader ) {
-		return;
-	}
-
-	insertImage( writer, model, { uploadId: loader.id } );
 }

+ 5 - 5
packages/ckeditor5-image/src/imageinsert/imageinsertediting.js

@@ -14,7 +14,7 @@ import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 import UpcastWriter from '@ckeditor/ckeditor5-engine/src/view/upcastwriter';
 import env from '@ckeditor/ckeditor5-utils/src/env';
 
-import ImageUploadCommand from '../../src/imageinsert/imageinsertcommand';
+import ImageInsertCommand from '../../src/imageinsert/imageinsertcommand';
 import { fetchLocalImage, isLocalImage } from '../../src/imageinsert/utils';
 import { createImageTypeRegExp } from './utils';
 import { getViewImgFromWidget } from '../image/utils';
@@ -24,7 +24,7 @@ import { getViewImgFromWidget } from '../image/utils';
  *
  * @extends module:core/plugin~Plugin
  */
-export default class ImageUploadEditing extends Plugin {
+export default class ImageInsertEditing extends Plugin {
 	/**
 	 * @inheritDoc
 	 */
@@ -33,7 +33,7 @@ export default class ImageUploadEditing extends Plugin {
 	}
 
 	static get pluginName() {
-		return 'ImageUploadEditing';
+		return 'ImageInsertEditing';
 	}
 
 	/**
@@ -66,8 +66,8 @@ export default class ImageUploadEditing extends Plugin {
 			allowAttributes: [ 'uploadId', 'uploadStatus' ]
 		} );
 
-		// Register imageUpload command.
-		editor.commands.add( 'imageUpload', new ImageUploadCommand( editor ) );
+		// Register imageInsert command.
+		editor.commands.add( 'imageUpload', new ImageInsertCommand( editor ) );
 
 		// Register upcast converter for uploadId.
 		conversion.for( 'upcast' )

+ 22 - 27
packages/ckeditor5-image/src/imageinsert/imageinsertui.js

@@ -4,11 +4,11 @@
  */
 
 /**
- * @module image/imageinsert/imageinsert/ui
+ * @module image/imageinsert/imageinsertui
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ImageUploadPanelView from './ui/imageinsertpanelview';
+import ImageInsertPanelView from './ui/imageinsertpanelview';
 
 import FileDialogButtonView from '@ckeditor/ckeditor5-upload/src/ui/filedialogbuttonview';
 import { createImageTypeRegExp, prepareIntegrations } from './utils';
@@ -26,12 +26,12 @@ import { isImage } from '../image/utils';
  *
  * @extends module:core/plugin~Plugin
  */
-export default class ImageUploadUI extends Plugin {
+export default class ImageInsertUI extends Plugin {
 	/**
 	 * @inheritDoc
 	 */
 	static get pluginName() {
-		return 'ImageUploadUI';
+		return 'ImageInsertUI';
 	}
 
 	/**
@@ -39,14 +39,9 @@ export default class ImageUploadUI extends Plugin {
 	 */
 	init() {
 		const editor = this.editor;
-		const isImageUploadPanelViewEnabled = !!editor.config.get( 'image.upload.panel.items' );
 
-		editor.ui.componentFactory.add( 'imageUpload', locale => {
-			if ( isImageUploadPanelViewEnabled ) {
-				return this._createDropdownView( locale );
-			} else {
-				return this._createFileDialogButtonView( locale );
-			}
+		editor.ui.componentFactory.add( 'imageInsert', locale => {
+			return this._createDropdownView( locale );
 		} );
 	}
 
@@ -54,17 +49,17 @@ export default class ImageUploadUI extends Plugin {
 	 * Sets up the dropdown view.
 	 *
 	 * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdownView.
-	 * @param {module:image/imageinsert/ui/imageinsertpanelview~ImageUploadPanelView} imageUploadView An imageUploadView.
-	 * @param {module:core/command~Command} command An imageUpload command
+	 * @param {module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView} imageInsertView An imageInsertView.
+	 * @param {module:core/command~Command} command An imageInsert command
 	 *
 	 * @private
 	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
 	 */
-	_setUpDropdown( dropdownView, imageUploadView, command ) {
+	_setUpDropdown( dropdownView, imageInsertView, command ) {
 		const editor = this.editor;
 		const t = editor.t;
-		const insertButtonView = imageUploadView.insertButtonView;
-		const insertImageViaUrlForm = imageUploadView.getIntegration( 'insertImageViaUrl' );
+		const insertButtonView = imageInsertView.insertButtonView;
+		const insertImageViaUrlForm = imageInsertView.getIntegration( 'insertImageViaUrl' );
 
 		dropdownView.bind( 'isEnabled' ).to( command );
 
@@ -72,21 +67,21 @@ export default class ImageUploadUI extends Plugin {
 			const selectedElement = editor.model.document.selection.getSelectedElement();
 
 			if ( dropdownView.isOpen ) {
-				imageUploadView.focus();
+				imageInsertView.focus();
 
 				if ( isImage( selectedElement ) ) {
-					imageUploadView.imageURLInputValue = selectedElement.getAttribute( 'src' );
+					imageInsertView.imageURLInputValue = selectedElement.getAttribute( 'src' );
 					insertButtonView.label = t( 'Update' );
 					insertImageViaUrlForm.label = t( 'Update image URL' );
 				} else {
-					imageUploadView.imageURLInputValue = '';
+					imageInsertView.imageURLInputValue = '';
 					insertButtonView.label = t( 'Insert' );
 					insertImageViaUrlForm.label = t( 'Insert image via URL' );
 				}
 			}
 		} );
 
-		imageUploadView.delegate( 'submit', 'cancel' ).to( dropdownView );
+		imageInsertView.delegate( 'submit', 'cancel' ).to( dropdownView );
 		this.delegate( 'cancel' ).to( dropdownView );
 
 		dropdownView.on( 'submit', () => {
@@ -103,12 +98,12 @@ export default class ImageUploadUI extends Plugin {
 
 			if ( isImage( selectedElement ) ) {
 				editor.model.change( writer => {
-					writer.setAttribute( 'src', imageUploadView.imageURLInputValue, selectedElement );
+					writer.setAttribute( 'src', imageInsertView.imageURLInputValue, selectedElement );
 					writer.removeAttribute( 'srcset', selectedElement );
 					writer.removeAttribute( 'sizes', selectedElement );
 				} );
 			} else {
-				editor.execute( 'imageInsert', { source: imageUploadView.imageURLInputValue } );
+				editor.execute( 'imageInsert', { source: imageInsertView.imageURLInputValue } );
 			}
 		}
 
@@ -130,18 +125,18 @@ export default class ImageUploadUI extends Plugin {
 	 */
 	_createDropdownView( locale ) {
 		const editor = this.editor;
-		const imageUploadView = new ImageUploadPanelView( locale, prepareIntegrations( editor ) );
+		const imageInsertView = new ImageInsertPanelView( locale, prepareIntegrations( editor ) );
 		const command = editor.commands.get( 'imageUpload' );
 
-		const dropdownView = imageUploadView.dropdownView;
+		const dropdownView = imageInsertView.dropdownView;
 		const panelView = dropdownView.panelView;
 		const splitButtonView = dropdownView.buttonView;
 
 		splitButtonView.actionView = this._createFileDialogButtonView( locale );
 
-		panelView.children.add( imageUploadView );
+		panelView.children.add( imageInsertView );
 
-		return this._setUpDropdown( dropdownView, imageUploadView, command );
+		return this._setUpDropdown( dropdownView, imageInsertView, command );
 	}
 
 	/**
@@ -166,7 +161,7 @@ export default class ImageUploadUI extends Plugin {
 		} );
 
 		fileDialogButtonView.buttonView.set( {
-			label: t( 'Insert image' ),
+			label: t( 'Upload image' ),
 			icon: imageIcon,
 			tooltip: true
 		} );

+ 5 - 5
packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.js

@@ -11,7 +11,7 @@ import View from '@ckeditor/ckeditor5-ui/src/view';
 
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
-import ImageUploadFormRowView from './imageinsertformrowview';
+import ImageInsertFormRowView from './imageinsertformrowview';
 import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
 
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
@@ -30,13 +30,13 @@ import '../../../theme/imageinsert.css';
 /**
  * The insert an image via URL view controller class.
  *
- * See {@link module:image/imageinsert/ui/imageinsertpanelview~ImageUploadPanelView}.
+ * See {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
  *
  * @extends module:ui/view~View
  */
-export default class ImageUploadPanelView extends View {
+export default class ImageInsertPanelView extends View {
 	/**
-	 * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsert/ui~ImageUploadUI}.
+	 * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsert/ui~ImageInsertUI}.
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance..
 	 * @param {Object} [integrations] Integrations object that contain
@@ -159,7 +159,7 @@ export default class ImageUploadPanelView extends View {
 
 			children: [
 				...this._integrations,
-				new ImageUploadFormRowView( locale, {
+				new ImageInsertFormRowView( locale, {
 					children: [
 						this.insertButtonView,
 						this.cancelButtonView

+ 1 - 1
packages/ckeditor5-image/src/imageinsert/utils.js

@@ -96,7 +96,7 @@ function getImageMimeType( blob, src ) {
  */
 export function prepareIntegrations( editor ) {
 	const panelItems = editor.config.get( 'image.upload.panel.items' );
-	const imageUploadUIPlugin = editor.plugins.get( 'ImageUploadUI' );
+	const imageUploadUIPlugin = editor.plugins.get( 'ImageInsertUI' );
 
 	const PREDEFINED_INTEGRATIONS = {
 		'insertImageViaUrl': createLabeledInputView( editor.locale )

+ 1 - 1
packages/ckeditor5-image/tests/manual/imageuploadviaurl.html

@@ -10,7 +10,7 @@
 	}
 </style>
 
-<div id="editor2">
+<div id="editor">
 	<h2>Image upload via URL with CKFinder integration</h2>
 	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla finibus consequat placerat. Vestibulum id tellus et mauris sagittis tincidunt quis id mauris. Curabitur consectetur lectus sit amet tellus mattis, non lobortis leo interdum.</p>
 </div>

packages/ckeditor5-image/tests/manual/imageuploadviaurl.md → packages/ckeditor5-image/tests/manual/imageinsertviaurl.md


+ 0 - 61
packages/ckeditor5-image/tests/manual/imageuploadviaurl.js

@@ -1,61 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/* globals window, document, console */
-
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
-import ImageUpload from '../../src/imageupload';
-import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
-
-import { UploadAdapterMock } from '@ckeditor/ckeditor5-upload/tests/_utils/mocks';
-
-ClassicEditor
-	.create( document.querySelector( '#editor2' ), {
-		plugins: [ ArticlePluginSet, ImageUpload, CKFinder ],
-		toolbar: [
-			'heading',
-			'|',
-			'bold',
-			'italic',
-			'link',
-			'bulletedList',
-			'numberedList',
-			'blockQuote',
-			'imageUpload',
-			'insertTable',
-			'mediaEmbed',
-			'undo',
-			'redo'
-		],
-		image: {
-			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
-			upload: {
-				panel: {
-					items: [
-						'insertImageViaUrl',
-						'openCKFinder'
-					]
-				}
-			}
-		},
-		ckfinder: {
-			// eslint-disable-next-line max-len
-			uploadUrl: 'https://ckeditor.com/apps/ckfinder/3.5.0/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
-		}
-	} )
-	.then( editor => {
-		window.editor = editor;
-
-		// Register fake adapter.
-		editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => {
-			const adapterMock = new UploadAdapterMock( loader );
-
-			return adapterMock;
-		};
-	} )
-	.catch( err => {
-		console.error( err.stack );
-	} );