CKEditor 5 compatibility

I did not participate in the development of the Drupal 6 and 7 versions of the module, but when I recoded the module for Drupal 8, I remember the Media Library integration was not yet there, or not yet stable. Since then, the module was basically just maintained.

What the module does, is best explained by the screenshot on the module page: It allows inserting an image uploaded to an image field into an editor on the same node edit form. That's the basic purpose.

Of course things have changed, and I myself will most likely not use the Insert module in the future anymore. Instead of spending the time to recode the CKEditor implementation from version 4 to 5, I will rather switch to using core's Media Library integration for the one and a half Drupal instances I am maintaining. For my use case, the Media Library integration offers a better feature set.

That said, I could still imagine use cases for this module for organisational or permission purposes. Like maybe if you want to store images to be used in the editor along with the node instead of in the central Media Library. (Maybe that is even supported by the Media Library integration somehow, without me being aware.) Either way, at this point, I don't find the time necessary to maintain this module and it's unlikely I will manage to convert the module to CKEditor 5 anytime soon.

The module, however, was coded with at least having modularity in mind regarding the editor (yet it never came to the point that someone would attach another editor than the default CKEditor). For all the JS side functionality, most porting work should be done by replacing js/editors/CKEditor.js. However, that might proof to not be sufficient as the modularity was never put to the test, and there is surely work to be done on the PHP side as well.
I'll happily add someone who is eager to adapt the module to CKEditor 5 as a maintainer.

Unfortunatly, there is no way with media library to handle colorbox image styles (or any image styles) by de media upload. Deleting inserted images from the editor also don't delete it from the media librairy, wich insert was good at because the images were uploaded in an image field. Unfortunatly, Insert provide functionality that are not in any other module or addon for handling images in ckeditor. Hope someone will look at this and be willing to port insert to D9 CKEditor 5...

Since it is a prerequisite for me to use image styles on the images inserted into the body, I had to figure this out using the Media module. Although the UX is not good, it is possible:

What I did is adding view modes on the image media for each image style I would like images to be inserted with. Each view mode is assigned a corresponding image style. These view modes then need to be enabled in the relevant text format configuration.
Now, an image can be placed using the Media Library button in the CKEditor toolbar. After placing, the "Edit media" button next to the image will need to be clicked in order to change the view mode that corresponds to an image style. Here is a good video with more elaborate instructions: https://youtu.be/JuCbL8g96Iw
Overriding a specific view mode template, it should be possible to also insert the structure required for Colorbox.

However, while the UX of the Insert module is not perfect, so far it's still better than using the Media Library for tasks like applying image styles on inserted images. Activating the Media Library, images can be placed in any editor / body field which is not what I would prefer to be possible. Also, the view modes added for the image might not be desired to show up when using the Media Library for placing entities other than images. And then of course the UX of having to adjust the view mode after inserting the image, instead of at the moment of inserting, is problematic. I also agree to what is mentioned, that it might also not be desired to have images stored centrally in the library, but rather have them uploaded and managed on node level.

While I took the bite of compromising on the UX by using the Media module, I can certainly see reasons for the Insert module to continue existing at this point.

I really hope you will update this module to support CKEditor 5 and Drupal 10. We use it constantly and the media library doesn't meet our needs. One, the media library adds all sorts of text and formatting to the file it inserts in the editor. We need just plain text with the embedded URL. Also, the media library limits the file types that you can upload. We need to be able to upload all sorts of file types (we have two intranets). The Insert module is dead simple which is what I need because most of my users are not tech-savvy.

I'll also add my voice here -- let's hope that the support for the insert module will remain. For example, I've been putting up my creations since Drupal 5, node number shows over 800. I'd really hate the attitude that I should until retirement and then go through all this stuff manually...

We have been using the Insert module since Drupal 7, currently running Drupal 9. I just found out the hard way that compatibility with CKEditor 5 isn't present while migrating deprecated modules on 9.5.7 in preparation for EOL (November 2023), and eventual transition to Drupal 10.

Insert is one of the best modules available and I'm very surprised it hasn't been incorporated into Core. Heck, I don't even want to think about what will break if I disable the Insert module, not too sure what we'll even do if compatibility with CKEditor 5 isn't available.

The Insert module is dead simple which is what I need because most of my users are not tech-savvy.

I absolutely agree with that statement. On point. 🙂

