TinyMCE Editor: Lazy Load & Data-src

Question

When adding a new image using the Tiny editor, I get something like this

< img class="img-fluid" src="images/example.webp" alt="" />

Ideally, I want something like this

< img src="/assets/img/1px.png" data-src="images/example.webp" class="img-fluid lazyload" width="600" height="254" alt="" />

I added the class lazyload, but I do not know how to add the 1px.png on src and data-src. Can someone offer me any advice?

Answer 1

You can add a data attribute when inserting an image using the setup option in your init and ExecCommand . Example: https://fiddle.tiny.cloud/Mtiaab

tinymce.init({
    selector: "textarea",
    plugins: "image advcode",
    toolbar: "image code",
    setup: function (editor) {
        editor.on('ExecCommand', function (e) {
            if (e.command === 'mceUpdateImage') {
                const img = editor.selection.getNode();
                img.setAttribute('data-src', img.src);
            }
        });
    },
});

See documentation here: https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#setup https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editor/#execCommand