link on image doesn't work

[GabrielePorro]

If you upload an image and then try to put a link on it, the image disappears. I tried also on the homepage of the plugin and it also happen there. I think having the links on images is very important.
Hope someone solve this issue.

[GabrielePorro]

Any news for this issue?

[Alex-D]

Nope... it's seems to be not trivial :/

[youradds]

Shame - this bug has just made trumbowyg unusable for me :( Otherwise, a very cool script.. but I can't expect my users to edit the HTML to put links around stuff :( I did have a look at trumbowyg .upload.js, and tweaked it a bit:

                              {
                                   file: {
                                       type: 'file',
                                       required: true,
                                       attributes: {
                                           accept: 'image/*'
                                       }
                                   },
                                   alt: {
                                       label: 'description',
                                       value: trumbowyg.getRangeText()
                                   },
                                   link: {
                                       label: 'link',
                                       value: trumbowyg.getRangeText()
                                   }
                               },

...but thats about as far as I could get. It seems the image gets added using:

                                                    var url = getDeep(data, trumbowyg.o.plugins.upload.urlPropertyName.split('.'));
                                                    trumbowyg.execCmd('insertImage', url);
                                                    $('img[src="' + url + '"]:not([alt])', trumbowyg.$box).attr('alt', values.alt);

...but no way to wrap an around that as far as I can tell?

Thanks

Andy

[zolotykh]

Guys, I've found solution, but it's not elegant.

Use this plugin:

    'use strict';

    $('body').prepend(`<div style="display: none">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="trumbowyg-img-link" width="16" height="16" viewBox="0 0 16 16">
            <path fill="#444444" d="M14 16v-11l-1 1v9h-12v-12h9l1-1h-11v14z"></path>
            <path fill="#444444" d="M16 0h-5l1.8 1.8-6.8 6.8 1.4 1.4 6.8-6.8 1.8 1.8z"></path>
        </symbol>
    </svg>
</div>`);

    $.extend(true, $.trumbowyg, {
        langs: {
            ru: {
                imgLink: 'Img Link',
            },
            en: {
                imgLink: 'Img Link',
            },
        },

        plugins: {
            imgLink: {
                init(trumbowyg) {
                    trumbowyg.addBtnDef('imgLink', {
                        fn(cmd) {
                            const alt = prompt('Enter image\'s "description" field');

                            const $img = trumbowyg.$ed.find('img').filter(`[alt="${alt}"]`);

                            if ($img.length) {
                                const src = $img.attr('src');
                                const href = prompt(`Enter a href for image with description "${alt}"`);
                                const $parent = $img.parent();

                                if ('A' === $parent[0].tagName) {
                                    $parent.attr('href', href);
                                }

                                else {
                                    $img.wrap(`<a href="${href}"></a>`);
                                }

                                trumbowyg.syncCode();
                                trumbowyg.$ta.trigger('tbwchange');

                                alert('Success!');
                            }

                            else {
                                alert('Image not found.');
                            }
                        }
                    });
                },
            }
        }
    });
})(jQuery);```

[zolotykh]

UPD, it's not complete solution… There is a problem. After plugin reinitialization it cuts out the link.
@Alex-D how can I disable that behaviour?

UPD it's not a 'cutting', it seems that updated content doesn't sync with textarea before saving.
UPD It's my individual bug with Vue.js.
Plugin works fine after adding trumbowyg.syncCode()

[zolotykh]

Also can be useful run trumbowyg.$ta.trigger('tbwchange') after trumbowyg.syncCode();

[Alex-D]

I keep that in mind for v3 (See #875 for more details)

I close this for now since I want to keep issues clean and this one is old.