瀏覽代碼

Add configuration options for CKFinder.

Maciej Gołaszewski 7 年之前
父節點
當前提交
cdffbbecce

+ 45 - 0
packages/ckeditor5-ckfinder/src/ckfinder.js

@@ -37,3 +37,48 @@ export default class CKFinder extends Plugin {
 		return [ CKFinderEditing, CKFinderUI ];
 	}
 }
+
+/**
+ * The configuration of the {@link module:ckfinder/ckfinder~CKFinder CKFinder feature}.
+ *
+ * Read more in {@link module:ckfinder/ckfinder~CKFinderConfig}.
+ *
+ * @member {module:ckfinder/ckfinder~CKFinderConfig} module:core/editor/editorconfig~EditorConfig#ckfinder
+ */
+
+/**
+ * The configuration of the {@link module:ckfinder/ckfinder~CKFinderUploadAdapter CKFinder upload adapter}.
+ *
+ *		ClassicEditor
+ *			.create( editorElement, {
+ *				ckfinder: {
+ *					options: {
+ *						resourceType: 'Images'
+ *					}
+ * 				}
+ *			} )
+ *			.then( ... )
+ 			.catch( ... );
+ *
+ * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
+ *
+ * @interface CKFinderConfig
+ */
+
+/**
+ * The configuration options to pass to the CKFinder instance.
+ *
+ * @member {Object} module:ckfinder/ckfinder~CKFinderConfig#options
+ */
+
+/**
+ * The type of the CKFinder opener method.
+ *
+ * Supported types are:
+ * * '"modal"' - opens a CKFinder modal
+ * * '"popup"' - opens a CKFinder popup window
+ *
+ * Defaults to "'modal'".
+ *
+ * @member {String} module:ckfinder/ckfinder~CKFinderConfig#openerMethod
+ */

+ 39 - 36
packages/ckeditor5-ckfinder/src/ckfindercommand.js

@@ -11,6 +11,7 @@
 
 import Command from '@ckeditor/ckeditor5-core/src/command';
 import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
+import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
 
