Skip to content

Commit 4c228fb

Browse files
oleqoleq
authored
Merge pull request #9236 from ckeditor/i/2052-inline-images
Feature (image): Introduced support for inline images in editor content. Available out–of–the–box in all ready–to–use editor builds inline images can be uploaded, styled, resized, and linked and complement the already supported block images. See the [image feature overview guide](https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html) to see inline images in action. For more information about breaking changes, migration path, and tips, check out the [migration guide](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-28.html). Feature (image): It should be possible to define the dropdown menu as an object in the `config.image.toolbar` configuration. Closes #9340. Other (image): Turned the image utils module into an editor plugin to allow sharing utils outside the package. See #8871. Fix (image): The side-aligned images should always have some `min-width` property to not take the whole editor width. Closes #9342. Fix (image): The floating block images, except the `side` image, should be displayed side by side by default. Closes #9183. Fix (image): An image should never overflow the widget boundaries while changing its size. Closes #9166. Fix (image): The size label should be displayed above the image if it doesn't fit inside. See #9166. Fix (image): An Image caption placeholder text should not wrap or overflow. Closes #9162. Other (image): The image toolbar should be visible if the selection is placed inside an image caption. Closes #9136. Other (image): The image caption should be controlled using the toolbar button and a command for better integration with image styles. Closes #8907. Other (build-decoupled-document): The editor document build should include the `ImageResize` plugin. Closes #9507. Feature (link): Integrated the link feature with inline images. Closes #8871. Closes #9017. Closes #9167. Fix (link): The link UI should be shown when clicking a linked inline widget. Closes #9607. Other (widget): Safeguarded the way the `Widget` plugin sets the fake selection. Closes #9580. Fix (widget): Selected inline widgets wrapped in an attribute in the view should create a fake selection. Closes #9524. Closes #9521. Other (widget): Replaced the `findOptimalInsertionPosition()` helper with `findOptimalInsertionRange()` that will now attempt to replace selected blocks when inserting new widgets. Closes #9102. Fix (clipboard): Hide all toolbars when the user starts dragging the widget and show them when the drag ends. Closes #9566. Fix (code-block): The code block feature should not allow for inserting inline widgets as its content. Closes #9567. Other (easy-image): Removed the `Image` plugin dependency from the `EasyImage` plugin. Closes #9399. Other (table): Added the `.ck-table-bogus-paragraph` CSS class to the in-cell pseudo-paragraph used for data tables for easier and safer styling. Other (core): Added several icons for new image styles (see #8909). Other (ui): Added the `class` property to the `SplitButtonView` UI component. See #8909. Other (image, table, html-embed, media-embed, page-break, horizontal-line): New widgets will replace the selected block instead of being added next to it while being inserted (see #9102). BREAKING CHANGE (image): The `Image` plugin works as a glue for both `ImageBlock` and `ImageInline` features now (previously only block images). If you do not want inline images to be allowed, consider replacing the `Image` plugin with `ImageBlock` in your editor configuration. Otherwise, all images without the `<figure>` wrapper will be loaded into the editor content as inline images, which in some cases may affect content semantics and styling. BREAKING CHANGE (image): The `ImageEditing` plugin is no longer standalone as the majority of its logic was extracted to `ImageBlockEditing` and `ImageInlineEditing` plugins. The logic remaining in the `ImageEditing` is common for both `ImageBlockEditing` and `ImageInlineEditing` plugins. BREAKING CHANGE (image): The image caption is no longer displayed automatically the user selects a block image. Instead, its presence is controlled using the `'toggleImageCaption'` toolbar button and a [`ToggleImageCaptionCommand`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imagecaption_toggleimagecaptioncommand-ToggleImageCaptionCommand.html) for better integration with [revamped image styles system](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-28.html#image-styles). [Learn more](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-28.html#image-caption). BREAKING CHANGE (image): Some helpers from the image utils module (`@ckeditor/ckeditor5-image/src/image/utils.js`) have moved to the [`ImageUtils` plugin](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imageutils-ImageUtils.html). The helpers are still accessible via `editor.plugins.get( 'ImageUtils' )` namespace, for instance, `editor.plugins.get( 'ImageUtils' ).insertImage( ... )`. BREAKING CHANGE (image): The API of the [`insertImage()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imageutils-ImageUtils.html#function-insertImage) helper has changed, please make sure to update your integrations. BREAKING CHANGE (image): The `getSelectedImageWidget()` helper is no longer part of the public API. BREAKING CHANGE (image): The `getViewImgFromWidget()` helper is no longer part of the public API. BREAKING CHANGE (image): The `isImageAllowed()` helper is no longer part of the public API. BREAKING CHANGE (image): The `isImage()` helper is no longer part of the public API. BREAKING CHANGE (image): The `isImageWidget()` helper is no longer part of the public API. BREAKING CHANGE (image): The `toImageWidget()` helper is no longer part of the public API. BREAKING CHANGE (image): The `captionElementCreator()` helper is no longer part of the public API. BREAKING CHANGE (image): The `isCaption()` helper is no longer part of the public API. BREAKING CHANGE (image): The `getCaptionFromImage()` helper is now available as [`getCaptionFromImageModelElement()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imagecaption_utils.html#function-getCaptionFromImageModelElement). BREAKING CHANGE (image): The `matchImageCaption()` helper is now available as [`matchImageCaptionViewElement()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imagecaption_utils.html#function-matchImageCaptionViewElement). BREAKING CHANGE (image): The `defaultIcons` are now available as [`DEFAULT_ICONS`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imagestyle_utils.html#constant-DEFAULT_ICONS). BREAKING CHANGE (image): The `defaultStyles` are now available as [`DEFAULT_OPTIONS`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imagestyle_utils.html#constant-DEFAULT_OPTIONS). BREAKING CHANGE (image): The linked image indicator (icon) rendered as a `<span>` with the `.ck-link-image_icon` CSS class has been removed. To alter the look of the indicator (including the icon), please use `figure.image > a::after` (for linked block images) and `a span.image-inline::after` (for linked inline images) CSS selectors instead. BREAKING CHANGE (image): The `isImageWidget()` helper is no longer exposed by the [`Image`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_image-Image.html) plugin. BREAKING CHANGE (image): The API of common [image converters](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_image_converters.html) has changed. Please refer to the documentation to learn more. BREAKING CHANGE (image): The API of various [image caption utils](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imagecaption_utils.html) has changed. Please refer to the documentation to learn more. BREAKING CHANGE (image): The conversion helpers [`srcsetAttributeConverter()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_image_converters.html#function-srcsetAttributeConverter) and [`modelToViewAttributeConverter()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_image_converters.html#function-modelToViewAttributeConverter) now require the `imageType` parameter. BREAKING CHANGE (easy-image): The [`EasyImage`](https://ckeditor.com/docs/ckeditor5/latest/api/module_easy-image_easyimage-EasyImage.html) plugin is no longer automatically importing the [`Image`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_image-Image.html) plugin as a dependency. [Learn more](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-28.html#easyimage-plugin). BREAKING CHANGE (ckfinder): The [`CKFinder`](https://ckeditor.com/docs/ckeditor5/latest/api/module_ckfinder_ckfinder-CKFinder.html) plugin is no longer automatically importing the [`Image`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_image-Image.html) plugin as a dependency. [Learn more](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-28.html). BREAKING CHANGE (link): The `isImageAllowed()` helper is now available as [`isLinkableElement()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_link_utils.html#function-isLinkableElement). BREAKING CHANGE (media-embed): The API of the [`insertMedia()`](https://ckeditor.com/docs/ckeditor5/latest/api/module_media-embed_utils.html#function-insertMedia) helper has changed. See the documentation to learn more. BREAKING CHANGE (build-decoupled-document): The official [decoupled document](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-decoupled-document) build now ships with the [`ImageResize`](https://ckeditor.com/docs/ckeditor5/latest/api/module_image_imageresize-ImageResize.html) plugin enabled by default. [Learn more](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/migration/migration-to-28.html). BREAKING CHANGE (table): The in-cell pseudo-paragraph used for data tables is no longer styled using the inline `style` attribute but a `.ck-table-bogus-paragraph` CSS class instead. BREAKING CHANGE (widget): The `findOptimalInsertionPosition()` helper is now `findOptimalInsertionRange()` and returns a [model range](https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_model_range-Range.html). Also, instead of searching for a position next to the currently selected block, it will now attempt to replace that block (see #9102). BREAKING CHANGE (widget): The `checkSelectionOnObject()` helper is no longer part of the public API.
2 parents 7b89da0 + 55b86f8 commit 4c228fb

