浏览代码

Docs: Added the Easy Image feature guide.

Aleksander Nowodzinski 7 年之前
父节点
当前提交
05cd16a504

+ 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 );
+	} );

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

@@ -0,0 +1,52 @@
+---
+category: features
+menu-title: Easy Image
+---
+
+# Easy Image integration
+
+{@link module:easy-image/easyimage~EasyImage Easy Image} is an editor feature that takes care of image uploads with virtually no server configuration required on your side.
+
+<info-box>
+	Check out the {@link features/image-upload general image upload guide} to learn about other ways to upload images into CKEditor 5.
+</info-box>
+
+## 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 - 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're having troubles in setting up Easy Image, please [contact us](https://ckeditor.com/contact/).
+
+### Demo
+
+The demo below uses the {@link builds/guides/overview#classic-editor Classic editor} configured (like above) to use the Easy Image service provided by CKEditor Cloud Services:
+
+{@snippet build-classic-source}
+
+{@snippet features/easy-image}
+
+## 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. Rescaled and optimized images are delivered through a blazing-fast CDN.
+
+## What's next?
+
+See the {@link features/image Image feature} guide to learn more about handling images in CKEditor 5.
+