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

Docs: Created 2 demos in the feature guide. Guide refactoring and clean-up.

Aleksander Nowodzinski 7 лет назад
Родитель
Сommit
b078ea6494

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

@@ -0,0 +1,3 @@
+<div id="snippet-ckfinder-upload-only">
+	Use the toolbar button to insert an image.
+</div>

+ 26 - 0
packages/ckeditor5-ckfinder/docs/_snippets/features/ckfinder-upload-only.js

@@ -0,0 +1,26 @@
+/**
+ * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-ckfinder-upload-only' ), {
+		toolbar: {
+			items: [
+				'imageUpload', '|', '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 );
+	} );

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

@@ -1,3 +1,3 @@
 <div id="snippet-ckfinder">
 <div id="snippet-ckfinder">
-	Use toolbar button to insert image or link to a file.
+	Use the toolbar button to open the CKFinder file manager. Use the file manager's interface to insert an image or a link to a file.
 </div>
 </div>

+ 35 - 30
packages/ckeditor5-ckfinder/docs/features/ckfinder.md

@@ -10,13 +10,13 @@ menu-title: CKFinder
 This 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.
 This 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.
 
 
 <info-box>
 <info-box>
-	Check out the {@link features/image-upload general image upload guide} to learn about other ways to upload images into CKEditor 5.
+	Check out the {@link features/image-upload comprehensive image upload guide} to learn about other ways to upload images into CKEditor 5.
 </info-box>
 </info-box>
 
 
 This feature can be used in the editor in two different ways:
 This feature can be used in the editor in two different ways:
 
 
-* [**As a server-side connector only**](#configuring-the-image-upload-only): In this scenario, images which are dropped or pasted into the editor are uploaded to a CKFinder server-side connector running on your server.
-* [**As a server and client-side file manager integration**](#configuring-the-full-integration) **(recommended)**: Images dropped and pasted directly into the editor are uploaded to the server (just like in the first option).
+* [**As a server-side connector only**](#configuring-the-image-upload-only) ([demo](#image-upload-only)): In this scenario, images which are dropped or pasted into the editor are uploaded to a CKFinder server-side connector running on your server.
+* [**As a server and client-side file manager integration**](#configuring-the-full-integration) ([demo](#full-integration)): Images dropped and pasted directly into the editor are uploaded to the server (just like in the first option).
 
 
 	But there are more cool features available, for instance:
 	But there are more cool features available, for instance:
 
 
@@ -25,26 +25,29 @@ This feature can be used in the editor in two different ways:
 	* **editing** images (cropping, resizing, etc.),
 	* **editing** images (cropping, resizing, etc.),
 	* **organizing** or deleting images.
 	* **organizing** or deleting images.
 
 
-	Use the [demo](#demo) to try the file manager integration with CKEditor 5 now.
-
-	Check out the [CKFinder project website](https://ckeditor.com/ckeditor-4/ckfinder/) to learn more about features you can use in your project.
+	Check out the [CKFinder file manager website](https://ckeditor.com/ckeditor-4/ckfinder/) to learn more about features you can use in your project.
 
 
 ## Demo
 ## Demo
 
 
+### Image upload only
+
+This demo shows the integration where the file manager's server connector handles [the image upload](#configuring-the-full-integration) only:
+
+* Paste the image directly into the editor content and it will be automatically uploaded using the server—side connector.
+* Use the "Insert image" button in the toolbar to insert an image.
+
+{@snippet features/ckfinder-upload-only}
+
 ### Full integration
 ### Full integration
 
 
 This demo shows the [full integration](#configuring-the-full-integration) with the CKFinder file manager:
 This demo shows the [full integration](#configuring-the-full-integration) with the CKFinder file manager:
 
 
-* You can also paste the image directly into the editor content and it will be automatically uploaded to the server.
-* You can use the "Insert image or file" button in the toolbar to insert an image or a link to any other file.
+* Paste the image directly into the editor content and it will be automatically uploaded using the server—side connector.
+* Use the "Insert image or file" button in the toolbar to open the CKFinder file manager and insert an image or a link to any other file.
 
 
 {@snippet features/ckfinder}
 {@snippet features/ckfinder}
 
 
-### Image upload only
-
-**TODO**: Demo of CKE5 with imageUpload button.
-
-## Installation
+## Installation in a custom editor build
 
 
 <info-box info>
 <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.
 	This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom editor.
@@ -73,11 +76,9 @@ ClassicEditor
 	.catch( ... );
 	.catch( ... );
 ```
 ```
 
 
-**TODO**: Mention that CKFinder must be loaded too if you're using the full integration.
-
 ## Configuration
 ## Configuration
 
 
-The feature can be configured using the {@link module:ckfinder/ckfinder~CKFinderConfig `config.ckfinder`} object.
+The feature is configurable using the {@link module:ckfinder/ckfinder~CKFinderConfig `config.ckfinder`} object.
 
 
 ### Configuring the image upload only
 ### Configuring the image upload only
 
 
@@ -100,23 +101,19 @@ ClassicEditor
 	.catch( ... );
 	.catch( ... );
 ```
 ```
 
 
-Drop an image into the content — it should be uploaded automatically to the server using the CKFinder connector.
+**See the [demo](#image-upload-only)**.
 
 
 ### Configuring the full integration
 ### Configuring the full integration
 
 
-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.
-
-<info-box>
-	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>
-
-<info-box>
-	**TODO** To enable the automatic image upload to the server, follow the [instructions in the previous section](#configuring-the-image-upload-only).
-</info-box>
+To use both the image upload functionality and the CKFinder user interface in your application, you must include the `<script>` tag loading the `ckfinder.js` file first:
 
 
-To display the toolbar button that opens the CKFinder file manager UI allowing users to choose files on the server, make sure `'ckfinder'` is present in your {@link module:core/editor/editorconfig~EditorConfig#toolbar `config.toolbar`}.
+```html
+<script src="https://example.com/ckfinder/ckfinder.js"></script>
+```
 
 
-Additionally, you can specify {@link @ckfinder ckfinder3/#!/api/CKFinder.Config-cfg-resourceType `config.ckfinder.options.resourceTypes`} to tell the file manager that only the specified resource type (in this case: the images) can be browsed when the user uses the button:
+* To enable the automatic file upload to the server when an image is pasted or dropped into the editor content, remember to set the correct {@link module:ckfinder/ckfinder~CKFinderConfig#uploadUrl `config.ckfinder.uploadUrl`} path.
+* To display the toolbar button that opens the CKFinder file manager UI allowing users to choose files on the server, make sure `'ckfinder'` is present in your {@link module:core/editor/editorconfig~EditorConfig#toolbar `config.toolbar`}.
+* Additionally, you can specify {@link @ckfinder ckfinder3/#!/api/CKFinder.Config-cfg-resourceType `config.ckfinder.options.resourceTypes`} to tell the file manager that only the specified resource type (in this case: the images) can be browsed when the user uses the button.
 
 
 ```js
 ```js
 import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
 import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
@@ -135,7 +132,6 @@ ClassicEditor
 			},
 			},
 
 
 			// Upload the images to the server using the CKFinder's QuickUpload command.
 			// Upload the images to the server using the CKFinder's QuickUpload command.
-			// See the "Configuring the image upload only" section.
 			uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
 			uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
 		}
 		}
 	} )
 	} )
@@ -143,7 +139,15 @@ ClassicEditor
 	.catch( ... );
 	.catch( ... );
 ```
 ```
 
 
-{@snippet features/ckfinder-options}
+**See the [demo](#full-integration)**.
+
+<info-box>
+	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.
+</info-box>
+
+<info-box>
+	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>
 
 
 #### Configuring the opener
 #### Configuring the opener
 
 
@@ -188,3 +192,4 @@ Additionally, in the "image upload only" integration, you can use the following
 ## Contribute
 ## Contribute
 
 
 The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-ckfinder.
 The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5-ckfinder.
+