File tree

476 files changed

+17193
-5078
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

476 files changed

+17193
-5078
lines changed

‎CHANGELOG.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2118,7 +2118,7 @@ Other releases:
21182118

21192119
## [12.4.0](https://github.com/ckeditor/ckeditor5/compare/v12.3.1...v12.4.0) (2019-08-26)
21202120

2121-
This release brings a huge set of new features: [image resizing](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/image.html#resizing-images), [to-do lists](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/todo-lists.html), [support for RTL languages](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/ui-language.html), [simple upload adapter](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html), [support for pasting from Google Docs](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/paste-from-office/paste-from-google-docs.html), [mathematic formulas](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/mathtype.html), and [spelling and grammar checking](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/spell-checker.html). In addition to that, as always, it contains many improvements and bug fixes.
2121+
This release brings a huge set of new features: [image resizing](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/image.html#resizing-images), [to-do lists](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/todo-lists.html), [support for RTL languages](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/ui-language.html), [simple upload adapter](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/images/image-upload/simple-upload-adapter.html), [support for pasting from Google Docs](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/paste-from-office/paste-from-google-docs.html), [mathematic formulas](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/mathtype.html), and [spelling and grammar checking](https://ckeditor.com/ckeditor5/build/docs/ckeditor5/latest/features/spell-checker.html). In addition to that, as always, it contains many improvements and bug fixes.
21222122

21232123
Read more in the blog post: https://ckeditor.com/blog/CKEditor-5-v12.4.0-with-image-resizing-to-do-lists-RTL-language-support-and-more/
21242124

‎docs/_snippets/build-classic-source.js

+4
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,9 @@
66
/* globals window */
77

88
import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
9+
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';
10+
import AutoImage from '@ckeditor/ckeditor5-image/src/autoimage';
911

1012
window.ClassicEditor = ClassicEditor;
13+
ClassicEditor.builtinPlugins.push( ImageInsert );
14+
ClassicEditor.builtinPlugins.push( AutoImage );

‎docs/_snippets/examples/balloon-block-editor.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<h2>Taj Mahal: A breathtaking ode to love</h2>
33

44
<figure class="image image-style-side" height="400">
5-
<img src="%BASE_PATH%/assets/img/tajmahal.jpg" alt="Taj Mahal illustration.">
5+
<img src="%BASE_PATH%/assets/img/tajmahal.jpg" srcset="%BASE_PATH%/assets/img/tajmahal.jpg, %BASE_PATH%/assets/img/tajmahal_2x.jpg 2x" alt="Taj Mahal illustration.">
66
<figcaption>Taj Mahal with its poetic white marble tomb</figcaption>
77
</figure>
88

‎docs/_snippets/examples/classic-editor.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ <h2>The three greatest things you learn from traveling</h2>
33

44
<p>Like all the great things on earth traveling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of traveling.</p>
55

6-
<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/volcano.jpg" alt="A lone wanderer looking at Mount Bromo volcano in Indonesia.">
6+
<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/volcano.jpg" srcset="%BASE_PATH%/assets/img/volcano.jpg, %BASE_PATH%/assets/img/volcano_2x.jpg 2x" alt="A lone wanderer looking at Mount Bromo volcano in Indonesia.">
77
<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
88
</figure>
99

@@ -25,7 +25,7 @@ <h3>Improvisation</h3>
2525
<li>start your adventure</li>
2626
</ul>
2727

28-
<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/umbrellas.jpg" alt="Three Monks walking on ancient temple.">
28+
<figure class="image image-style-side"><img src="%BASE_PATH%/assets/img/umbrellas.jpg" srcset="%BASE_PATH%/assets/img/umbrellas.jpg, %BASE_PATH%/assets/img/umbrellas_2x.jpg 2x" alt="Three Monks walking on ancient temple.">
2929
<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
3030
</figure>
3131

‎docs/_snippets/examples/document-editor.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ <h3 style="text-align:center;">Welcome letter</h3>
77

88
<p>Dear Guest,</p>
99
<p>We are delighted to welcome you to the annual <i>Flavorful Tuscany Meetup</i> and hope you will enjoy the programme as well as your stay at the <a href="http://ckeditor.com">Bilancino Hotel</a>.</p>
10+
<figure class="image"><img src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img//malta_2x.jpg 2x" alt="Bilancino Hotel" /><figcaption>Bilancino Hotel</figcaption></figure>
1011
<p>Please find below the full schedule of the event.</p>
1112

1213
<figure class="table">
@@ -52,7 +53,7 @@ <h3 style="text-align:center;">Welcome letter</h3>
5253
<p>Please arrive at the <a href="http://ckeditor.com">Bilancino Hotel</a> reception desk <span style="background-color:hsl(60, 75%, 60%)">at least half an hour earlier</span> to make sure that the registration process goes as smoothly as possible.</p>
5354

5455
<p>We look forward to welcoming you to the event.</p>
55-
56+
<p><img class="image_resized" style="width: 180px;" src="https://c.cksource.com/a/1/img/docs/signature.png" alt="Victoria Valc signature" /></p>
5657
<p><strong>Victoria Valc</strong></p>
5758
<p><strong>Event Manager</strong></p>
5859
<p><strong>Bilancino Hotel</strong></p>

‎docs/_snippets/examples/document-editor.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,11 @@
66
/* globals console, window, document */
77

88
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document/src/ckeditor';
9-
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
109
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
1110

1211
DecoupledEditor
1312
.create( document.querySelector( '.document-editor__editable' ), {
14-
extraPlugins: [ ImageResize ],
15-
cloudServices: CS_CONFIG,
16-
image: {
17-
toolbar: [ 'imageTextAlternative', '|', 'imageStyle:alignLeft', 'imageStyle:full', 'imageStyle:alignRight' ]
18-
}
13+
cloudServices: CS_CONFIG
1914
} )
2015
.then( editor => {
2116
const toolbarContainer = document.querySelector( '.document-editor__toolbar' );

‎docs/_snippets/examples/inline-editor.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ <h3>Destination of the Month</h3>
1010
<h4>Valletta</h4>
1111

1212
<figure class="image image-style-align-right" style="width: 50%;">
13-
<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg">
13+
<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x">
1414
<figcaption>It's siesta time in Valletta.</figcaption>
1515
</figure>
1616

‎docs/_snippets/examples/inline-editor.js

+4-25
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
/* globals console, window, document */
77

88
import InlineEditor from '@ckeditor/ckeditor5-build-inline/src/ckeditor';
9-
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
109
import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
1110

1211
const inlineInjectElements = document.querySelectorAll( '#snippet-inline-editor [data-inline-inject]' );
@@ -34,33 +33,13 @@ Array.from( inlineInjectElements ).forEach( inlineElement => {
3433
];
3534
config.toolbar.items = [ 'heading', '|', 'bold', 'italic', 'link' ];
3635
} else {
37-
config.extraPlugins = [ ImageResize ];
3836
config.image = {
39-
resizeOptions: [
40-
{
41-
name: 'resizeImage:original',
42-
label: 'Original',
43-
value: null
44-
},
45-
{
46-
name: 'resizeImage:50',
47-
label: '50%',
48-
value: '50'
49-
},
50-
{
51-
name: 'resizeImage:75',
52-
label: '75%',
53-
value: '75'
54-
}
55-
],
56-
styles: [ 'full', 'alignLeft', 'alignRight' ],
5737
toolbar: [
58-
'imageStyle:alignLeft',
59-
'imageStyle:full',
60-
'imageStyle:alignRight',
61-
'|',
62-
'resizeImage',
38+
'imageStyle:inline',
39+
'imageStyle:wrapText',
40+
'imageStyle:breakText',
6341
'|',
42+
'toggleImageCaption',
6443
'imageTextAlternative'
6544
]
6645
};

‎docs/_snippets/examples/multi-root-editor.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ <h3>Destination of the Month</h3>
1212
<h4>Valletta</h4>
1313

1414
<figure class="image image-style-side">
15-
<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg">
15+
<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x">
1616
<figcaption>It's siesta time in Valletta.</figcaption>
1717
</figure>
1818

‎docs/_snippets/examples/multi-root-editor.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -397,9 +397,9 @@ MultirootEditor
397397
'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'uploadImage', 'blockQuote',
398398
'insertTable', 'mediaEmbed', 'undo', 'redo' ],
399399
image: {
400-
toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full',
401-
'imageStyle:side' ],
402-
styles: [ 'full', 'side' ]
400+
toolbar: [
401+
'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative'
402+
]
403403
},
404404
table: {
405405
contentToolbar: [

‎docs/_snippets/features/mathtype.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,12 @@ ClassicEditor
4848
viewportTopOffset: window.getViewportTopOffsetConfig()
4949
},
5050
image: {
51-
styles: [
52-
'full',
53-
'alignLeft',
54-
'alignRight'
55-
],
5651
toolbar: [
57-
'imageStyle:alignLeft',
58-
'imageStyle:full',
59-
'imageStyle:alignRight',
52+
'imageStyle:inline',
53+
'imageStyle:wrapText',
54+
'imageStyle:breakText',
6055
'|',
56+
'toggleImageCaption',
6157
'imageTextAlternative'
6258
]
6359
},

‎docs/_snippets/features/toolbar-breakpoint.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ ClassicEditor
2727
viewportTopOffset: window.getViewportTopOffsetConfig()
2828
},
2929
image: {
30-
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
30+
toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
3131
},
3232
codeBlock: {
3333
languages: [

‎docs/_snippets/features/toolbar-grouping.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ ClassicEditor
2323
viewportTopOffset: window.getViewportTopOffsetConfig()
2424
},
2525
image: {
26-
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
26+
toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
2727
},
2828
codeBlock: {
2929
languages: [

‎docs/_snippets/features/toolbar-wrapping.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ ClassicEditor
2828
viewportTopOffset: window.getViewportTopOffsetConfig()
2929
},
3030
image: {
31-
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
31+
toolbar: [ 'imageStyle:inline', 'imageStyle:full', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]
3232
},
3333
codeBlock: {
3434
languages: [

‎docs/_snippets/features/wproofreader.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -48,16 +48,12 @@ ClassicEditor
4848
viewportTopOffset: window.getViewportTopOffsetConfig()
4949
},
5050
image: {
51-
styles: [
52-
'full',
53-
'alignLeft',
54-
'alignRight'
55-
],
5651
toolbar: [
57-
'imageStyle:alignLeft',
58-
'imageStyle:full',
59-
'imageStyle:alignRight',
52+
'imageStyle:inline',
53+
'imageStyle:wrapText',
54+
'imageStyle:breakText',
6055
'|',
56+
'toggleImageCaption',
6157
'imageTextAlternative'
6258
]
6359
},

‎docs/assets/img/fields.jpg

-18.5 KB
Loading

‎docs/assets/img/fields_2x.jpg

106 KB
Loading

‎docs/assets/img/malta.jpg

-109 KB
Loading

‎docs/assets/img/malta_2x.jpg

106 KB
Loading

‎docs/assets/img/tajmahal.jpg

-261 KB
Loading

‎docs/assets/img/tajmahal_2x.jpg

186 KB
Loading

‎docs/assets/img/umbrellas.jpg

16.9 KB
Loading

‎docs/assets/img/umbrellas_2x.jpg

136 KB
Loading

‎docs/assets/img/volcano.jpg

-23.3 KB
Loading

‎docs/assets/img/volcano_2x.jpg

139 KB
Loading

‎docs/assets/snippet-styles.css

+2
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,11 @@
2828
margin-top: 0;
2929
}
3030

31+
/*
3132
.ck.ck-content > :not(.ck-fake-selection-container):last-of-type {
3233
margin-bottom: 0;
3334
}
35+
*/
3436

3537
/* Override default Umberto's styles because they apply margins to media embed widgets with iframe
3638
previews breaking their structure. */

‎docs/builds/guides/development/dll-builds.md

+2
Original file line numberDiff line numberDiff line change
@@ -125,9 +125,11 @@ For example:
125125
},
126126
image: {
127127
toolbar: [
128+
'imageStyle:inline',
128129
'imageStyle:full',
129130
'imageStyle:side',
130131
'|',
132+
'toggleImageCaption',
131133
'imageTextAlternative'
132134
]
133135
},

‎docs/builds/guides/development/plugins.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ order: 20
1212

1313
Features in CKEditor are introduced by plugins. In fact, without plugins CKEditor is an empty API with no use. The builds provided with CKEditor 5 are actually predefined collections of plugins, put together to satisfy specific needs.
1414

15-
Plugins provided by the CKEditor core team are available in [npm](https://www.npmjs.com/search?q=ckeditor5) (and [GitHub](https://github.com/ckeditor?utf8=%E2%9C%93&q=ckeditor5&type=&language=), too) in form of npm packages. A package may contain one or more plugins (e.g. the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package contains {@link features/image several granular plugins}).
15+
Plugins provided by the CKEditor core team are available in [npm](https://www.npmjs.com/search?q=ckeditor5) (and [GitHub](https://github.com/ckeditor?utf8=%E2%9C%93&q=ckeditor5&type=&language=), too) in form of npm packages. A package may contain one or more plugins (e.g. the [`@ckeditor/ckeditor5-image`](https://www.npmjs.com/package/@ckeditor/ckeditor5-image) package contains {@link features/images-overview several granular plugins}).
1616

1717
## Common use cases
1818

‎docs/builds/guides/faq.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ By default, CKEditor 5 has no global registry of editor instances. But if necess
7272

7373
## How to enable image drag&drop and upload? Where should I start?
7474

75-
The {@link features/image Image} and {@link features/image-upload Image upload} features are enabled by default in all editor builds. However, to fully enable image upload when installing CKEditor 5 you need to configure one of the available upload adapters. Check out the {@link features/image-upload comprehensive "Image upload" guide} to find out the best image upload strategy for your project.
75+
The {@link features/images-overview Image} and {@link features/image-upload Image upload} features are enabled by default in all editor builds. However, to fully enable image upload when installing CKEditor 5 you need to configure one of the available upload adapters. Check out the {@link features/image-upload comprehensive "Image upload" guide} to find out the best image upload strategy for your project.
7676

7777
## How to use CKEditor 5 with frameworks (Angular, React, Vue, etc.)?
7878

‎docs/builds/guides/integration/advanced-setup.md

+4
Original file line numberDiff line numberDiff line change
@@ -265,9 +265,11 @@ ClassicEditor.defaultConfig = {
265265
},
266266
image: {
267267
toolbar: [
268+
'imageStyle:inline',
268269
'imageStyle:full',
269270
'imageStyle:side',
270271
'|',
272+
'toggleImageCaption',
271273
'imageTextAlternative'
272274
]
273275
},
@@ -351,9 +353,11 @@ ClassicEditor
351353
],
352354
image: {
353355
toolbar: [
356+
'imageStyle:inline',
354357
'imageStyle:full',
355358
'imageStyle:side',
356359
'|',
360+
'toggleImageCaption',
357361
'imageTextAlternative'
358362
]
359363
}

‎docs/builds/guides/integration/content-styles.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ order: 80
99

1010
# Content styles
1111

12-
Some of the {@link features/index core editor features} bring additional CSS to control the look of the content they produce. Take, for example, the {@link features/image image feature} that needs special content styles to render images and their captions in the content. Or the {@link module:block-quote/blockquote~BlockQuote block quote} feature that displays quotes in italic with a subtle border on the side.
12+
Some of the {@link features/index core editor features} bring additional CSS to control the look of the content they produce. Take, for example, the {@link features/images-overview image feature} that needs special content styles to render images and their captions in the content. Or the {@link module:block-quote/blockquote~BlockQuote block quote} feature that displays quotes in italic with a subtle border on the side.
1313

1414
{@img assets/img/builds-content-styles.png 823 Editor content styles.}
1515

0 commit comments

Comments
 (0)