瀏覽代碼

Merge pull request #7458 from ckeditor/i/7332

Docs (image): An initial guide for linking images. See #7332.
Maciej 5 年之前
父節點
當前提交
59b6d40eb7

+ 2 - 0
packages/ckeditor5-image/docs/_snippets/features/build-image-source.js

@@ -8,7 +8,9 @@
 import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
+import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
 
 ClassicEditor.builtinPlugins.push( ImageResize );
+ClassicEditor.builtinPlugins.push( LinkImage );
 
 window.ClassicEditor = ClassicEditor;

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-caption.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-caption' ), {
-		removePlugins: [ 'ImageStyle', 'ImageResize' ],
+		removePlugins: [ 'ImageStyle', 'ImageResize', 'LinkImage' ],
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 		},

+ 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 image-style-side">
+		<a href="https://cksource.com">
+			<img src="%BASE_PATH%/assets/img/fields.jpg" alt="Autumn fields">
+		</a>
+		<figcaption>Autumn fields by Aleksander Nowodziński</figcaption>
+	</figure>
+</div>

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

@@ -0,0 +1,33 @@
+/**
+ * @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' ), {
+		removePlugins: [ 'ImageResize' ],
+		toolbar: {
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		image: {
+			toolbar: [
+				'imageStyle:full',
+				'imageStyle:side',
+				'|',
+				'imageTextAlternative',
+				'|',
+				'linkImage'
+			]
+		},
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editorResize = editor;
+	} )
+	.catch( err => {
+		console.error( err );
+	} );

+ 1 - 0
packages/ckeditor5-image/docs/_snippets/features/image-resize-px.js

@@ -9,6 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-resize-px' ), {
+		removePlugins: [ 'LinkImage' ],
 		image: {
 			resizeUnit: 'px'
 		},

+ 1 - 0
packages/ckeditor5-image/docs/_snippets/features/image-resize.js

@@ -9,6 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-resize' ), {
+		removePlugins: [ 'LinkImage' ],
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-style-custom.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
-		removePlugins: [ 'ImageResize' ],
+		removePlugins: [ 'ImageResize', 'LinkImage' ],
 		image: {
 			styles: [
 				// This option is equal to a situation where no style is applied.

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-style.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style' ), {
-		removePlugins: [ 'ImageResize' ],
+		removePlugins: [ 'ImageResize', 'LinkImage' ],
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image-toolbar.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-toolbar' ), {
-		removePlugins: [ 'ImageCaption', 'ImageStyle', 'ImageResize' ],
+		removePlugins: [ 'ImageCaption', 'ImageStyle', 'ImageResize', 'LinkImage' ],
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 		},

+ 1 - 1
packages/ckeditor5-image/docs/_snippets/features/image.js

@@ -9,7 +9,7 @@ import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-image' ), {
-		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle', 'ImageResize' ],
+		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle', 'ImageResize', 'LinkImage' ],
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 		},

+ 21 - 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.
@@ -267,6 +268,26 @@ Resizing by dragging handles displayed over the image is the first option provid
 
 We count on your feedback. React with 👍 under the respective tickets or [report new ones](https://github.com/ckeditor/ckeditor5-image/issues) if you have different ideas.
 
+## 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>
+```
+
+Enabling linking images brings support for link editing to the rich-text editor. See the {@link features/link Link guide} to read more about the feature.
+
+{@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>
+
 ## Installation
 
 To add image features to your rich-text editor, install the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package:

+ 2 - 0
packages/ckeditor5-link/docs/features/link.md

@@ -283,6 +283,8 @@ editor.execute( 'link', 'http://example.com', { linkIsExternal: true } );
 editor.execute( 'unlink' );
 ```
 
+The package provides a plugin for {@link module:link/linkimage~LinkImage linking images}. See the {@link features/image#linking-images Linking images} section in the {@link features/image feature guide}.
+
 Links are represented in the {@link module:engine/model/model~Model model} using the `linkHref` attribute. [Manual link decorators](#adding-attributes-to-links-using-the-ui-manual-decorators) are represented in the model using text attributes corresponding to their names, as configured in {@link module:link/link~LinkConfig#decorators `config.link.decorators`}.
 
 <info-box>