@@ -35,47 +36,49 @@ export default class CKFinderCommand extends Command {
 	 */
 	execute() {
 		const editor = this.editor;
-		// Execute command.
-		// TODO: options
-		// TODO: modal vs popup - config option
-		window.CKFinder.modal( {
-			width: 800,
-			height: 500,
-			// required:
-			chooseFiles: true,
-			// connectorPath: 'https://cksource.com/weuy2g4ryt278ywiue/core/connector/php/connector.php',
-			connectorPath: '/build/core/connector/php/connector.php',
-			onInit: finder => {
-				finder.on( 'files:choose', evt => {
-					for ( const file of evt.data.files.toArray() ) {
-
-						// Use CKFinder file isImage() to insert only image-type files.
-						if ( file.isImage() ) {
-							const url = file.get( 'url' );
-
-							insertImage( editor.model, url ? url : finder.request( 'file:getProxyUrl', { file } ) );
-						}
-					}
-				} );
 
-				finder.on( 'file:choose:resizedImage', evt => {
-					const resizedUrl = evt.data.resizedUrl;
+		const method = this.editor.config.get( 'ckfinder.openerMethod' ) || 'modal';
+
+		if ( method != 'popup' && method != 'modal' ) {
+			throw new CKEditorError( 'ckfinder-unknown-openerMethod: The openerMethod config option must by "popup" or "modal".' );
+		}
+
+		const config = this.editor.config.get( 'ckfinder.config' ) || {};
+
+		config.chooseFiles = true;
 
-					if ( !resizedUrl ) {
-						const notification = editor.plugins.get( Notification );
-						const t = editor.locale.t;
+		config.onInit = finder => {
+			finder.on( 'files:choose', evt => {
+				for ( const file of evt.data.files.toArray() ) {
 
-						notification.showWarning( t( 'Could not obtain resized image URL. Try different image or folder.' ), {
-							title: t( 'Selecting resized image failed' ),
-							namespace: 'ckfinder'
-						} );
+					// Use CKFinder file isImage() to insert only image-type files.
+					if ( file.isImage() ) {
+						const url = file.get( 'url' );
+
+						insertImage( editor.model, url ? url : finder.request( 'file:getProxyUrl', { file } ) );
 					}
+				}
+			} );
+
+			finder.on( 'file:choose:resizedImage', evt => {
+				const resizedUrl = evt.data.resizedUrl;
+
+				if ( !resizedUrl ) {
+					const notification = editor.plugins.get( Notification );
+					const t = editor.locale.t;
+
+					notification.showWarning( t( 'Could not obtain resized image URL. Try different image or folder.' ), {
+						title: t( 'Selecting resized image failed' ),
+						namespace: 'ckfinder'
+					} );
+				}
+
+				// show warning - no resizedUrl returned...
+				insertImage( editor.model, resizedUrl );
+			} );
+		};
 
-					// show warning - no resizedUrl returned...
-					insertImage( editor.model, resizedUrl );
-				} );
-			}
-		} );
+		window.CKFinder[ method ]( config );
 	}
 }
 

+ 45 - 3
packages/ckeditor5-ckfinder/tests/ckfindercommand.js

@@ -8,7 +8,7 @@
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 import { getData as getModelData, setData as setModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-
+import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ImageEditing from '@ckeditor/ckeditor5-image/src/image/imageediting';
 import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
@@ -71,18 +71,46 @@ describe( 'CKFinderCommand', () => {
 			window.CKFinder = {
 				modal: config => {
 					config.onInit( finderMock );
+				},
+				popup: config => {
+					config.onInit( finderMock );
 				}
 			};
 		} );
 
 		it( 'should register proper listeners on CKFinder instance', () => {
-
 			command.execute();
 
 			expect( finderMock ).to.have.property( 'files:choose' );
 			expect( finderMock ).to.have.property( 'file:choose:resizedImage' );
 		} );
 
+		it( 'should use "CKFinder.modal" as default CKFinder opener method', () => {
+			const spy = sinon.spy( window.CKFinder, 'modal' );
+
+			command.execute();
+
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'should use "CKFinder.modal" as default CKFinder opener method', () => {
+			const spy = sinon.spy( window.CKFinder, 'popup' );
+
+			editor.config.set( 'ckfinder.openerMethod', 'popup' );
+
+			command.execute();
+
+			sinon.assert.calledOnce( spy );
+		} );
+
+		it( 'should throw if unsupported CKFinder opener method was set', () => {
+			editor.config.set( 'ckfinder.openerMethod', 'foobar' );
+
+			expect( () => {
+				command.execute();
+			} ).to.throw( CKEditorError, /ckfinder-unknown-openerMethod/ );
+		} );
+
 		it( 'should insert single chosen image as image widget', () => {
 			const url = 'foo/bar.jpg';
 
@@ -94,6 +122,21 @@ describe( 'CKFinderCommand', () => {
 				.to.equal( `[<image src="${ url }"></image>]<paragraph>foo</paragraph>` );
 		} );
 
+		it( 'should pass CKFinder config options', () => {
+			const spy = sinon.spy( window.CKFinder, 'modal' );
+
+			const connectorPath = 'foo/bar.php';
+			editor.config.set( 'ckfinder.config', { connectorPath } );
+
+			command.execute();
+
+			const openerMethodOptions = spy.args[ 0 ][ 0 ];
+
+			expect( openerMethodOptions ).to.have.property( 'chooseFiles', true );
+			expect( openerMethodOptions ).to.have.property( 'onInit' );
+			expect( openerMethodOptions ).to.have.property( 'connectorPath', connectorPath );
+		} );
+
 		it( 'should insert multiple chosen images as image widget', () => {
 			const url1 = 'foo/bar1.jpg';
 			const url2 = 'foo/bar2.jpg';
@@ -123,7 +166,6 @@ describe( 'CKFinderCommand', () => {
 		} );
 
 		it( 'should use CKFinder Proxy for privately hosted files', () => {
-
 			const proxyUrl = 'bar/foo.jpg';
 
 			finderMock.request = () => proxyUrl;

+ 3 - 0
packages/ckeditor5-ckfinder/tests/manual/ckfinder.js

@@ -19,6 +19,9 @@ ClassicEditor
 		toolbar: [ 'heading', '|', 'undo', 'redo', 'ckfinder' ],
 		image: {
 			toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+		},
+		ckfinder: {
+			openerMethod: 'popup'
 		}
 	} )
 	.then( editor => {