Преглед на файлове

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 ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
 
 
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
+import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
 
 
 ClassicEditor.builtinPlugins.push( ImageResize );
 ClassicEditor.builtinPlugins.push( ImageResize );
+ClassicEditor.builtinPlugins.push( LinkImage );
 
 
 window.ClassicEditor = ClassicEditor;
 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
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-caption' ), {
 	.create( document.querySelector( '#snippet-image-caption' ), {
-		removePlugins: [ 'ImageStyle', 'ImageResize' ],
+		removePlugins: [ 'ImageStyle', 'ImageResize', 'LinkImage' ],
 		image: {
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 			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
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-resize-px' ), {
 	.create( document.querySelector( '#snippet-image-resize-px' ), {
+		removePlugins: [ 'LinkImage' ],
 		image: {
 		image: {
 			resizeUnit: 'px'
 			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
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-resize' ), {
 	.create( document.querySelector( '#snippet-image-resize' ), {
+		removePlugins: [ 'LinkImage' ],
 		toolbar: {
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 			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
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
 	.create( document.querySelector( '#snippet-image-style-custom' ), {
-		removePlugins: [ 'ImageResize' ],
+		removePlugins: [ 'ImageResize', 'LinkImage' ],
 		image: {
 		image: {
 			styles: [
 			styles: [
 				// This option is equal to a situation where no style is applied.
 				// 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
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-style' ), {
 	.create( document.querySelector( '#snippet-image-style' ), {
-		removePlugins: [ 'ImageResize' ],
+		removePlugins: [ 'ImageResize', 'LinkImage' ],
 		toolbar: {
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 			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
 ClassicEditor
 	.create( document.querySelector( '#snippet-image-toolbar' ), {
 	.create( document.querySelector( '#snippet-image-toolbar' ), {
-		removePlugins: [ 'ImageCaption', 'ImageStyle', 'ImageResize' ],
+		removePlugins: [ 'ImageCaption', 'ImageStyle', 'ImageResize', 'LinkImage' ],
 		image: {
 		image: {
 			toolbar: [ 'imageTextAlternative' ]
 			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
 ClassicEditor
 	.create( document.querySelector( '#snippet-image' ), {
 	.create( document.querySelector( '#snippet-image' ), {
-		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle', 'ImageResize' ],
+		removePlugins: [ 'ImageToolbar', 'ImageCaption', 'ImageStyle', 'ImageResize', 'LinkImage' ],
 		toolbar: {
 		toolbar: {
 			viewportTopOffset: window.getViewportTopOffsetConfig()
 			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/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/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:image/imageresize~ImageResize} adds support for resizing images.
+* {@link module:link/linkimage~LinkImage} adds support for linking images.
 
 
 <info-box info>
 <info-box info>
 	All features listed above except the image resize are enabled by default in all WYSIWYG editor builds.
 	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.
 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
 ## Installation
 
 
 To add image features to your rich-text editor, install the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package:
 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' );
 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`}.
 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>
 <info-box>