|
@@ -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.
|
|
* {@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 and image linking are enabled by default in all WYSIWYG editor builds.
|
|
|
|
|
|
|
|
Check the documentation of each subfeature to learn more about it.
|
|
Check the documentation of each subfeature to learn more about it.
|
|
|
</info-box>
|
|
</info-box>
|
|
@@ -257,17 +257,6 @@ ClassicEditor
|
|
|
|
|
|
|
|
{@snippet features/image-resize-px}
|
|
{@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
|
|
## Linking images
|
|
|
|
|
|
|
|
The {@link module:link/linkimage~LinkImage} plugin adds support for 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
|
|
```html
|
|
|
<figure class="image">
|
|
<figure class="image">
|
|
|
<a href="...">
|
|
<a href="...">
|
|
|
- <img src="..." alt="...">
|
|
|
|
|
- </a>
|
|
|
|
|
|
|
+ <img src="..." alt="...">
|
|
|
|
|
+ </a>
|
|
|
|
|
+ <figcaption>Image caption</figcaption>
|
|
|
</figure>
|
|
</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}
|
|
{@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>
|
|
<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>
|
|
</info-box>
|
|
|
|
|
|
|
|
## Installation
|
|
## 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:
|
|
To add image features to your rich-text editor, install the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package:
|
|
|
|
|
|
|
|
```bash
|
|
```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.
|
|
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 ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
|
|
|
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
|
|
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
|
|
|
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
|
|
ClassicEditor
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
.create( document.querySelector( '#editor' ), {
|
|
|
- plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize ],
|
|
|
|
|
|
|
+ plugins: [ Image, ImageToolbar, ImageCaption, ImageStyle, ImageResize, LinkImage ],
|
|
|
image: {
|
|
image: {
|
|
|
- toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side' ]
|
|
|
|
|
|
|
+ toolbar: [
|
|
|
|
|
+ 'imageStyle:full',
|
|
|
|
|
+ 'imageStyle:side',
|
|
|
|
|
+ '|',
|
|
|
|
|
+ 'imageTextAlternative',
|
|
|
|
|
+ '|',
|
|
|
|
|
+ 'linkImage'
|
|
|
|
|
+ ]
|
|
|
}
|
|
}
|
|
|
} )
|
|
} )
|
|
|
.then( ... )
|
|
.then( ... )
|