Question

我有一个非常有趣的情况，我希望有人可以帮助我。我目前有一个为客户设置的自定义电子邮件活动系统，使用冷聚变编码（但这不相关）无论如何，他们在广告系列设计中看到的是每个部分的CKEditor（如果他们认为他们想要多个部分。）这是我的问题，客户有时不指定图像的宽度，有时他们使用宽度为5k +的图像。所以我在电子邮件模板中有：

    <style type="text/css">
        img {
            max-width: 100% !important;
            height: auto !important;
        }
    </style>

哪种方式效果很好......除了Gmail，这是最受欢迎的电子邮件客户端之一。

我梦寐以求：在CKEditor的某个地方，如果将图像插入到富文本编辑器中后，将会执行此代码段，这将非常好：

document.getElementsByTagName("img")[0].setAttribute("max-width", "800px");
document.getElementsByTagName("img")[0].setAttribute("height", "auto");

或

img.style.maxWidth = "800px";
img.style.height = "auto";

这可能吗？还是我只是在转动轮子？感谢您的时间和耐心！

Answer 1

你提议修补问题，因为图像会过大，应该在发出之前正确缩放，但如果你想这样做，你可以为CKEditor写一个输出过滤器。
这件事:(未经测试）

var dataProcessor = editor.dataProcessor,
    htmlFilter = dataProcessor && dataProcessor.htmlFilter;

// htmlFilter : conversion from internal data to html output.
htmlFilter.addRules( {
    elements :
    {
        'img' : function( element ) {

            element.attributes.style = 'max-width: 800px; height: auto';

            return element;
        }
    }
});

显然，正确的解决方案是将图像缩小到最大值：800px，当您将图像保存到系统上或甚至在上传之前。

有没有办法在CKEditor中插入图像后运行JavaScript代码段？

1 个答案: