Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

i/8034: Change the API and docs for ImageInsert plugin. #8090

Merged
merged 5 commits into from
Sep 17, 2020
Merged

i/8034: Change the API and docs for ImageInsert plugin. #8090

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5fbb72c
Change the docs for ImageInsert plugin.
panr Sep 16, 2020
d946181
Update packages/ckeditor5-image/src/imageinsert.js
panr Sep 16, 2020
ff1b532
Merge branch 'master' into i/8034
Reinmar Sep 17, 2020
144a080
Clarified the docs a bit.
Reinmar Sep 17, 2020
86849d6
Fix the grammar.
Reinmar Sep 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions packages/ckeditor5-image/docs/_snippets/features/image-insert-via-url.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,7 @@ ClassicEditor
viewportTopOffset: window.getViewportTopOffsetConfig()
},
image: {
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
upload: {
panel: {
items: [ 'insertImageViaUrl' ]
}
}
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
},
cloudServices: CS_CONFIG
} )
Expand Down
12 changes: 2 additions & 10 deletions packages/ckeditor5-image/docs/features/image.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,23 +87,15 @@ See the {@link features/image-upload Image upload} guide.

Besides the ability to insert images by uploading them directly from your disk or via CKFinder, you can also configure CKEditor 5 to allow inserting images via source URL.

In order to enable this option, install the `ImageInsert` plugin and configure {@link module:image/imageupload~ImageUploadPanelConfig#items `image.upload.panel.items`} like below:
In order to enable this option, install the `ImageInsert` plugin and adding the `imageInsert` button to the toolbar (it replaces the standard `imageUpload` button).
Reinmar marked this conversation as resolved.
Show resolved Hide resolved

```js
import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';

ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ ... , ImageInsert ],
toolbar: [ ... , 'imageInsert' ],
image: {
// ...
upload: {
panel: {
items: [ 'insertImageViaUrl' ]
}
}
}
toolbar: [ ... , 'imageInsert' ]
} )
```

Expand Down
31 changes: 14 additions & 17 deletions packages/ckeditor5-image/src/imageinsert.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,10 @@ export default class ImageInsert extends Plugin {
}

/**
* Image insert panel view configuration.
* **NOTE:** Currently the panel settings are configurable through the `image.upload` property.
* The image insert configuration.
*
* @protected
* @member {module:image/imageupload~ImageUploadPanelConfig} module:image/imageupload~ImageUploadConfig#panel
* @member {module:image/imageinsert~ImageInsertConfig} module:image/image~ImageConfig#insert
*/

/**
Expand All @@ -55,8 +54,8 @@ export default class ImageInsert extends Plugin {
* ClassicEditor
* .create( editorElement, {
* image: {
* upload: {
* panel: ... // panel settings for "imageInsert" view goes here
* insert: {
* ... // settings for "imageInsert" view goes here
* }
* }
* } )
Expand All @@ -66,11 +65,11 @@ export default class ImageInsert extends Plugin {
* See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
*
* @protected
* @interface module:image/imageupload~ImageUploadPanelConfig
* @interface module:image/imageinsert~ImageInsertConfig
*/

/**
* The list of {@link module:image/imageinsert~ImageInsert} integrations.
* The image insert panel view configuration contains a list of {@link module:image/imageinsert~ImageInsert} integrations.
*
* The option accepts string tokens.
* * for predefined integrations, we have two special strings: `insertImageViaUrl` and `openCKFinder`.
Expand All @@ -81,18 +80,16 @@ export default class ImageInsert extends Plugin {
* in that case should be `pluginXButton`.
*
* // Add `insertImageViaUrl`, `openCKFinder` and custom `pluginXButton` integrations.
* const imageUploadConfig = {
* upload: {
* panel: {
* items: [
* 'insertImageViaUrl',
* 'openCKFinder',
* 'pluginXButton'
* ]
* }
* const imageInsertConfig = {
* insert: {
* integrations: [
* 'insertImageViaUrl',
* 'openCKFinder',
* 'pluginXButton'
* ]
* }
* };
*
* @member {Array.<String>} module:image/imageupload~ImageUploadPanelConfig#items
* @member {Array.<String>} module:image/imageinsert~ImageInsertConfig#integrations
* @default [ 'insertImageViaUrl' ]
*/
2 changes: 1 addition & 1 deletion packages/ckeditor5-image/src/imageinsert/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/
* @returns {Object.<String, module:ui/view~View>} Integrations object.
*/
export function prepareIntegrations( editor ) {
const panelItems = editor.config.get( 'image.upload.panel.items' );
const panelItems = editor.config.get( 'image.insert.integrations' );
const imageInsertUIPlugin = editor.plugins.get( 'ImageInsertUI' );

const PREDEFINED_INTEGRATIONS = {
Expand Down
22 changes: 9 additions & 13 deletions packages/ckeditor5-image/tests/imageinsert/imageinsertui.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,10 @@ describe( 'ImageInsertUI', () => {
plugins: [ Paragraph, Image, ImageInsert, ImageInsertUI, FileRepository, UploadAdapterPluginMock, Clipboard ],
toolbar: [ 'imageInsert' ],
image: {
upload: {
panel: {
items: [
'insertImageViaUrl'
]
}
insert: {
integrations: [
'insertImageViaUrl'
]
}
}
} )
Expand Down Expand Up @@ -296,13 +294,11 @@ describe( 'ImageInsertUI', () => {
Clipboard
],
image: {
upload: {
panel: {
items: [
'insertImageViaUrl',
'openCKFinder'
]
}
insert: {
integrations: [
'insertImageViaUrl',
'openCKFinder'
]
}
}
} );
Expand Down
34 changes: 14 additions & 20 deletions packages/ckeditor5-image/tests/imageinsert/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,11 @@ describe( 'Upload utils', () => {
ImageUploadUI
],
image: {
upload: {
panel: {
items: [
'insertImageViaUrl',
'openCKFinder'
]
}
insert: {
integrations: [
'insertImageViaUrl',
'openCKFinder'
]
}
}
} );
Expand Down Expand Up @@ -64,13 +62,11 @@ describe( 'Upload utils', () => {
ImageUploadUI
],
image: {
upload: {
panel: {
items: [
'insertImageViaUrl',
'openCKFinder'
]
}
insert: {
integrations: [
'insertImageViaUrl',
'openCKFinder'
]
}
}
} );
Expand All @@ -94,12 +90,10 @@ describe( 'Upload utils', () => {
ImageUploadUI
],
image: {
upload: {
panel: {
items: [
'link'
]
}
insert: {
integrations: [
'link'
]
}
}
} );
Expand Down
12 changes: 5 additions & 7 deletions packages/ckeditor5-image/tests/manual/imageinsertviaurl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,11 @@ ClassicEditor
],
image: {
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ],
upload: {
panel: {
items: [
'insertImageViaUrl',
'openCKFinder'
]
}
insert: {
integrations: [
'insertImageViaUrl',
'openCKFinder'
]
}
},
ckfinder: {
Expand Down
10 changes: 4 additions & 6 deletions tests/manual/all-features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,12 +97,10 @@ ClassicEditor
'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight', '|',
'imageResize'
],
upload: {
panel: {
items: [
'insertImageViaUrl'
]
}
insert: {
integrations: [
'insertImageViaUrl'
]
}
},
placeholder: 'Type the content here!',
Expand Down