Inserting images no check..

[Alex-e107nl]

Hello everyone, we are working on using trumbowyg as a plugin for a cms, now it is so that when you use the insert image function, it is not checked whether the image to which is referred actually exists, this gives error messages if you enter something like 'yyyyy' instead of a real link or reference. Is it easy to change that? I saw on https://codepen.io/kallil-belmonte/pen/KKKRoyx a function to check whether an image is present, would be a nice addition, right?

Or can we handle that in another way that we don't know or haven't seen within Trumbowyg? Nice editor btw, fast, small and the modular setup is really great!

[Alex-D]

Hey!
No, the image implementation does not manage that today, but I guess it can be added without that much work.

[Alex-e107nl]

Hi Alex,
i tried something like this but it does not work... i am not to familiar with javascript....

insertImage: function () {
    var t = this;
    t.saveRange();

    var options = {
        url: {
            label: 'URL',
            required: true
        },
        alt: {
            label: t.lang.description,
            value: t.getRangeText()
        }
    };

    if (t.o.imageWidthModalEdit) {
        options.width = {};
    }

    t.openModalInsert(t.lang.insertImage, options, function (v) { // v are values
        // Check if the URL is an image
        if (!isImageURL(v.url)) {
            alert('The provided URL is not a valid image URL.'); // Alert the user
            return false; // Stop the execution
        }

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

        if (t.o.imageWidthModalEdit) {
            $img.attr({
                width: v.width
            });
        }

        t.syncCode();
        t.$c.trigger('tbwchange');

        return true;
    });
},
// Helper function to check if a URL is an image
isImageURL: function (url) {
    return (/\.(jpg|jpeg|png|gif|bmp|webp|svg)$/i).test(url);
},

This closes the modal always :-(

[Alex-e107nl]

Well it can be something like this, with alert... i think that it can be improved but it is not possible to refer to something else then a image... the problem is that we need this because some parts are for public use with placing a image with this code.. If you know a better way please share!

insertImage: function () {
			var t = this;
			t.saveRange();

			var options = {
			url: {
				label: 'URL',
				required: true
			},
			alt: {
				label: t.lang.description,
				value: t.getRangeText()
			}
		};
		function isImage(url) {
			return /\.(jpg|jpeg|png|webp|avif|gif|svg)$/.test(url);
		}
	
		if (t.o.imageWidthModalEdit) {
			options.width = {};
		}

		t.openModalInsert(t.lang.insertImage, options, function (v) { // v are values
        // Check if the URL is an image
        if (!isImage(v.url)) {
            alert('The provided URL is not a valid image URL.'); // Alert the user
            return false; // Stop the execution
        }

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

        if (t.o.imageWidthModalEdit) {
            $img.attr({
                width: v.width
            });
        }

			t.syncCode();
			t.$c.trigger('tbwchange');

			return true;
			});
		},