|
@@ -98,81 +98,6 @@ Check it out in this short demo:
|
|
|
|
|
|
|
|
{@snippet features/image-insert-via-url}
|
|
{@snippet features/image-insert-via-url}
|
|
|
|
|
|
|
|
-### How to add integrations
|
|
|
|
|
-
|
|
|
|
|
-By default, this feature doesn't need any configuration. You will get a dropdown button, where the main action (icon button) will open a native file dialog and the arrow button will open a dropdown with **Insert image via url** feature.
|
|
|
|
|
-
|
|
|
|
|
-#### CKFinder
|
|
|
|
|
-
|
|
|
|
|
-The integration with {@link module:ckfinder/ckfinder~CKFinder} in that dropdown is also supported, but it needs to be configured.
|
|
|
|
|
-
|
|
|
|
|
-Use this method to do this:
|
|
|
|
|
-
|
|
|
|
|
-```js
|
|
|
|
|
-ClassicEditor
|
|
|
|
|
- .create( document.querySelector( '#editor' ), {
|
|
|
|
|
- // ...
|
|
|
|
|
- image: {
|
|
|
|
|
- // ...
|
|
|
|
|
- upload: {
|
|
|
|
|
- panel: {
|
|
|
|
|
- items: [
|
|
|
|
|
- 'insertImageViaUrl',
|
|
|
|
|
- // Add CKFinder predefined token.
|
|
|
|
|
- 'openCKFinder'
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- ckfinder: {
|
|
|
|
|
- uploadUrl: ... // CKFinder upload URL.
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
-```
|
|
|
|
|
-
|
|
|
|
|
-Observe that a new `{@link module:image/imageupload~ImageUploadPanelConfig#items image.upload.panel.items}` configuration defines the desired built-in integrations. Both strings (`insertImageViaUrl` and `openCKFinder`) are special tokens that the `{@link module:image/imageupload~ImageUpload}` plugin understands.
|
|
|
|
|
-
|
|
|
|
|
-Below you can see the demo with built-in CKFinder integration:
|
|
|
|
|
-
|
|
|
|
|
-{@snippet features/image-insert-via-url-integrations}
|
|
|
|
|
-
|
|
|
|
|
-#### Custom integrations
|
|
|
|
|
-
|
|
|
|
|
-If you would want to add your own integration, based on your own plugin ({@link framework/guides/creating-simple-plugin see how to create one}), you have to add that plugin to the editor first and then — like in the configuration from the previous section — you should add your integration component's name (the same you used in the `{@link module:ui/componentfactory~ComponentFactory#add}` when you registered the button) to the `{@link module:image/imageupload~ImageUploadPanelConfig#items}` array.
|
|
|
|
|
-
|
|
|
|
|
-Here's an example:
|
|
|
|
|
-
|
|
|
|
|
-```js
|
|
|
|
|
-// Import your custom plugin.
|
|
|
|
|
-import PluginX from 'pluginX'
|
|
|
|
|
-
|
|
|
|
|
-ClassicEditor
|
|
|
|
|
- .create( document.querySelector( '#editor' ), {
|
|
|
|
|
- // Add your custom plugin to the editor's plugins.
|
|
|
|
|
- plugins: [ Image, ImageToolbar, ImageUpload, PluginX ],
|
|
|
|
|
- image: {
|
|
|
|
|
- upload: {
|
|
|
|
|
- panel: {
|
|
|
|
|
- items: [
|
|
|
|
|
- 'insertImageViaUrl',
|
|
|
|
|
- 'openCKFinder',
|
|
|
|
|
- // Use the plugin's registered component.
|
|
|
|
|
- 'pluginXButton'
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- } )
|
|
|
|
|
- .then( ... )
|
|
|
|
|
- .catch( ... );
|
|
|
|
|
-```
|
|
|
|
|
-
|
|
|
|
|
-<info-box>
|
|
|
|
|
-Keep in mind that the order of the integrations in the configuration affects the options order in the `{@link module:image/imageupload/ui/imageuploadpanelview~ImageUploadPanelView#dropdownView}`. Therefore you will have: the **Insert image via URL** form, next **CKFinder** button and then your custom component for **PluginX** in the dropdown panel view.
|
|
|
|
|
-
|
|
|
|
|
-You can always change that order if you need by changing the order of the integrations.
|
|
|
|
|
-</info-box>
|
|
|
|
|
-
|
|
|
|
|
## Responsive images
|
|
## Responsive images
|
|
|
|
|
|
|
|
Support for responsive images in CKEditor 5 is brought by the {@link features/easy-image Easy Image} feature without any additional configuration. Refer to the {@link features/easy-image#responsive-images Easy Image integration} guide to learn how to use the feature in your project.
|
|
Support for responsive images in CKEditor 5 is brought by the {@link features/easy-image Easy Image} feature without any additional configuration. Refer to the {@link features/easy-image#responsive-images Easy Image integration} guide to learn how to use the feature in your project.
|