[英]TinyMCE Editor: Lazy Load & Data-src
When adding a new image using the Tiny editor, I get something like this使用 Tiny 编辑器添加新图像时,我得到类似这样的信息
< img class="img-fluid" src="images/example.webp" alt="" /> < 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="" /> < 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.我添加了 class lazyload,但我不知道如何在 src 和 data-src 上添加 1px.png。 Can someone offer me any advice?
有人可以给我任何建议吗?
You can add a data attribute when inserting an image using the setup
option in your init and ExecCommand
.您可以在使用 init 和
ExecCommand
中的setup
选项插入图像时添加数据属性。 Example: https://fiddle.tiny.cloud/Mtiaab示例: 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请参阅此处的文档: https://www.tiny.cloud/docs/tinymce/6/editor-important-options/#setup https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editor/ #execCommand
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.