TinyMCE 编辑器：延迟加载和数据源答案

【问题标题】：TinyMCE Editor: Lazy Load & Data-srcTinyMCE 编辑器：延迟加载和数据源
【发布时间】：2022-12-01 07:17:27
【问题描述】：

使用 Tiny 编辑器添加新图像时，我得到类似这样的信息

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

理想情况下，我想要这样的东西

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

我添加了类 lazyload，但我不知道如何在 src 和 data-src 上添加 1px.png。有人可以给我任何建议吗？

【问题讨论】：

标签： php tinymce tinymce-5 tinymce-plugins mutiny

【解决方案1】：

您可以在使用 init 和 ExecCommand 中的 setup 选项插入图像时添加数据属性。示例：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);
            }
        });
    },
});

请参阅此处的文档： https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#setup https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editor/#execCommand

【讨论】：

我的 TinyMCE 版本是 5。我试图将你的代码与我的合并。它没有用。你在这里给我的是版本 6 代码。版本 5 是否能够处理 lazyload 方法？