TagClasses doesn't work with IMG tags (and proposed fixes)

[AlexGhiondea]

When trying to use the tagClasses feature to add a custom tag to the added images (both import via url and base64) the tag does not apply.

I have a workaround for that that involves applying the custom class at the time of element creation instead of later on.

The reason why it doesn't work the way it is right now is because the parameter that is used to try and find the matching tag in the tagClasses object is either the url or the base64 encoded value.

Url Import

Trumbowyg/src/trumbowyg.js

Line 1434 in 7648548

t.execCmd('insertImage', v.url, false, true);

Base64 Import

Trumbowyg/plugins/base64/trumbowyg.base64.js

Line 165 in 7648548

trumbowyg.execCmd('insertImage', fReader.result, false, true);

Url Image Import Fix

To fix the url image import we can add the following code at this line:

Trumbowyg/src/trumbowyg.js

Line 1436 in 7648548

$img.attr('alt', v.alt);

From:

var $img = $('img[src="' + v.url + '"]:not([alt])', t.$box);
$img.attr('alt', v.alt);

To:

var $img = $('img[src="' + v.url + '"]:not([alt])', t.$box);
$img.attr('alt', v.alt);

let imgClass = t.o.tagClasses['img'];
$img.addClass(imgClass);

This will ensure that the tag is applied immediately after the alt tag is added.

Base64 image upload fix

To fix the base64 we have to do something a bit more complicated here:

Trumbowyg/plugins/base64/trumbowyg.base64.js

Line 166 in 7648548

$(['img[src="', fReader.result, '"]:not([alt])'].join(''), trumbowyg.$box).attr('alt', values.alt);

I recommend slightly changing the existing code to only find one image (since we are only uploading one)

From:

$(['img[src="', fReader.result, '"]:not([alt])'].join(''), trumbowyg.$box).attr('alt', values.alt);

To:

let imageObj = $('img[src="', fReader.result, '"]:not([alt])', trumbowyg.$box);
imageObj.attr('alt', values.alt);

// Get the tag (if specified)
var imgClass = trumbowyg.o.tagClasses['img'];
imageObj.addClass(imgClass);

// We also have to sync the code or this change will be lost
trumbowyg.syncCode();