Srcset + TinyMCE

Surjit Bharath

Vote:

I've got a client that wants srcset to be used in place of img tags when rendering an xhtmlstring property.

I've tried the following methods with limited success:

1) Override the display template for xhtmlstring...Difficult parsing html using regex.
It's working for a single img tag but when the xhtmlstring has other markup...results are unpredictable. Difficult getting the perfect regex.

2) Created a TinyMCE plugin allowing the editor to select an img and convert to srcset via a button.
Not a great editor experience as the actions are disconnected. Which leads on to attempt #3

3) Replicate / override the dnd processor plugin and epi-image-tool tinymce plugin.
Difficult overriding in TinyMCE plugins. The img markup generated in the javascript, there doesn't seem to be a way to inject my own html or hook to an event to override just that part.

Has anyone had success in this area?

Does anyone know what processor is used to compile Episerver.CMS.TinyMce module?

My last attempt is to modify the files and then compile/pack my own version of it and not rely on the one in the nuget feed.

#272817

Feb 23, 2022 8:52

Ynze

Vote:

What you could try is using the NodeChange event to update the HTML automatically in a custom TinyMCE plugin. The event triggers every time a node is updated, including when an image is added or dragged and dropped.

Below is a snippet I quickly threw together. I did some testing with it and it seems to work. It check if the node is an image element and it then adds picture and source elements. However it does not check for existing elements so it will keep adding them every time the NodeChange event is triggered — so that will need to be fixed.

tinymce.PluginManager.add('customplugin', function(ed, url) {
    ed.on('NodeChange',
        function(e) {
            if (e.element.tagName === "IMG") {
                var sourceElement = document.createElement("source");

                sourceElement.setAttribute("src", e.element.currentSrc);

                $(e.element).wrap("<picture></picture>");

                e.element.parentElement.appendChild(sourceElement);
            }
        });
});

#274489

Feb 24, 2022 1:21

Surjit Bharath

Vote:

Hi Ynze,

This is what I needed. Thank very much!

Now I have to work out how to strip out the modifications made by being in edit mode!

Surjit

#274546

Feb 25, 2022 10:39