Browse Source

Add a section about linkin images in Image guide.

Kamil Piechaczek 5 years ago
parent
commit
9cdf65c85d

+ 10 - 0
packages/ckeditor5-image/docs/_snippets/features/image-link.html

@@ -0,0 +1,10 @@
+<div id="snippet-image-link">
+	<h3>Click me!</h3>
+
+	<figure class="image">
+		<a href="https://cksource.com">
+			<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+		</a>
+		<figcaption>CKEditor logo - caption</figcaption>
+	</figure>
+</div>

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

@@ -0,0 +1,22 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config.js';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-image-link' ), {
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorResize = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

+ 19 - 0
packages/ckeditor5-image/docs/features/image.md

@@ -14,6 +14,7 @@ The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckedit
 * {@link module:image/imagetextalternative~ImageTextAlternative} adds support for adding text alternative.
 * {@link module:image/imageupload~ImageUpload} adds support for uploading dropped or pasted images (see: {@link features/image-upload Image upload}).
 * {@link module:image/imageresize~ImageResize} adds support for resizing images.
+* {@link module:link/linkimage~LinkImage} adds support for linking images.
 
 <info-box info>
 	All features listed above except the image resize are enabled by default in all WYSIWYG editor builds.
@@ -178,6 +179,24 @@ See the {@link features/image-upload Image upload} guide.
 
 Support for responsive images in CKEditor 5 is brought by the {@link features/easy-image Easy Image} feature without any additional configuration. Learn more how to use the feature in your project in the {@link features/easy-image#responsive-images Easy Image integration} guide.
 
+## Linking images
+
+The {@link module:link/linkimage~LinkImage} plugin adds support for linking images:
+
+```html
+<figure class="image">
+	<a href="...">
+	    <img src="..." alt="...">
+    </a>
+</figure>
+```
+
+{@snippet features/image-link}
+
+<info-box info>
+	The {@link module:link/linkimage~LinkImage} plugin is available in the [@ckeditor/ckeditor5-link](https://www.npmjs.com/package/@ckeditor/ckeditor5-link) package.
+</info-box>
+
 ## Resizing images
 
 The [image styles](#image-styles) feature is meant to give the user the choice between a set of styling options provided by the system (so by the developer or administrator who created it). There are also scenarios where the user should be able to freely set the width of an image. And that is where the image resize feature comes to play.