Drupal 10 by itself is probably not so much of a problem, I made a patch on the separate issue 📌 Drupal 10 compatibility Fixed , but the switch to CKEditor 5 is. For now, anyone upgrading to Drupal 10 could install the CKEditor 4 legacy module → along with that patch (which will eventually be released in a separate new major version), but that is not a sustainable solution of course.

Unfortunately, the module is currently maintained by me only, and I'm just spending my spare time on it. 🙈 It would be nice to keep the module alive, not just because I put in a lot of effort to create the Drupal 8 version, but because I still see a valid purpose of the module, yet it's not a situation to make promises.

The Insert module is kind of an interface between Drupal core's field widgets and CKEditor. So far, I had been most struggling with documentation on the Drupal side in terms of the CKEditor integration. I had tried rebuilding on top of the starter template of the CKEditor 5 Dev Tools module → , but there was no success back then. It's cumbersome scanning through core's source code figuring out how to interact with CKEditor instances from the Drupal environment.

@Snater first and foremost, I, along with many others appreciate your efforts.

All are valid points. Especially regarding sustainability, as sites using the current Insert module will eventually need to uninstall or choose to stay stagnate by not upgrading to Drupal 10 and beyond (very bad decision).

I personally do not have the skillset to aid in the development, but if anyone else out there can assist, or has a friend that may be interested, please get in touch with Snater. On a positive note, there are still 7 months to come up with a solution.

Hi,

I have the Drupal version 7.80, Though the Drupal 7.x is EOL is extended to Jan 5 2025. Wanted to have the clarity on the below points.

1. As there will be no security advisories for any unsupported libraries that Drupal 7 contributed modules rely on like CKEditor 4. Is it advisible to have the migration from CKEditor 4 to CKediotr 5

2. Is CKeditor 5 is compactible with the Drupal 7.X

3. IF the point 2 is proposed, what will be the prerequisites and the steps of the migration from CKEditor 4 to CKEditor 5.

4. What are the points we need to consider if we are not still using Drupal 7.X

@priyankabehera: This issue is about migrating the Insert module to CKEditor 5. Please understand this is not the place for general migration support. I am not a Drupal expert who would be the proper person to provide such. Generally, you should upgrade your Drupal 7 instances to Drupal 10 until January 2025. Otherwise, your site will potentially be vulnerable to malicious attacks.

As for the Insert module, it is possible to upgrade to Drupal 10 as per the patch set provided on a separate issue ( https://www.drupal.org/project/insert/issues/3354931 📌 Drupal 10 compatibility Fixed ). A Drupal 10 compatible release of the Insert module featuring that patch set is ahead. However, so far, you will need to run the CKEditor 4 legacy module ( https://www.drupal.org/project/ckeditor → ), which, as of now, is supported until end of 2023 only.

If you want to continue running Insert, it is possible to upgrade to Drupal 10, though an upgrade to CKEditor 5 is not possible at the moment.

According to the most recent comment this module isn't compatible with ckEditor 5. If so, please can that be stated clearly on the module project page? I saw the D10 release and wrongly assumed this implied ckEditor 5 support.

Potentially related: 🐛 Can't Insert images into textareas after Drupal 10 upgrade Active

Up until Drupal 10, I was using Insert to insert images into bare textareas, and it has always worked great.

But after upgrading to Drupal 10 I am getting errors about CKEDITOR not being available, I'm guessing that's because the code is meant to work with earlier versions—but is there a way that in the interim (before CKEditor 5 support is added), this module could be made to work without a Text Editor present like before?

Good morning
I also hope you update this module to support CKEditor 5
It's really a very good module that I've been using for a long time.
Long life of the insertion module
THANKS

I am using Drupal 10 with CKEditor5. I also thought that the Insert module is compatible with CKEditor5 when it says "3.0.0-beta3 released 1 January 2024 Works with Drupal: ^10". Under the admin/structure/types/manage/book/form-display, the widget setting for the File or Image field does show "Insert" but the Insert menu cannot appear under the text editing screen as usual. Have I missed something or it is really not compatible yet?

Good morning
the insert button does nothing
in edition I have these errors:
CKEditor.js?v=2.x:31 Uncaught ReferenceError: CKEDITOR is not defined
on CKEditor.js?v=2.x:31:26
on CKEditor.js?v=2.x:180:5
on CKEditor.js?v=2.x:184:3
How can I help make the module work?

I've just taken another look into this, and managed to insert an image into a CKEditor 5 instance. It will require some effort to make it work properly without errors, but maybe I can start with a stripped down version really just plain inserting again. As far as I manage to aggregate the necessary time, I plan to trim most of the abstraction to make the module code simpler. After all, it's unlikely there is any other editor used than CKEditor anyway, considering it being so tightly integrated by now. Consequently, I can shape the module to insert into CKEditor instances and textareas only, making things a lot easier.
I can't promise anything just yet, but I'm taking a look at solving this and will give an update as soon as possible—end of February at the latest.

I have refactored the code along with attaching to CKEditor 5 instances. This seems to work ok, but it will need some testing before uploading it. I'm trying to reduce complexity for the initial release, therefore:

• The alignment controls are planned to be removed as this can be done very nicely in CKEditor 5.
• Handling of the image caption is also planned to be removed. It can also be done very nicely in CKEditor 5 and safes a lot of complexity in the Insert module code.
• Rotation controls might not be part of the first release.
• Not yet sure about the future of the sub-modules insert_colorbox, insert_media and insert_responsive_image; have not touched those yet.

Thank you for your effort! :)

