Bladeren bron

Merge branch 'release' of github.com:ckeditor/ckeditor5 into release

Marek Lewandowski 5 jaren geleden
bovenliggende
commit
3991175854

+ 8 - 3
packages/ckeditor5-image/docs/_snippets/features/image-link.html

@@ -1,10 +1,15 @@
+<style>
+	.image > a {
+		display: block;
+		border: solid 2px #1b3af2; /* The color of the link text on this page. */
+	}
+</style>
 <div id="snippet-image-link">
-	<h3>Click me!</h3>
+	<h3>Linked image</h3>
 
-	<figure class="image image-style-side">
+	<figure class="image">
 		<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>

+ 20 - 20
packages/ckeditor5-image/docs/features/image.md

@@ -17,7 +17,7 @@ The [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckedit
 * {@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.
+	All features listed above except the image resize and image linking are enabled by default in all WYSIWYG editor builds.
 
 	Check the documentation of each subfeature to learn more about it.
 </info-box>
@@ -257,17 +257,6 @@ ClassicEditor
 
 {@snippet features/image-resize-px}
 
-### Future development
-
-Resizing by dragging handles displayed over the image is the first option provided, but we consider implementing more with time. Some of the possible next steps include:
-
-* [Buttons such as "50%", "75%" and "100%" in the image toolbar](https://github.com/ckeditor/ckeditor5-image/issues/322), allowing the user to choose only from predefined widths.
-* [A traditional "width" input](https://github.com/ckeditor/ckeditor5-image/issues/319). Or an option to set both width and height separately.
-* [An option to restore the original image size](https://github.com/ckeditor/ckeditor5-image/issues/318).
-* [Limiting image resize](https://github.com/ckeditor/ckeditor5-image/issues/320) with min and max values.
-
-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:
@@ -275,17 +264,20 @@ The {@link module:link/linkimage~LinkImage} plugin adds support for linking imag
 ```html
 <figure class="image">
 	<a href="...">
-	    <img src="..." alt="...">
-    </a>
+		<img src="..." alt="...">
+	</a>
+	<figcaption>Image caption</figcaption>
 </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}
 
+### Enabling image linking
+
+The image linking feature is not enabled by default in any of the editor builds. In order to enable it, you need to load the {@link module:link/linkimage~LinkImage} plugin. Read more in the [Installation](#installation) section.
+
 <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.
+	The {@link module:link/linkimage~LinkImage} plugin is available in the {@link api/link `@ckeditor/ckeditor5-link`} package.
 </info-box>
 
 ## Installation
@@ -293,7 +285,7 @@ Enabling linking images brings support for link editing to the rich-text editor.
 To add image features to your rich-text editor, install the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package:
 
 ```bash
-npm install --save @ckeditor/ckeditor5-image
+npm install --save @ckeditor/ckeditor5-image @ckeditor/ckeditor5-link
 ```
 
 And add the plugins that you need to your plugin list. You also need to set the image toolbar items.
@@ -304,12 +296,20 @@ import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
 import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
 import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
 import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
+import LinkImage from '@ckeditor/ckeditor5-link/src/linkimage';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize ],
+		plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, LinkImage ],
 		image: {
-			toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side' ]
+			toolbar: [
+				'imageStyle:full',
+				'imageStyle:side',
+				'|',
+				'imageTextAlternative',
+				'|',
+				'linkImage'
+			]
 		}
 	} )
 	.then( ... )