TinyMCE 編輯：Lazy Load & Data-src

Question

使用 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="" />

我添加了 class lazyload，但我不知道如何在 src 和 data-src 上添加 1px.png。 有人可以給我任何建議嗎？

Answer 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