At least created a dev release for the moment: 3.x-dev →

This should cover basic compatibility. Bugs are very likely, and some things not yet sorted out properly are still in progress. Anyway, feel free to check out the dev release and open issue tickets for it. Please note the sub-modules have not been touched yet.

Please do not report individual issues on this ticket to keep the focus here on the general topic. Thanks.

Hello
insert the document works, no errors, a few small details to adjust
insert image adds paragraph

No errors in Chrome developer window or Drupal DBlog
Thank you for your time

The order of filters can mess things up. The issue with empty p tags sounds like you have the Embed Media filter before Convert Line Breaks Into HTML.

thanks for the tips @mortona2k
I specify that I do not use the media module
I insert images from an image field
so no filter activated

I am going to revisit the existing tests to also work with the updated module code and the plan is to create a beta release right after, so maybe next week.

Dear Snater,

I'm testing the latest committed version, and i think i found an error.

If Ckeditor 5 image plugin is active, you got an error of double declaration of < img src width height alt > in the ckeditor5_sourceEditing field.

It's a bad solution, but if i comment out these attributes in the module at line 815, it works perfectly.

  $attributes = [
    'img' => [
      'class' => NULL,
      'data-insert-attach' => NULL,
      'data-insert-type' => NULL,
      //'src' => NULL,
      //'width' => NULL,
      //'height' => NULL,
      //'alt' => NULL,
      'title' => NULL,
    ],

@nitrocad: Thanks for trying out the dev version. I am unable to reproduce the issue. I have set up a fresh instance with latest Drupal core, installed the Insert module, activated it on a text format where CKEditor image is in the toolbar, saved that text format to have the Insert specific attributes and tags added, with the result of being able to insert an image without any problem. I just experienced a minor issue that would make it to the log, which is fixed with the most recent commit.

Could you please open a separate ticket with steps to reproduce, ideally on a fresh standard Drupal installation? The error appears when saving the text format or when inserting an image?

The attributes should not just be removed because the Insert module might also be set up on a text format that has the CKEditor image module disabled. The function adding the tags and attributes should check if tags are existing already and add the attributes to those if they are not already set, but maybe there is some conflict…

Hello
latest version ckeditor5, insert-3.x-dev but without ckeditor4
insert image adds paragraph

With error in Chrome developer window

ckeditor5-dll.js?v=40.2.0:5 Uncaught TypeError: Cannot read properties of undefined (reading 'parent')
at Object.callback (Inserter.js?v=3.x:83:25)
at Cn._runPendingChanges (ckeditor5-dll.js?v=40.2.0:5:424782)
at Cn.change (ckeditor5-dll.js?v=40.2.0:5:421831)
at #insertIntoEditor (Inserter.js?v=3.x:74:20)
at #insert (Inserter.js?v=3.x:63:31)
at HTMLInputElement. (Inserter.js?v=3.x:45:64)
rethrowUnexpectedError @ ckeditor5-dll.js?v=40.2.0:5
change @ ckeditor5-dll.js?v=40.2.0:5
#insertIntoEditor @ Inserter.js?v=3.x:74
#insert @ Inserter.js?v=3.x:63
(anonymous) @ Inserter.js?v=3.x:45

@Snater

i've edited my last comment, the error came up on saving the text format, but on a fresh install not, so i think something was stucked during the update from CKE4 to 5.

Good morning
I uninstalled and reinstalled insert and ckeditor5 and the ckeditor5-dll.js error disappeared
@nitrocad is right about a CKE4 to CKE5 update error
now in plain text mode, it works but in HTML without any filter activated nothing is displayed
if I activate theme debug this is what is inserted:

<!-- END OUTPUT from 'modules/insert/templates/insert-image.html.twig' -->
<!-- BEGIN OUTPUT from 'modules/insert/templates/insert-image.html.twig' -->
<!-- THEME HOOK: 'insert_image' -->
<!-- THEME DEBUG -->

weird strange
in the insert-image.html.twig file
after line 34

34 #}
35 {% apply spaceless %}

I add a line

34 #}
35 hello
36 {% apply spaceless %}

and miracle insert image works
I admit that I don't understand why!
Do you have an idea ?

I've tried the dev version, and I'd just like to thank you for getting on this as I find this insert method so much more streamlined than faffing about with media library.

I only managed to get the image insert to work after I updated my text formats to include the below in the Source editing tab:
<img src loading class width height data-insert-type data-entity-type data-entity-uuid data-insert-attach>

I had tried to update the insert module config with auto text format support and resaved but the tag/attributes weren't added.

Also, the Insert button wasn't working for me at first, but I quickly realised it was due to my site using a CSP preventing inline code such as on the input submit element (onclick="return false;") from firing, so my page was just being reloaded. Understand this is a dev version, but just wanted to flag.

Thanks for the good work!
John

another curiosity with the addition of a word after line 34
in full_text and restricted insert works
but in basic and full insert does not work
I had fun putting all the toolbar buttons in the restrided format
and yay insert works well

I created a new test format
when i click on the insert button

ckeditor5-dll.js?v=40.2.0:5 Uncaught TypeError: Cannot read properties of undefined (reading 'parent')
    at Object.callback (Inserter.js?v=3.x:83:25)
    at Cn._runPendingChanges (ckeditor5-dll.js?v=40.2.0:5:424782)
    at Cn.change (ckeditor5-dll.js?v=40.2.0:5:421831)
    at #insertIntoEditor (Inserter.js?v=3.x:74:20)
    at #insert (Inserter.js?v=3.x:63:31)
    at HTMLInputElement.<anonymous> (Inserter.js?v=3.x:45:64)
rethrowUnexpectedError @ ckeditor5-dll.js?v=40.2.0:5
change @ ckeditor5-dll.js?v=40.2.0:5
#insertIntoEditor @ Inserter.js?v=3.x:74
#insert @ Inserter.js?v=3.x:63
(anonymous) @ Inserter.js?v=3.x:45

I have created a new beta release 3.0.0-beta4 → . Unfortunately, I am unable to reproduce the issues with the template and the JS error. Please open separate issues for each problem after verifying the issues still exist on the beta release, and provide exact steps to reproduce as back-referencing to individual comments on this issue will become confusing.

There are many different configuration settings (particularly on the text format / CKEditor config) that might have some influence on the behaviour of Insert. Therefore, I need instructions, even better with some screenshot(s), to recreate such individual setups on a pristine Drupal instance. Thanks for testing and using the module!

By chance, I just tested the insertion with content whose text box is separated from the summary box.
and the insert works well but stays all the time in the summary not in the body text area
if this helps

Unfortunately, I cannot reproduce the issue. Inserting works fine for me on a fresh Drupal installation. The default target should be the main body editor. As soon as focussing an editor or a textarea, that editor or textarea is supposed to become the current target for inserting.

For me, when I upload an image, it is inserted into the main body editor. If I focus the summary input, and then press "Insert", the image is inserted into the summary. Focussing the body editor again, an image is inserted there again.

In the code, the default target is picked here, and then the actual insertion target is selected here. I would need more configuration on the setup for being able to reproduce. If the target sticks to one element, there must be something wrong with the focus tracking in that file. You could try stepping into that function with the debugger. It could also be somehow related to the relevant editor/textarea not added to that FocusManager per addTextarea()/addEditor(). Maybe the editor is loaded asynchronously in your case after the Insert module is initialised, causing the editor to not be added to the FocusManager.

Released 3.0.0-beta5 → that should fix an issue of the page being reloaded when clicking the Insert button.

You are a Hero! Never give up! Thanks for your work! :)

