浏览代码

Merge branch t/upload-docs

Docs: New image upload docs.
Piotrek Koszuliński 7 年之前
父节点
当前提交
5dc3b1e970

+ 5 - 3
packages/ckeditor5-easy-image/README.md

@@ -10,13 +10,15 @@ CKEditor 5 Easy Image with Cloud Services
 [![Dependency Status](https://david-dm.org/ckeditor/ckeditor5-easy-image/status.svg)](https://david-dm.org/ckeditor/ckeditor5-easy-image)
 [![devDependency Status](https://david-dm.org/ckeditor/ckeditor5-easy-image/dev-status.svg)](https://david-dm.org/ckeditor/ckeditor5-easy-image?type=dev)
 
-This package implements the [Easy Image](https://ckeditor.com/docs/ckeditor5/latest/features/image.html#image-upload) feature for CKEditor 5.
+This package implements the [Easy Image](https://ckeditor.com/docs/ckeditor5/latest/features/easy-image.html) feature for CKEditor 5.
 
-Easy Image lets you easily insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. It integrates automatically with [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/).
+Easy Image lets you easily insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. It integrates automatically with the [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/).
 
 ## Documentation
 
-See the [`@ckeditor/ckeditor5-easy-image` package](https://ckeditor.com/docs/ckeditor5/latest/api/easy-image.html) page in [CKEditor 5 documentation](https://ckeditor.com/docs/ckeditor5/latest/).
+See the ["Easy Image integration" guide](https://ckeditor.com/docs/ckeditor5/latest/features/easy-image.html) and the [plugin documentation](https://ckeditor.com/docs/ckeditor5/latest/api/easy-image.html) to learn how to enable the integration.
+
+Check out the [comprehensive "Image upload" guide](https://ckeditor.com/docs/ckeditor5/latest/features/image-upload.html) to learn about other ways to upload images into CKEditor 5.
 
 ## License
 

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

@@ -0,0 +1,3 @@
+<div id="snippet-image-upload">
+	<p>Paste or drop an image directly into the editor. Or use the "Insert image" button in the toolbar.</p>
+</div>

+ 22 - 0
packages/ckeditor5-easy-image/docs/_snippets/features/easy-image.js

@@ -0,0 +1,22 @@
+/**
+ * @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-image-upload' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 3 - 3
packages/ckeditor5-easy-image/docs/api/easy-image.md

@@ -8,13 +8,13 @@ category: api-reference
 
 This package implements the {@link features/image#image-upload Easy Image} feature for CKEditor 5.
 
-Easy Image lets you easily insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. It integrates automatically with [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/).
+Easy Image lets you easily insert images which are automatically rescaled, optimized, responsive and delivered through a blazing-fast CDN. It integrates automatically with the [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/).
 
 ## Documentation
 
-See the {@link features/image-upload Image upload} guide.
+See the {@link features/easy-image "Easy Image integration" guide} and the {@link module:easy-image/easyimage~EasyImage plugin documentation} to learn how to enable the integration.
 
-You can also check the {@link module:easy-image/easyimage~EasyImage} plugin documentation.
+Check out the {@link features/image-upload comprehensive "Image upload" guide} to learn about other ways to upload images into CKEditor 5.
 
 ## Installation
 

文件差异内容过多而无法显示
+ 0 - 0
packages/ckeditor5-easy-image/docs/assets/img/responsive-images.svg


+ 96 - 0
packages/ckeditor5-easy-image/docs/features/easy-image.md

@@ -0,0 +1,96 @@
+---
+category: features
+menu-title: Easy Image
+---
+
+# Easy Image integration
+
+CKEditor 5 introduces a totally new way of handling images, with strong focus on the end–user experience. It is called {@link features/easy-image Easy Image} and its goal is to make the image upload as effortless and intuitive as possible.
+
+Easy Image is part of the [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/) offer. It is a <abbr title="Software as a service">SaaS</abbr> product which:
+
+* securely uploads images,
+* takes care of rescaling and {@link @cs guides/easy-image/service-details#image-processing optimizing them} as well as providing [various image sizes](#responsive-images) (responsive images),
+* delivers uploaded images through a blazing-fast CDN.
+
+All that, with virtually zero server setup so you do not have to worry about anything.
+
+<info-box>
+	Check out the {@link features/image-upload comprehensive "Image upload" guide} to learn about other ways to upload images into CKEditor 5.
+</info-box>
+
+### Demo
+
+The demo below uses the {@link builds/guides/overview#classic-editor Classic editor} configured to use the Easy Image service provided by CKEditor Cloud Services:
+
+{@snippet build-classic-source}
+
+{@snippet features/easy-image}
+
+## Configuration
+
+To make enabling image upload in CKEditor 5 a breeze, by default all builds include the {@link module:easy-image/easyimage~EasyImage `EasyImage` plugin}, which integrates with the Easy Image service provided by [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/). Enabling it is straightforward and the results are immediate:
+
+1. Follow {@link @cs guides/easy-image/quick-start Easy Image &mdash; Quick start} guide to setup an account.
+2. Configure CKEditor (see {@link module:cloud-services/cloudservices~CloudServicesConfig `CloudServicesConfig`}):
+
+	```js
+	ClassicEditor
+		.create( document.querySelector( '#editor' ), {
+			cloudServices: {
+				tokenUrl: 'https://example.com/cs-token-endpoint',
+				uploadUrl: 'https://your-organization-id.cke-cs.com/easyimage/upload/'
+			}
+		} )
+		.then( ... )
+		.catch( ... );
+	```
+
+This is all. At this point, image upload will be automatically enabled in your application.
+
+If you are having troubles in setting up Easy Image, please [contact us](https://ckeditor.com/contact/).
+
+## Responsive images
+
+Another great feature introduced with CKEditor 5 is the ability to have responsive images in the content. With a single image upload, several optimized versions of that image are created, each for a different size of the display. All this is totally transparent to the end user who uploaded the image.
+
+{@img assets/img/responsive-images.svg 550 The visualization of the responsive images approach.}
+
+### Why responsive images?
+
+Responsive images have two main advantages over the "traditional" image delivery:
+
+* **They save the data transfer**: There are countless device and screen size combinations that can be used to display images in your application (smartphones, tablets, laptops, etc.) but you do not need to serve the same full–scale images to all of them.
+
+	Using Easy Image guarantees only the particular size variant corresponding to the user's screen size is served, minimizing the amount of data transferred to the client. For large images, this can save up to 90% of the transferred data — [see it yourself!](https://ckeditor.com/ckeditor-cloud-services/easy-image/)
+* **They load a way faster**: because only the image matching the size of the screen is transferred, in most of the cases, it can be loaded and displayed a way faster than a "regular" full–scale image. And the faster it loads, the sooner the users can see it, which greatly improves the user experience of your application. You no longer need to wait ages for a high–resolution photos to load on a tiny smartphone screen.
+
+### Responsive images in the markup
+
+Responsive images delivered by the Easy Image service are transparent to your application. Once uploaded, the image appears in the editor content as a "regular" image but with some additional attributes like the `srcset`.
+
+The `srcset` attribute specifies the image variants dedicated for the various screen sizes for the web browser to choose from (360px, 720px, 1080px, 1440px, etc.), for instance the `image.jpg` file  uploaded by the user will have the following markup:
+
+```html
+<figure class="image">
+	<img
+		src="https://cdn.cke-cs.com/images/image.jpg"
+		srcset="https://cdn.cke-cs.com/images/image.jpg/w_360 360w,
+			https://cdn.cke-cs.com/images/image.jpg/w_720 720w,
+			https://cdn.cke-cs.com/images/image.jpg/w_1080 1080w,
+			...
+			https://cdn.cke-cs.com/images/image.jpg/w_2880 2880w,
+			https://cdn.cke-cs.com/images/image.jpg/w_3240 3240w,
+			https://cdn.cke-cs.com/images/image.jpg/w_3543 3543w"
+		sizes="100vw"
+		width="...">
+	<figcaption>...</figcaption>
+</figure>
+```
+
+The variety of the image sizes in the `srcset` attribute allows the web browser to choose the best one for the particular screen size so it loads faster and with less data transferred. See the detailed {@link @cs guides/easy-image/service-details documentation} of the Easy Image to learn more about responsive images and other features offered by the service.
+
+## What's next?
+
+Check out the {@link features/image-upload comprehensive "Image upload" guide} to learn more about different ways of uploading images in CKEditor 5. See the {@link features/image Image feature} guide to find out more about handling images in CKEditor 5.
+

+ 13 - 7
packages/ckeditor5-easy-image/src/easyimage.js

@@ -13,13 +13,9 @@ import Image from '@ckeditor/ckeditor5-image/src/image';
 import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
 
 /**
- * The Easy Image feature.
- *
- * For a detailed overview, check the {@glink features/image-upload Image upload feature documentation}
- * and the {@glink api/easy-image package page}.
- *
- * After enabling the Easy Image plugin you need to configure the [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/)
- * integration through {@link module:cloud-services/cloudservices~CloudServicesConfig `config.cloudServices`}.
+ * The Easy Image feature, which makes the image upload in CKEditor 5 possible with virtually zero
+ * server setup. A part of the [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/)
+ * family.
  *
  * This is a "glue" plugin which enables:
  *
@@ -27,6 +23,16 @@ import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
  * * {@link module:image/imageupload~ImageUpload},
  * * {@link module:easy-image/cloudservicesuploadadapter~CloudServicesUploadAdapter}.
  *
+ * See the {@glink features/easy-image "Easy Image integration" guide} to learn how to configure
+ * and use this feature.
+ *
+ * Check out the {@glink features/image-upload comprehensive "Image upload" guide} to learn about
+ * other ways to upload images into CKEditor 5.
+ *
+ * **Note**: After enabling the Easy Image plugin you need to configure the
+ * [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/)
+ * integration through {@link module:cloud-services/cloudservices~CloudServicesConfig `config.cloudServices`}.
+ *
  * @extends module:core/plugin~Plugin
  */
 export default class EasyImage extends Plugin {

部分文件因为文件数量过多而无法显示