Parcourir la source

Docs: Added a demo which features the imageUpload button. Closes ckeditor/ckeditor5#786.

Piotrek Koszuliński il y a 7 ans
Parent
commit
9cef26e14a

+ 3 - 0
docs/_snippets/features/image-upload.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
docs/_snippets/features/image-upload.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-cloudservices/tests/_utils/cloudservices-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-upload' ), {
+		cloudServices: CS_CONFIG,
+		toolbar: {
+			viewportTopOffset: 60
+		}
+	} )
+	.then( editor => {
+		window.editor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 10 - 2
docs/features/image-upload.md

@@ -25,7 +25,7 @@ The image insertion, therefore, is made of a few steps, which are transparent to
 
 <!-- TODO [ Drawing: workflow ( User Inserts Image ) -> ( Temporary Image Inserted ) -> ( Image Uploaded ) -> ( URL Returned ) -> ( Temporary Image Replaced with Definitive ) ] -->
 
-To make the above process possible, an image upload plugin must be available. Such plugin will handle both the upload and URL returning steps in the above workflow.
+To make the above process possible, an image upload plugin (such as {@link module:easy-image/easyimage~EasyImage}) must be available. Such plugin will handle both the upload and URL returning steps in the above workflow.
 
 ## Responsive images
 
@@ -47,7 +47,7 @@ To make enabling image upload in CKEditor 5 a breeze, by default all builds incl
 4. Configure CKEditor to use the security token entry point:
 
 	```js
-	ClassicCreator
+	ClassicEditor
 		.create( document.querySelector( '#editor' ), {
 			cloudServices: {
 				tokenUrl: 'https://example.com/cs-token-endpoint',
@@ -60,6 +60,14 @@ To make enabling image upload in CKEditor 5 a breeze, by default all builds incl
 
 This is all. At this point, image upload will be automatically enabled in your application.
 
+### 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/image-upload}
+
 ## What's next?
 
 See the {@link features/image Image feature} guide to learn more about handling images in CKEditor 5.