hooray version 3.0.0-beta5 works perfectly
Congratulations for your work

Released 3.0.0-beta6 → , which also contains a fix for the issue mentioned in comment #29 📌 CKEditor 5 compatibility Active that I was able to reproduce now.
Thanks.

Thanks for this!

If I enable "Automatic text format support" on the Insert module configuration page, as described here → , then try to re-save the text format, I get this error:

The following attribute(s) can optionally be supported by enabled plugins and should not be added to the Source Editing "Manually editable HTML tags" field: Style (<img class>).

I confirmed that I don't have that attribute listed in the Manually editable HTML tags field:

<cite> <dl> <dt> <dd> <object> <param> <figcaption> <div id aria* data* class> <span id aria* data* class> <button id aria* data* class> <video controls controlslist src width height> <source src type> <iframe src allowfullscreen allow width height frameborder> <figure class> <blockquote cite> <ul type> <ol type> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id> <drupal-media title width height data-width data-height> <img title data-responsive-image-style> <a hreflang data* name>

So I think it is being added by '_insert_allowed_html_validate'. I tried commenting out the 'class' attribute in that function, just to see if it helped, and the error changed to:

The following attribute(s) are already supported by enabled plugins and should not be added to the Source Editing "Manually editable HTML tags" field: .

(i.e. The list of attributes is blank, but it still won't save.)

So I turned off "Automatic text format support" again, and it seems to work fine - I guess I already have the necessary attributes whitelisted, so I don't need it. Just mentioning it in case someone else has the same issue.

Thanks for the feedback. You will be able to insert an image if the image plugin is enabled. But there is probably no "tracking" of the inserted image, which is for syncing the alt input element to images already inserted for example.

I have looked into providing a CKEditor plugin that would enable the necessary HTML by dragging a button into the toolbar on the text format edit page. It seems to work out ok, I created a separate ticket 📌 Replace text format setup with custom CKEditor plugin Needs review .

This will replace the shaky logic adding the tags and attribute when saving the text format form. The only downside is that Drupal core's ckeditor5_image plugin is required to be enabled due to image-specific customizations there. The consequence is that ckeditor5_image plugin's button will show up in the editor toolbar, which would need a line of CSS in the admin theme if it is meant to be hidden.

As soon as the three Insert tickets referencing this ticket are closed, I consider the Insert module feature complete for version 3.0.0. All the issues already received change sets. After closing those issues, there will be one more beta version, and subsequently, depending on the bug situation, there will finally be the 3.0.0 release.

Good morning
a very small problem with version 3.0.0-beta6
When editor_advanced_link module is enabled ckeditor5 is broken

ckeditor5.js?scro4y:192 Failed to load insert - ExtendAllowedHtml
(anonymous) @ ckeditor5.js?scro4y:192
ckeditor5.js?scro4y:464 Debugging can be done with an unminified version of CKEditor by installing from the source file. Consult documentation at https://www.drupal.org/node/3258901
ckeditor5.js?scro4y:468 CKEditorError: plugincollection-plugin-not-found {"plugin":null}
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-plugincollection-plugin-not-found
    at ckeditor5-dll.js?v=40.2.0:5:110188
    at ckeditor5-dll.js?v=40.2.0:5:110247
    at Array.forEach (<anonymous>)
    at u (ckeditor5-dll.js?v=40.2.0:5:110049)
    at l.init (ckeditor5-dll.js?v=40.2.0:5:108537)
    at D.initPlugins (ckeditor5-dll.js?v=40.2.0:5:115287)
    at editor-classic.js?v=40.2.0:4:9630
    at new Promise (<anonymous>)
    at D.create (editor-classic.js?v=40.2.0:4:9587)
    at Object.attach (ckeditor5.js?scro4y:374:21)
(anonymous) @ ckeditor5.js?scro4y:468

Hello @Snater
another problem I have like settings in Widget Settings: Image
Default style
Large (480×480)
Auto Option Picture Style
Large (480×480)
Link image to
Original image

but insert does not create url_link is empty
just is there another setting in the module?
thank you for your work and support

Hello
there is also a conflict with the "Button Style"
When I drag the "image" button into the active toolbar, I cannot save the text format

Warning: Undefined array key "editor][settings][plugins][ckeditor5_image" in _insert_allowed_html_validate() (line 809 of modules\insert\insert.module).

@jjancel: Thanks for the feedback. It appears you have a bit of a strange state there. If you use the CKEditor plugin, which I can confirm being referenced in the error of your first message, you seem to be using the dev release, because the CKEditor module is not part of 3.0.0-beta6 and there has not been a beta release since then. At the same time, the function _insert_allowed_html_validate referenced in your most recent message is removed in the dev release as it has become obsolete along implementing the CKEditor plugin; that was the old method of extending the allowed HTML. The "text formats" option itself was removed along implementing the CKEditor plugin, there is an update hook that is supposed to remove the setting's value.

Could you make sure you have the latest dev release and have also cleared the cache? Thanks!