瀏覽代碼

Add manual test.

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

+ 25 - 0
packages/ckeditor5-image/tests/manual/imageuploadviaurl.html

@@ -0,0 +1,25 @@
+<style>
+	code {
+		word-break: break-all;
+	}
+</style>
+
+<div id="editor">
+	<h2>Image upload via URL</h2>
+	<figure class="image">
+		<img src="sample.jpg" alt="" />
+	</figure>
+	<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>
+
+<div id="button-container"></div>
+
+<style>
+	#button-container div {
+		margin-top: 10px;
+	}
+
+	#button-container button {
+		margin-right: 10px;
+	}
+</style>

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

@@ -0,0 +1,104 @@
+/**
+ * @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 { UploadAdapterMock } from '@ckeditor/ckeditor5-upload/tests/_utils/mocks';
+
+const buttonContainer = document.getElementById( 'button-container' );
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ ArticlePluginSet, ImageUpload ],
+		toolbar: [
+			'heading',
+			'|',
+			'bold',
+			'italic',
+			'link',
+			'bulletedList',
+			'numberedList',
+			'blockQuote',
+			'imageUpload',
+			'insertTable',
+			'mediaEmbed',
+			'undo',
+			'redo'
+		],
+		image: {
+			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+
+		// Register fake adapter.
+		editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => {
+			const adapterMock = new UploadAdapterMock( loader );
+			createProgressButton( loader, adapterMock );
+
+			return adapterMock;
+		};
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+function createProgressButton( loader, adapterMock ) {
+	loader.file.then( file => {
+		const fileName = file.name;
+		const container = document.createElement( 'div' );
+		const progressInfo = document.createElement( 'span' );
+		progressInfo.innerHTML = `File: ${ fileName }. Progress: 0%.`;
+		const progressButton = document.createElement( 'button' );
+		const errorButton = document.createElement( 'button' );
+		const abortButton = document.createElement( 'button' );
+		progressButton.innerHTML = 'Upload progress';
+		errorButton.innerHTML = 'Simulate error';
+		abortButton.innerHTML = 'Simulate aborting';
+
+		container.appendChild( progressButton );
+		container.appendChild( errorButton );
+		container.appendChild( abortButton );
+		container.appendChild( progressInfo );
+
+		buttonContainer.appendChild( container );
+
+		let progress = 0;
+		const total = 500;
+		progressButton.addEventListener( 'click', () => {
+			progress += 100;
+			adapterMock.mockProgress( progress, total );
+
+			if ( progress == total ) {
+				disableButtons();
+				adapterMock.mockSuccess( { default: './sample.jpg' } );
+			}
+
+			progressInfo.innerHTML = `File: ${ fileName }. Progress: ${ loader.uploadedPercent }%.`;
+		} );
+
+		errorButton.addEventListener( 'click', () => {
+			adapterMock.mockError( 'Upload error!' );
+			disableButtons();
+		} );
+
+		abortButton.addEventListener( 'click', () => {
+			loader.abort();
+			disableButtons();
+		} );
+
+		function disableButtons() {
+			progressButton.setAttribute( 'disabled', 'true' );
+			errorButton.setAttribute( 'disabled', 'true' );
+			abortButton.setAttribute( 'disabled', 'true' );
+		}
+	} );
+}
+

+ 12 - 0
packages/ckeditor5-image/tests/manual/imageuploadviaurl.md

@@ -0,0 +1,12 @@
+## Image upload via URL
+
+1. Click on the arrow button in `imageUpload` plugin to reveal the image upload panel.
+1. Paste the URL to the input (eg: `https://ckeditor.com/docs/ckeditor5/latest/assets/img/malta.jpg`).
+1. Click `Insert` button.
+
+## Image replace via URL
+
+1. Click on the image in the editor.
+1. Click on the arrow button in `imageUpload` plugin to reveal the image upload panel.
+1. Edit the value of the input.
+1. Click `Update` button.