8
0
Quellcode durchsuchen

Initial CKFinder feature implementation.

Maciej Gołaszewski vor 7 Jahren
Ursprung
Commit
9bbf72d40b

+ 3 - 1
packages/ckeditor5-ckfinder/package.json

@@ -10,7 +10,9 @@
     "ckeditor5-plugin"
   ],
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^11.0.1"
+    "@ckeditor/ckeditor5-core": "^11.0.1",
+    "@ckeditor/ckeditor5-ui": "^11.1.0",
+    "@ckeditor/ckeditor5-widget": "^10.3.0"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-editor-classic": "^11.0.1",

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

@@ -0,0 +1,38 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ckfinder/ckfinder
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+
+import CKFinderUI from './ckfinderui';
+import CKFinderEditing from './ckfinderediting';
+
+/**
+ * The CKFinder feature.
+ *
+ *
+ * This is a "glue" plugin which enables:
+ *
+ * * {@link module:ckfinder/ckfinder~CKFinder},
+ * * {@link module:ckfinder/ckfinderediting~CKFinderEditing},
+ * * {@link module:ckfinder/ckfinderui~CKFinderUI}.
+ *
+ * @extends module:core/plugin~Plugin
+ */
+export default class CKFinder extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	static get pluginName() {
+		return 'CKFinder';
+	}
+
+	static get requires() {
+		return [ CKFinderEditing, CKFinderUI ];
+	}
+}

+ 74 - 0
packages/ckeditor5-ckfinder/src/ckfindercommand.js

@@ -0,0 +1,74 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* global window */
+
+/**
+ * @module ckfinder/ckfinder
+ */
+
+import Command from '@ckeditor/ckeditor5-core/src/command';
+
+import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
+
+/**
+ * The CKFinder command.
+ *
+ * @extends module:core/command~Command
+ */
+export default class CKFinderCommand extends Command {
+	refresh() {
+		this.isEnabled = true;
+	}
+
+	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',
+			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' );
+
+							if ( !url ) {
+								finder.request( 'file:getUrl', { file } ).then( url => insertImage( editor.model, url ) );
+							} else {
+								insertImage( editor.model, url );
+							}
+						}
+					}
+				} );
+
+				finder.on( 'file:choose:resizedImage', evt => {
+					insertImage( editor.model, evt.data.resizedUrl );
+				} );
+			}
+		} );
+	}
+}
+
+function insertImage( model, url ) {
+	model.change( writer => {
+		const imageElement = writer.createElement( 'image', { src: url } );
+
+		const insertAtSelection = findOptimalInsertionPosition( model.document.selection, model );
+
+		model.insertContent( imageElement, insertAtSelection );
+
+		// Inserting an image might've failed due to schema regulations.
+		if ( imageElement.parent ) {
+			writer.setSelection( imageElement, 'on' );
+		}
+	} );
+}

+ 23 - 0
packages/ckeditor5-ckfinder/src/ckfinderediting.js

@@ -0,0 +1,23 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ckfinder/ckfinderediting
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import CKFinderCommand from './ckfindercommand';
+
+export default class CKFinderEditing extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		// Register CKFinder command.
+		editor.commands.add( 'ckfinder', new CKFinderCommand( editor ) );
+	}
+}

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

@@ -0,0 +1,45 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @module ckfinder/ckfinderui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
+
+import ckfinderIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';
+
+export default class CKFinderUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const componentFactory = editor.ui.componentFactory;
+		const t = editor.t;
+
+		componentFactory.add( 'ckfinder', locale => {
+			const command = editor.commands.get( 'ckfinder' );
+
+			const view = new ButtonView( locale );
+
+			view.set( {
+				label: t( 'CKFinder' ),
+				icon: ckfinderIcon,
+				tooltip: true
+			} );
+
+			view.bind( 'isEnabled' ).to( command );
+
+			view.on( 'execute', () => {
+				editor.execute( 'ckfinder' );
+				editor.editing.view.focus();
+			} );
+
+			return view;
+		} );
+	}
+}