When using Drupal 11.2 with CKEditor5, inserting more than 2 images via the "Insert image from URL" option (core image plugin) triggers a JavaScript error and breaks further image insertion.

  1. Install a fresh Drupal 11.2.3 site with PHP 8.3.19.
  2. Go to Configuration → Content Authoring → Text formats and editors.
  3. Edit a text format (e.g., “Full HTML”).
  4. Under the Image tab, uncheck "Enable image uploads" to reveal the "Insert image via URL" button in CKEditor.
  5. Create new content.
  6. Type some text into the CKEditor body.
  7. Use the "Insert image via URL" button to insert 2 images (one by one).

    → works fine.
  8. Try to insert a third image via URL.

    → Nothing happens. Doesn't open a pop-up to insert the image view URL, and shows an error in the console.

Proposed resolution

  • Investigate CKEditor 5 integration code for how the "Insert image via URL" form is managed.
  • Ensure the balloon panel view removal is only attempted if it exists.
  • Consider upstream CKEditor 5 patch if this originates in their plugin.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#8 drupal-ckeditor-issue.gif9.29 MBa6hijeet
#4 drupal11-ckeditor5-editor2.png267.35 KBa6hijeet
#4 drupal11-ckeditor5-editor.png235 KBa6hijeet
drupal11-ckeditor5-issue.png48.79 KBa6hijeet

Issue fork drupal-3540967

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

abhijeetsatpute created an issue. See original summary.

a6hijeet’s picture

a6hijeet commented
Issue summary: View changes
cilefen’s picture

cilefen commented
Issue tags: -JavaScript, -ckeditor5, -multipleimageupload +Needs issue summary update

I can't reproduce this on the 11.x branch. Possibly steps 7 and 8 need refinement.

a6hijeet’s picture

a6hijeet commented
StatusFileSize
new drupal11-ckeditor5-editor.png235 KB
new drupal11-ckeditor5-editor2.png267.35 KB

I am on Fresh Drupal 11.2.3 without any contrib modules
Just adding the steps here to reproduce the issue

  1. Type any text into the body field. (e.g., “Test paragraph”)
  2. Use the Insert image via URL button to insert an image → works fine.
  3. Use the Insert image via URL button to insert a second image → works fine but shows error in console

    Uncaught CKEditorError: contextualballoon-remove-view-not-exist

  4. Use the Insert image via URL button to insert a third image. → Nothing will happen, but you will see another error in the console

    Uncaught CKEditorError: collection-remove-404

cilefen’s picture

cilefen commented

That is what I did but there were not errors.

a6hijeet’s picture

a6hijeet commented

Ah, Ok Thanks for checking.

I retested, and I am still able to reproduce it with the same step in another fresh installation.

The behaviour occurs in Chrome (Version 139.0.7258.67) and Edge (Version 139.0.3405.86), but I could not reproduce it in Firefox (141.0.3)

quietone’s picture

quietone commented
Version: 11.2.x-dev » 11.x-dev
Issue summary: View changes

@abhijeetsatpute, can you confirm this happens on 11.x ?

In Drupal core changes are made on on 11.x (our main development branch) first, and are then back ported as needed according to the Core change policies. Also mentioned on the version section of the list of issue fields documentation. Thanks.

a6hijeet’s picture

a6hijeet commented
StatusFileSize
new drupal-ckeditor-issue.gif9.29 MB

Yes, I can confirm this issue happens on the latest 11.x development branch as well.
Behaviour pattern:

  • If I insert images without adding any text, I can insert multiple images without issue.
  • If I add text above and then insert images, only two images can be inserted successfully.
  • After saving the content, if I edit again and try to insert images, the same limitation occurs — only two images can be inserted.

a6hijeet’s picture

a6hijeet commented

It seems the contextual balloon is being removed unexpectedly after the second successful insert, which prevents the insert form from opening again.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

quietone commented
Title: CKEditor5: "contextualballoon-remove-view-not-exist" error when inserting multiple images via URL in core image plugin » "contextualballoon-remove-view-not-exist" error when inserting multiple images via URL in core image plugin

I was not able to reproduce this on 11.x with Firefox (140.10.2ESR)

I was able to reproduce this on Thorium, Version 138.0.7204.303 (Official Build) stable, built on Ubuntu (AVX) (64-bit), on 11.x and on main.