8
0
Просмотр исходного кода

Docs: Fixed working, spelling in the CKFinder guide. Extended the guide.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
ecb6a481db
1 измененных файлов с 51 добавлено и 17 удалено
  1. 51 17
      packages/ckeditor5-ckfinder/docs/features/ckfinder.md

+ 51 - 17
packages/ckeditor5-ckfinder/docs/features/ckfinder.md

@@ -4,13 +4,13 @@ category: features
 
 {@snippet features/build-ckfinder-source}
 
-# CKFinder
+# CKFinder integration
 
-The {@link module:ckfinder/ckfinder~CKFinder} feature lets you easily insert images and links to files into content by automatically integrating with [CKFinder](https://ckeditor.com/ckfinder/).
+This {@link module:ckfinder/ckfinder~CKFinder feature} allows you to easily insert images as well as links to files into the editor content. It is a bridge between the CKEditor 5 WYSIWYG editor and the [CKFinder](https://ckeditor.com/ckfinder) file manager and uploader.
 
 ## 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.
+You can use the "Insert image or file" button in the toolbar to insert an image or a link to any other file. You can also paste the image directly into the editor content and it will be automatically [uploaded](#configuring-image-upload) to the server.
 
 {@snippet features/ckfinder}
 
@@ -26,7 +26,7 @@ To add this feature to your editor, install the [`@ckeditor/ckeditor5-ckfinder`]
 npm install --save @ckeditor/ckeditor5-ckfinder
 ```
 
-Then add `CKFinder` to your plugin list and {@link module:ckfinder/ckfinder~CKFinderConfig configure} the feature (if needed):
+Then add `CKFinder` to your plugin list and [configure](#configuration) the feature (when necessary):
 
 ```js
 import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
@@ -36,18 +36,20 @@ ClassicEditor
 		plugins: [ CKFinder, ... ],
 		toolbar: [ 'ckfinder', ... ]
 		ckfinder: {
-			// configuration...
+			// Feature configuration.
 		}
 	} )
 	.then( ... )
 	.catch( ... );
 ```
 
-## CKFinder configuration
+## Configuration
 
-This feature integrates with [CKFinder](https://ckeditor.com/ckfinder/) file manager. To configure behavior of CKFinder by passing {@link module:ckfinder/ckfinder~CKFinderConfig#options configuration options}. Check {@link @ckfinder ckfinder3/#!/api/CKFinder.Config CKFinder documentation} for complete list of options.
+The feature can be configured using the {@link module:ckfinder/ckfinder~CKFinderConfig `config.ckfinder`} object.
 
-Below code will instruct CKFinder to browse only one resource type: 
+The file manager configuration can be passed through the {@link module:ckfinder/ckfinder~CKFinderConfig#options `config.ckfinder.options`} object. Check the {@link @ckfinder ckfinder3/#!/api/CKFinder.Config file manager documentation} for the complete list of options.
+
+For instance, the following code will configure the file manager to browse only the specified resource type (in this case: the images):
 
 ```js
 import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
@@ -64,24 +66,56 @@ ClassicEditor
 	} )
 	.then( ... )
 	.catch( ... );
-``` 
+```
 
 {@snippet features/ckfinder-options}
 
 <info-box>
-The CKFinder feature will also pass the editor language. This behavior can be changed by setting `ckfinder.options.language` configuration option.
+	By default, the editor language is automatically passed to the file manager — the file manager "inherits" the language of the editor. This behavior can be changed by setting the `ckfinder.options.language` configuration option.
 </info-box>
 
-### Enabling images uploads
+### Configuring image upload
+
+This feature allows you to not only browse images, but also upload them automatically to the server (e.g. when the image is dropped into the content) thanks to the {@link module:adapter-ckfinder/uploadadapter~CKFinderUploadAdapter CKFinder upload adapter}. All it requires is the correct {@link module:adapter-ckfinder/uploadadapter~CKFinderAdapterConfig#uploadUrl `config.ckfinder.uploadUrl`} path.
+
+Assuming that the CKFinder file manager is {@link @ckfinder ckfinder3-php/quickstart.html#quickstart_installation_folders installed} (accessible) under `https://example.com/ckfinder/`, use the following {@link @ckfinder ckfinder3-php/commands.html#command_quick_upload quick upload} command URL to enable the image upload:
+
+```js
+import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ CKFinder, ... ],
+		toolbar: [ 'ckfinder', ... ]
+		ckfinder: {
+			// Upload the images to the server using the CKFinder's QuickUpload command.
+			uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
+		}
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+### Configuring the opener
 
-The CKFinder feature will enable CKFinder Upload Adapter. It requires to provide a {@link module:adapter-ckfinder/uploadadapter~CKFinderAdapterConfig#uploadUrl} path.
+You can change the way the CKFinder file manager opens using the {@link module:ckfinder/ckfinder~CKFinderConfig#openerMethod `config.ckfinder.openerMethod`} option.
 
-As an example let assume that {@link @ckfinder ckfinder3-php/quickstart.html#quickstart_installation_folders CKFinder was installed} in `/ckfinder/` directory. To enable uploads to that instance pass the URL of {@link @ckfinder ckfinder3-php/commands.html#command_quick_upload `QuickUpload`} command:
+By default, the manager opens as a modal. To open it in a new "pop-up" window, set the configuration value to `popup`:
 
 ```js
-ckfinder: {
-	uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
-}
+import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ CKFinder, ... ],
+		toolbar: [ 'ckfinder', ... ]
+		ckfinder: {
+			// Open the file manager in the popup window.
+			openerMethod: 'popup'
+		}
+	} )
+	.then( ... )
+	.catch( ... );
 ```
 
 ## Common API
@@ -89,7 +123,7 @@ ckfinder: {
 The {@link module:ckfinder/ckfinder~CKFinder} plugin registers:
 
 * the `'ckfinder'` UI button component,
-* the `'ckfinder'` command implemented by {@link module:ckfinder/ckfindercommand~CKFinderCommand}.
+* the `'ckfinder'` command implemented by the {@link module:ckfinder/ckfindercommand~CKFinderCommand}.
 
 	You can open a CKFinder by executing the following code: