5

I'm trying to insert images solely by url. In CKEditor 5 there is this feature but I'm not sure how can I make the img icon-button open modal to enter url.

this is what I have for now inside CKEditor component config

 config={{
      toolbar: ['imageUpload'],
      image: {
        // ...
        upload: {
          panel: {
            items: ['insertImageViaUrl'],
          },
        },
      },
    }}

As shown in image below I can upload via url after clicking dropdown menu but more precisely I would like to swap image upload functionality with upload by url functionality from dropdown

enter image description here

Improve this question
1

3 Answers 3

Reset to default
4

Use the ImageInsertViaUrl plugin. It will only allow URLs.

Pull request: https://github.com/ckeditor/ckeditor5/pull/11980

plugins: ['ImageInsertViaUrl']
toolbar: ['insertImage']
Improve this answer
4
  • 1
    I've tried this but it doesn't work. The behavior is still the same. I suspect that these plugins shadow each other but they are also interdependent.
    – Jasper van den Bosch
    Commented Jan 7, 2023 at 12:34
  • 1
    This solution works. Too bad it's missing from their documentation. To make it work, I'm adding Image and ImageInsertViaUrl in the plugin array (and only those images plugins, do not add the ImageInsert plugin). In the toolbar, I'm adding insertImage. The result is an image button with the dropdown, which looks a bit weird, but when you click on it, you can only add an image via a URL.
    – Link14
    Commented Mar 22, 2023 at 16:16
  • 1
    Saved my day! You can add the "AutoImage" plugin as well to paste the URL directly in the editor
    – Ferdi Louwerse
    Commented Mar 23, 2023 at 5:18
  • Saved my day too! It's odd that the CKEditor docs page for this feature has a demo that only shows the url link option, but they don't give the sample code (or at least I couldn't find it). They must be using the above config though. ckeditor.com/docs/ckeditor5/latest/features/images/…
    – cakidnyc
    Commented Apr 20 at 2:10
0

Using the URL of an image, the user may easily paste it into the editor. In order to enable this option, install the ImageInsert plugin and add the insertImage toolbar item to the toolbar (it replaces the standard uploadImage button).

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

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ... , ImageInsert ],
        toolbar: [ ... , 'insertImage' ]
    } )

This will add a new Insert image dropdown Insert image in the toolbar. To upload the image, click on the image icon. To open the panel and add the image URL, click the arrow next to the image button. Check the demo below to insert a new image via URL or update an existing image by selecting it, opening the dropdown panel and pasting a new URL.

Source => https://cutt.ly/vMU5Ey1

Improve this answer
1
  • 2
    This is as shown in the question. But the question is how to disable the upload option; such that pressing the button directly will open the URL dialog, not the upload dialog, as in certain scenarios, you want to disable this option (if you don't want to host the images)
    – Jasper van den Bosch
    Commented Nov 18, 2022 at 12:31
-1

The Image plugin registers:

The insertImage command that accepts a source (e.g. a URL) of an image to insert. The ImageUpload plugin registers:

The uploadImage that opens the native file browser to let you upload a file directly from your disk (to use in the image toolbar). The uploadImage command that accepts the file to upload.

Improve this answer
1
  • 1
    This is not an answer.
    – Anonymous Guy
    Commented Nov 20, 2022 at 16:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.