[FIX] web_editor: send mail to outlook and keep image size
Office Outlook doesn't take into account the [style] attribute, and it doesn't manage width/height in percent value. This commit set width/heigth attribute in pixels and also always set the width/height in style attribute (keeping them in the original unit and setting them to auto if not present).
This commit is contained in:
@@ -45,6 +45,9 @@ snippet_editor.Class.include({
|
||||
var $editable = $("#editable_area");
|
||||
transcoder.img_to_font($editable);
|
||||
transcoder.style_to_class($editable);
|
||||
|
||||
// fix outlook image rendering bug
|
||||
$editable.find('img[style*="width"], img[style*="height"]').removeAttr('height width');
|
||||
});
|
||||
},
|
||||
clean_for_save: function () {
|
||||
@@ -52,6 +55,15 @@ snippet_editor.Class.include({
|
||||
var $editable = $("#editable_area");
|
||||
transcoder.class_to_style($editable);
|
||||
transcoder.font_to_img($editable);
|
||||
|
||||
// fix outlook image rendering bug
|
||||
_.each(['width', 'height'], function(attribute) {
|
||||
$editable.find('img[style*="width"], img[style*="height"]').attr(attribute, function(){
|
||||
return $(this)[attribute]();
|
||||
}).css(attribute, function(){
|
||||
return $(this).get(0).style[attribute] || 'auto';
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
});
|
||||
@@ -69,6 +81,9 @@ window.top.odoo[callback+"_updown"] = function (value, fields_values) {
|
||||
|
||||
transcoder.img_to_font($editable);
|
||||
transcoder.style_to_class($editable);
|
||||
|
||||
// fix outlook image rendering bug
|
||||
$editable.find('img[style*="width"], img[style*="height"]').removeAttr('height width');
|
||||
} else {
|
||||
$editable.trigger("content_changed");
|
||||
}
|
||||
|
||||
@@ -373,7 +373,7 @@ Tour.register({
|
||||
}
|
||||
},
|
||||
{
|
||||
waitFor: '#wrapwrap img:first[style*="border-bottom-left-radius:50%"][style*="border-top-width"][style*="padding-top"]',
|
||||
waitFor: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]',
|
||||
title: "check the image style",
|
||||
},
|
||||
{
|
||||
|
||||
@@ -105,12 +105,14 @@ var font_to_img = function ($editable) {
|
||||
});
|
||||
});
|
||||
if (content) {
|
||||
var size = parseInt(parseFloat($font.css("font-size"))/parseFloat($font.parent().css("font-size")),10);
|
||||
var color = $font.css("color").replace(/\s/g, '');
|
||||
var src = _.str.sprintf('/web_editor/font_to_img/%s/%s/'+$font.height(), window.encodeURI(content), window.encodeURI(color));
|
||||
var style = $font.attr("style");
|
||||
style = (style ? style.replace(/\s/g, '').replace(/(^|;)height:[^;]*/, '$1').replace(/(^|;)font-size:[^;]*/, '$1') : "") + "height:"+size+"em;";
|
||||
var $img = $("<img/>").attr("src", src).attr("data-class", $font.attr("class")).attr("style", style);
|
||||
var $img = $("<img/>").attr("src", src)
|
||||
.attr("data-class", $font.attr("class"))
|
||||
.attr("style", $font.attr("style"))
|
||||
.attr("height", $font.height())
|
||||
.css("height", "")
|
||||
.css("font-size", "");
|
||||
$font.replaceWith($img);
|
||||
} else {
|
||||
$font.remove();
|
||||
@@ -121,7 +123,10 @@ var font_to_img = function ($editable) {
|
||||
var img_to_font = function ($editable) {
|
||||
$("img[src*='/web_editor/font_to_img/']", $editable).each(function () {
|
||||
var $img = $(this);
|
||||
var $font = $("<span/>").attr("class", $img.data("class")).attr("style", $img.attr("style")).css("height", "");
|
||||
var $font = $("<span/>")
|
||||
.attr("class", $img.data("class"))
|
||||
.attr("style", $img.attr("style"))
|
||||
.css("height", "");
|
||||
$img.replaceWith($font);
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user