瀏覽代碼

Update manual test.

panr 5 年之前
父節點
當前提交
2f80172ed3

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

@@ -1,9 +1,16 @@
+<head>
+	<meta http-equiv="Content-Security-Policy" content="script-src 'self' https://ckeditor.com 'unsafe-inline' 'unsafe-eval'">
+</head>
+
+<script src="https://ckeditor.com/apps/ckfinder/3.5.0/ckfinder.js"></script>
+
 <style>
 	code {
 		word-break: break-all;
 	}
 </style>
 
+<h1>Editor 1</h1>
 <div id="editor">
 	<h2>Image upload via URL</h2>
 	<figure class="image">
@@ -23,3 +30,21 @@
 		margin-right: 10px;
 	}
 </style>
+
+<h1>Editor 2</h1>
+<div id="editor2">
+	<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>
+
+<div id="button-container"></div>
+
+<style>
+	#button-container div {
+		margin-top: 10px;
+	}
+
+	#button-container button {
+		margin-right: 10px;
+	}
+</style>

+ 50 - 1
packages/ckeditor5-image/tests/manual/imageuploadviaurl.js

@@ -8,6 +8,7 @@
 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';
 
@@ -50,6 +51,55 @@ ClassicEditor
 		console.error( err.stack );
 	} );
 
+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 );
+			createProgressButton( loader, adapterMock );
+
+			return adapterMock;
+		};
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
 function createProgressButton( loader, adapterMock ) {
 	loader.file.then( file => {
 		const fileName = file.name;
@@ -101,4 +151,3 @@ function createProgressButton( loader, adapterMock ) {
 		}
 	} );
 }
-

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

@@ -10,3 +10,9 @@
 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.
+
+## Image upload via integrations
+
+1. In the **Editor 2** click on the arrow button in `imageUpload` plugin to reveal the image upload panel.
+1. Click on the **CKFinder** button.
+1. Choose image and confirm.