Ver código fonte

Create ImageInsert plugin (step3).

panr 5 anos atrás
pai
commit
f37caf8d85

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

@@ -40,7 +40,7 @@ export default class ImageInsertUI extends Plugin {
 	init() {
 		const editor = this.editor;
 
-		editor.ui.componentFactory.add( 'imageInsert', locale => {
+		editor.ui.componentFactory.add( 'imageUpload', locale => {
 			return this._createDropdownView( locale );
 		} );
 	}

+ 11 - 180
packages/ckeditor5-image/tests/imageinsert/imageinsertui.js

@@ -12,7 +12,7 @@ import Image from '../../src/image';
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 import FileDialogButtonView from '@ckeditor/ckeditor5-upload/src/ui/filedialogbuttonview';
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
-import ImageUploadUI from '../../src/imageinsert/imageinsertui';
+import ImageInsertUI from '../../src/imageinsert/imageinsertui';
 import ImageUploadEditing from '../../src/imageinsert/imageinsertediting';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
@@ -26,7 +26,7 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import { createNativeFileMock, UploadAdapterMock } from '@ckeditor/ckeditor5-upload/tests/_utils/mocks';
 import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
-describe( 'ImageUploadUI', () => {
+describe( 'ImageInsertUI', () => {
 	let editor, model, editorElement, fileRepository;
 
 	class UploadAdapterPluginMock extends Plugin {
@@ -38,175 +38,6 @@ describe( 'ImageUploadUI', () => {
 		}
 	}
 
-	describe( 'file dialog button', () => {
-		beforeEach( () => {
-			editorElement = document.createElement( 'div' );
-			document.body.appendChild( editorElement );
-
-			return ClassicEditor
-				.create( editorElement, {
-					plugins: [ Paragraph, Image, ImageUploadEditing, ImageUploadUI, FileRepository, UploadAdapterPluginMock, Clipboard ]
-				} )
-				.then( newEditor => {
-					editor = newEditor;
-					model = editor.model;
-
-					// Hide all notifications (prevent alert() calls).
-					const notification = editor.plugins.get( Notification );
-					notification.on( 'show', evt => evt.stop() );
-				} );
-		} );
-
-		afterEach( () => {
-			editorElement.remove();
-
-			return editor.destroy();
-		} );
-		it( 'should register imageUpload file dialog button', () => {
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-
-			expect( button ).to.be.instanceOf( FileDialogButtonView );
-		} );
-
-		it( 'should set proper accepted mime-types for imageUpload button as defined in configuration', () => {
-			editor.config.set( 'image.upload.types', [ 'svg+xml', 'jpeg', 'vnd.microsoft.icon', 'x-xbitmap' ] );
-
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-
-			expect( button.acceptedType ).to.equal( 'image/svg+xml,image/jpeg,image/vnd.microsoft.icon,image/x-xbitmap' );
-		} );
-
-		it( 'should be disabled while ImageUploadCommand is disabled', () => {
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const command = editor.commands.get( 'imageUpload' );
-
-			command.isEnabled = true;
-
-			expect( button.buttonView.isEnabled ).to.true;
-
-			command.isEnabled = false;
-
-			expect( button.buttonView.isEnabled ).to.false;
-		} );
-
-		// ckeditor5-upload/#77
-		it( 'should be properly bound with ImageUploadCommand', () => {
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const command = editor.commands.get( 'imageUpload' );
-			const spy = sinon.spy();
-
-			button.render();
-
-			button.buttonView.on( 'execute', spy );
-
-			command.isEnabled = false;
-
-			button.buttonView.element.dispatchEvent( new Event( 'click' ) );
-
-			sinon.assert.notCalled( spy );
-		} );
-
-		it( 'should execute imageUpload command', () => {
-			const executeStub = sinon.stub( editor, 'execute' );
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const files = [ createNativeFileMock() ];
-
-			button.fire( 'done', files );
-			sinon.assert.calledOnce( executeStub );
-			expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
-			expect( executeStub.firstCall.args[ 1 ].file ).to.deep.equal( files );
-		} );
-
-		it( 'should execute imageUpload command with multiple files', () => {
-			const executeStub = sinon.stub( editor, 'execute' );
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const files = [ createNativeFileMock(), createNativeFileMock(), createNativeFileMock() ];
-
-			button.fire( 'done', files );
-			sinon.assert.calledOnce( executeStub );
-			expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
-			expect( executeStub.firstCall.args[ 1 ].file ).to.deep.equal( files );
-		} );
-
-		it( 'should optimize the insertion position', () => {
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const files = [ createNativeFileMock() ];
-
-			setModelData( model, '<paragraph>f[]oo</paragraph>' );
-
-			button.fire( 'done', files );
-
-			const id = fileRepository.getLoader( files[ 0 ] ).id;
-
-			expect( getModelData( model ) ).to.equal(
-				`[<image uploadId="${ id }" uploadStatus="reading"></image>]` +
-			'<paragraph>foo</paragraph>'
-			);
-		} );
-
-		it( 'should correctly insert multiple files', () => {
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const files = [ createNativeFileMock(), createNativeFileMock() ];
-
-			setModelData( model, '<paragraph>foo[]</paragraph><paragraph>bar</paragraph>' );
-
-			button.fire( 'done', files );
-
-			const id1 = fileRepository.getLoader( files[ 0 ] ).id;
-			const id2 = fileRepository.getLoader( files[ 1 ] ).id;
-
-			expect( getModelData( model ) ).to.equal(
-				'<paragraph>foo</paragraph>' +
-			`<image uploadId="${ id1 }" uploadStatus="reading"></image>` +
-			`[<image uploadId="${ id2 }" uploadStatus="reading"></image>]` +
-			'<paragraph>bar</paragraph>'
-			);
-		} );
-
-		it( 'should not execute imageUpload if the file is not an image', () => {
-			const executeStub = sinon.stub( editor, 'execute' );
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const file = {
-				type: 'media/mp3',
-				size: 1024
-			};
-
-			button.fire( 'done', [ file ] );
-			sinon.assert.notCalled( executeStub );
-		} );
-
-		it( 'should work even if the FileList does not support iterators', () => {
-			const executeStub = sinon.stub( editor, 'execute' );
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const files = {
-				0: createNativeFileMock(),
-				length: 1
-			};
-
-			button.fire( 'done', files );
-			sinon.assert.calledOnce( executeStub );
-			expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
-			expect( executeStub.firstCall.args[ 1 ].file ).to.deep.equal( [ files[ 0 ] ] );
-		} );
-
-		it( 'should add the new image after the selected one, without replacing the selected image', () => {
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const files = [ createNativeFileMock() ];
-
-			setModelData( model, '[<image src="/assets/sample.png"></image>]<paragraph>bar</paragraph>' );
-
-			button.fire( 'done', files );
-
-			const id1 = fileRepository.getLoader( files[ 0 ] ).id;
-
-			expect( getModelData( model ) ).to.equal(
-				'<image src="/assets/sample.png"></image>' +
-				`[<image uploadId="${ id1 }" uploadStatus="reading"></image>]` +
-				'<paragraph>bar</paragraph>'
-			);
-		} );
-	} );
-
 	describe( 'dropdown', () => {
 		beforeEach( () => {
 			editorElement = document.createElement( 'div' );
@@ -214,7 +45,7 @@ describe( 'ImageUploadUI', () => {
 
 			return ClassicEditor
 				.create( editorElement, {
-					plugins: [ Paragraph, Image, ImageUploadEditing, ImageUploadUI, FileRepository, UploadAdapterPluginMock, Clipboard ],
+					plugins: [ Paragraph, Image, ImageUploadEditing, ImageInsertUI, FileRepository, UploadAdapterPluginMock, Clipboard ],
 					image: {
 						upload: {
 							panel: {
@@ -249,7 +80,7 @@ describe( 'ImageUploadUI', () => {
 		it( 'should set proper accepted mime-types for imageUpload button as defined in configuration', () => {
 			editor.config.set( 'image.upload.types', [ 'svg+xml', 'jpeg', 'vnd.microsoft.icon', 'x-xbitmap' ] );
 
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
+			const plugin = editor.plugins.get( 'ImageInsertUI' );
 			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
 
 			expect( fileDialogButton.acceptedType ).to.equal( 'image/svg+xml,image/jpeg,image/vnd.microsoft.icon,image/x-xbitmap' );
@@ -287,7 +118,7 @@ describe( 'ImageUploadUI', () => {
 
 		it( 'should execute imageUpload command', () => {
 			const executeStub = sinon.stub( editor, 'execute' );
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
+			const plugin = editor.plugins.get( 'ImageInsertUI' );
 			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
 			const files = [ createNativeFileMock() ];
 
@@ -299,7 +130,7 @@ describe( 'ImageUploadUI', () => {
 
 		it( 'should execute imageUpload command with multiple files', () => {
 			const executeStub = sinon.stub( editor, 'execute' );
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
+			const plugin = editor.plugins.get( 'ImageInsertUI' );
 			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
 			const files = [ createNativeFileMock(), createNativeFileMock(), createNativeFileMock() ];
 
@@ -310,7 +141,7 @@ describe( 'ImageUploadUI', () => {
 		} );
 
 		it( 'should optimize the insertion position', () => {
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
+			const plugin = editor.plugins.get( 'ImageInsertUI' );
 			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
 			const files = [ createNativeFileMock() ];
 
@@ -327,7 +158,7 @@ describe( 'ImageUploadUI', () => {
 		} );
 
 		it( 'should correctly insert multiple files', () => {
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
+			const plugin = editor.plugins.get( 'ImageInsertUI' );
 			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
 			const files = [ createNativeFileMock(), createNativeFileMock() ];
 
@@ -348,7 +179,7 @@ describe( 'ImageUploadUI', () => {
 
 		it( 'should not execute imageUpload if the file is not an image', () => {
 			const executeStub = sinon.stub( editor, 'execute' );
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
+			const plugin = editor.plugins.get( 'ImageInsertUI' );
 			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
 			const file = {
 				type: 'media/mp3',
@@ -361,7 +192,7 @@ describe( 'ImageUploadUI', () => {
 
 		it( 'should work even if the FileList does not support iterators', () => {
 			const executeStub = sinon.stub( editor, 'execute' );
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
+			const plugin = editor.plugins.get( 'ImageInsertUI' );
 			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
 			const files = {
 				0: createNativeFileMock(),
@@ -580,7 +411,7 @@ describe( 'ImageUploadUI', () => {
 						Paragraph,
 						Image,
 						ImageUploadEditing,
-						ImageUploadUI,
+						ImageInsertUI,
 						FileRepository,
 						UploadAdapterPluginMock,
 						Clipboard

+ 53 - 0
packages/ckeditor5-image/tests/manual/imageinsertviaurl.js

@@ -0,0 +1,53 @@
+/**
+ * @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 ImageInsert from '../../src/imageinsert';
+import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet, ImageUpload, ImageInsert, 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;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );