Link attributes don't save

Created on 21 March 2023, about 1 year ago
Updated 8 April 2024, 12 days ago

Problem/Motivation

When I try to add attribute on the link of an image, nothing is save.

I'm using Ckeditor5, Linkit 6.0 and Editor advanced link 2.1 on Drupal 9.5.3

Steps to reproduce

  1. Go to node/x/edit
  2. Add an image
  3. Add a link to the image
  4. Add attribute on this link
  5. Save the node
  6. Inspect the image, no target blank, no class
  7. <a href="LINK"><img src="/sites/default/files/*.jpeg" data-entity-uuid="66ab0ac5-9fb2-4e2a-8402-f4f2fcc89c3b" data-entity-type="file" alt="alt" width="275" height="183" loading="lazy"></a>
    

Does someone have find a way to correct this error ?

πŸ› Bug report
Status

Active

Version

2.2

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @GasparM
  • πŸ‡ΊπŸ‡¦Ukraine ArialBlack

    I have the same issue

  • πŸ‡¬πŸ‡§United Kingdom oliveyrc Hampshire

    Having the same issue here, tried adding target="_blank" in source view and it gets stripped as well.

  • πŸ‡©πŸ‡ͺGermany Lissy

    Same Issue here

  • πŸ‡¨πŸ‡­Switzerland sir_squall

    Same issue there, I'm using IMCE and when we put an image in the body, and we try to add a link to it and put this in "open in a new window" option, it's not working

  • πŸ‡¨πŸ‡­Switzerland sir_squall

    Does anyone know if this will be prioritized? It's having a significant impact on the end user. Not being able to open external links in new windows is quite annoying.

  • πŸ‡©πŸ‡ͺGermany Lissy

    @sir_squall You are so right with "significant impact on the end user."
    My customer are not amused.

  • πŸ‡¨πŸ‡­Switzerland sir_squall

    Yes, same on my side, my client don't understand why they cannot put external link on image and opening in an external window...

    I hope this issue will be solve soon.

  • πŸ‡ΊπŸ‡ΈUnited States quicksketch

    I ran into this same issue while porting link handling to Backdrop CMS (see https://github.com/backdrop-contrib/ckeditor5/issues/54). We started with the editor_advanced_link CKEditor plugin and adapted it for modal dialogs. Normal link handling works fine, but as is the case here, it does not work to apply attributes to images.

    I'm investigating this in our own module, whatever solution we find I'll try to post back here.

  • πŸ‡ΊπŸ‡ΈUnited States quicksketch

    It looks like for the most part, all attributes are already defined that editor_advanced_link needs, and they upcast and downcast fine. What's missing is that when setting or getting attributes for a link around an image, the attributes need to come from the image model, not the anchor. CKEditors LinkImage "absorbs" the wrapping <a> tag into the image model.

    Although this is not a comprehensive solution, in _addExtraAttributeOnLinkCommandExecute() something like this needs to be executed when link command is fired:

            // If there is an image within this link, apply the link attributes to
            // the image model's htmlLinkAttributes attribute.
            const imageUtils = editor.plugins.get('ImageUtils');
            const closestImage = imageUtils.getClosestSelectedImageElement(selection);
            if (closestImage) {
              const htmlLinkAttributes = { attributes: extraAttributeValues };
              writer.setAttribute('htmlLinkAttributes', htmlLinkAttributes, closestImage);
            }
    

    Note when setting htmlLinkAttributes the actual attribute names should be used (i.e. rel or id) rather than the model names (linkRel or linkId).

  • πŸ‡¨πŸ‡¦Canada FranckyLFS Montreal

    Like #4, I don't know why and I can't explain it, but on some image positions it doesn't work for me either.

    I'm using CKEditor 5, Linkit 6.0 and Editor Advanced Link 2.2.4 on Drupal 9.5.11.

  • Same problem here Ckeditor 5, linkit 6, EAL 2.2.4 and drupal 10.2.2
    title and target attributes are removed, only href works in my case.

  • πŸ‡¨πŸ‡­Switzerland sir_squall

    The issue is still there, but no one is able to help us on that, unfortunately.

  • πŸ‡²πŸ‡ΆMartinique wildhostile

    Hi,
    target='_blank' works when using text-align to center the image.
    As a workaround, you can choose aligned for the image position and use text-align (as if you were aligning a paragraph text) to align the image.

  • πŸ‡§πŸ‡ͺBelgium jonas139

    Also looking into this issue and was trying the workaround from #14 which worked but it's not necessary to add a text-alignment. I've noticed that when you wrap your image in a

    element, the target attribute is also working. Still looking for a better solution but maybe this will also help some people.

  • I have same issu with Drupal 10.2.4 and Editor Advanced link 2.2.4.
    No attributes are saved.
    I tried adding them manually via edit source code when I save the attributes are deleted

  • πŸ‡³πŸ‡ΏNew Zealand Gold 20 minutes in the future

    I'll add my +1 to this issue. I have just stripped out all but the bare minimum to get this to appear on the bar and after ensuring that it is configured to allow all the fields it offers none make it into the HTML. Not in the Source in the editor or on the rendered page.

    My scenario has this happening on the addition to the Editor File upload β†’ field. Adding values does not survive submission of the modal. The HTML has these extra fields striped so when editing the field again they're still empty.

    I stood up a SimplyTest.me instance using the Standard profile with just editor_advanced_link and the standard Link field in CKEditor had the new fields and they worked as expected.

    I added Editor File upload module, enabled it, added that button to the bar, and tested. The error described was present there also.

    This is feeling slightly different to the scenario of the inital report, but it feels close enough that they're likely the same issue.

  • πŸ‡³πŸ‡ΏNew Zealand Gold 20 minutes in the future

    I'm still seeing this on 2.2.4.

    Also, I'm seeing this on any file, not just images.

  • πŸ‡³πŸ‡ΏNew Zealand Gold 20 minutes in the future

    Further discovery:

    I'm kinda old school and things like webpack are a hurdle for me. With the assistance of a co-worker though I got this to a point where I could debug things. Just in case others are in my position...

    I checked out the module from git and edited webpack.config.js. In const bc = {} I added devtools: 'inline-source-map' and commented out the whole optimization: {} section. From the module dir, running npm i preped things and npm run watch would rebuild the JS that's actually used as the source files are edited.

    I’ve now got it to the point where the JS is clear and breakpoints are working. I’ve added a breakpoint to the start of literally every function in the JS in this module. Loading the page shows breakpoints are working. I also have XDebug running and submitting the form does trigger a callback to Drupal and I can see it track though _editor_advanced_link_attributes_validate() in editor_advanced_link.module. What I’m not seeing is any JS being triggered in the module upon return to CKEditor.

    This doesn’t feel right. It would seem to me that something in the EAL JS should be pulling details from the response and populating the link that is added in the body of CKEditor.

    Anyway, this is where I got to. I'll continue to poke at this when I can, but if anyone knows CKEditor 5 plugins and knows how that trigger should happen please contribute to the discussion. I'm happy to do the work, I just need pointers.

  • I have same issu with Drupal 10.2.5 and Editor Advanced link 2.2.4.
    No attributes are saved.

  • πŸ‡³πŸ‡ΏNew Zealand Gold 20 minutes in the future

    @krish1505, nuts. I was just looking at the changelog and wondering if one of the CKE updates may have resolved this. Cheers for being on top of that.

  • πŸ‡³πŸ‡ΏNew Zealand Gold 20 minutes in the future

    Hey all,

    My issue with this has been around using this module with the paired editor_file module.

    It is looking like this issue is very similar and may have a working patch. It isn't working for me, but others are claiming it works for them.

    https://www.drupal.org/project/editor_advanced_link/issues/3416599 ✨ Edit_Advanced_Link+Editor_file: conflicting field attributes RTBC

    Can people head that way and test the patch there?

Production build https://api.contrib.social 0.62.1