8
0
Maciej Gołaszewski 7 лет назад
Родитель
Сommit
9d81b2c2dd

+ 1 - 0
packages/ckeditor5-ckfinder/docs/_snippets/features/build-ckfinder-source.html

@@ -0,0 +1 @@
+<script src="https://cksource.com/weuy2g4ryt278ywiue/ckfinder.js"></script>

+ 13 - 0
packages/ckeditor5-ckfinder/docs/_snippets/features/build-ckfinder-source.js

@@ -0,0 +1,13 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
+
+ClassicEditor.builtinPlugins.push( CKFinder );
+
+window.ClassicEditor = ClassicEditor;

+ 3 - 0
packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-options.html

@@ -0,0 +1,3 @@
+<div id="snippet-ckfinder-options">
+	Use toolbar button to insert image or link to a file.
+</div>

+ 33 - 0
packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-options.js

@@ -0,0 +1,33 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-ckfinder-options' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'ckfinder', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+			],
+			viewportTopOffset: 100
+		},
+		ckfinder: {
+			openerMethod: 'popup',
+			options: {
+				resourceType: 'Images'
+			},
+			// eslint-disable-next-line max-len
+			uploadUrl: 'https://cksource.com/weuy2g4ryt278ywiue/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 3 - 0
packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder.html

@@ -0,0 +1,3 @@
+<div id="snippet-ckfinder">
+	Use toolbar button to insert image or link to a file.
+</div>

+ 29 - 0
packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder.js

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-ckfinder' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			items: [
+				'ckfinder', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
+			],
+			viewportTopOffset: 100
+		},
+		ckfinder: {
+			// eslint-disable-next-line max-len
+			uploadUrl: 'https://cksource.com/weuy2g4ryt278ywiue/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json'
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 5 - 5
packages/ckeditor5-ckfinder/docs/api/ckfinder.md

@@ -6,15 +6,15 @@ category: api-reference
 
 [![npm version](https://badge.fury.io/js/%40ckeditor%2Fckeditor5-ckfinder.svg)](https://www.npmjs.com/package/@ckeditor/ckeditor5-ckfinder)
 
-This package implements the {@link features/image#image-upload CKFinder} feature for CKEditor 5.
+This package implements the {@link features/ckfinder CKFinder integration} feature for CKEditor 5. It lets you easily insert images & links to files. It integrates automatically with [CKFinder](https://ckeditor.com/ckfinder/).
 
-CKFinder lets you easily insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. It integrates automatically with [CKFinder](https://ckeditor.com/ckfinder/).
+## Demo
 
-## Documentation
+Check out the {@link features/ckfinder#demo demo in the CKFinder feature} guide.
 
-See the {@link features/image-upload Image upload} guide.
+## Documentation
 
-You can also check the {@link module:ckfinder/ckfinder~CKFinder} plugin documentation.
+See the {@link features/ckfinder CKFinder feature} guide and the {@link module:ckfinder/ckfinder~CKFinder} plugin documentation.
 
 ## Installation
 

+ 97 - 0
packages/ckeditor5-ckfinder/docs/features/ckfinder.md

@@ -0,0 +1,97 @@
+---
+category: features
+---
+
+{@snippet features/build-ckfinder-source}
+
+# CKFinder
+
+The {@link module:ckfinder/ckfinder~CKFinder} feature brings support 
+
+CKFinder lets you easily insert images and links to files into content by automatically integrating with [CKFinder](https://ckeditor.com/ckfinder/).
+
+## Demo
+
+You can use the "Insert image or file" button in the toolbar to insert image or a link to any other file. You can also paste the image into the editor content and it will be automatically uploaded to [CKFinder](https://ckeditor.com/ckeditor-4/ckfinder/)'s backend for CKEditor 5.
+
+{@snippet features/ckfinder}
+
+## Installation
+
+<info-box info>
+	This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom editor.
+</info-box>
+
+To add this feature to your editor, install the [`@ckeditor/ckeditor5-ckfinder`](https://www.npmjs.com/package/@ckeditor/ckeditor5-ckfinder) package:
+
+```bash
+npm install --save @ckeditor/ckeditor5-ckfinder
+```
+
+Then add `CKFinder` to your plugin list and {@link module:ckfinder/ckfinder~CKFinderConfig configure} the feature (if needed):
+
+```js
+import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ CKFinder, ... ],
+		toolbar: [ 'ckfinder', ... ]
+		ckfinder: {
+			// configuration...
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+## CKFinder configuration
+
+This feature integrates with [CKFinder](https://ckeditor.com/ckfinder/) with no additional configuration required. However it is possible to configure behavior of CKFinder by passing {@link module:ckfinder/ckfinder~CKFinderConfig#options configuration options}. Check [CKFinder documentation](https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config) for complete list of options. This feature will automatically set `chooseFiles=true` to enable file choosing behavior in CKFinder.
+
+<info-box>
+To enable uploads of pasted images configure the {@link module:adapter-ckfinder/uploadadapter~CKFinderAdapterConfig#uploadUrl}.
+</info-box> 
+
+Below code will instruct CKFinder to open only one resource type: 
+
+```js
+import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ CKFinder, ... ],
+		toolbar: [ 'ckfinder', ... ]
+		ckfinder: {
+			openerMethod: 'popup',
+			options: {
+				resourceType: 'Images'
+			}
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+``` 
+
+{@snippet features/ckfinder-options}
+
+<info-box>
+The CKFinder featuer will also pass the editor language. This behavior can be changed by setting `ckfinder.options.language` configuration option.
+</info-box>
+
+## Common API
+
+The {@link module:ckfinder/ckfinder~CKFinder} plugin registers:
+
+* the `'ckfinder'` UI button component,
+* the `'ckfinder'` command implemented by {@link module:ckfinder/ckfindercommand~CKFinderCommand}.
+
+	You can open a CKFinder by executing the following code:
+
+	```js
+	editor.execute( 'ckfinder' );
+	```
+
+## Contribute
+
+The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-ckfinder.

+ 3 - 2
packages/ckeditor5-ckfinder/src/ckfinder.js

@@ -48,7 +48,7 @@ export default class CKFinder extends Plugin {
  */
 
 /**
- * The configuration of the {@link module:ckfinder/ckfinder~CKFinderUploadAdapter CKFinder upload adapter}.
+ * The configuration of the {@link module:ckfinder/ckfinder~CKFinder CKFinder feature}.
  *
  *		ClassicEditor
  *			.create( editorElement, {
@@ -67,7 +67,8 @@ export default class CKFinder extends Plugin {
  */
 
 /**
- * The configuration options to pass to the CKFinder instance.
+ * The configuration options to pass to the CKFinder instance. Complete list of configuration options available
+ * on [CKFinder documentation website](https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config).
  *
  * @member {Object} module:ckfinder/ckfinder~CKFinderConfig#options
  */