[IMP] web_editor: Convert font-awsome into picture before convert class into style to remove unnecessary style attributes

3 files changed, 5 insertions, 3 deletions

diff --git a/addons/web_editor/static/src/js/inline.js b/addons/web_editor/static/src/js/inline.js
index a843d740a48..2b6ee1c6595 100644
--- a/addons/web_editor/static/src/js/inline.js
+++ b/addons/web_editor/static/src/js/inline.js
@@ -53,8 +53,8 @@ snippet_editor.Class.include({
     clean_for_save: function () {
         this._super();
         var $editable = $("#editable_area");
-        transcoder.class_to_style($editable);
         transcoder.font_to_img($editable);
+        transcoder.class_to_style($editable);
 
         // fix outlook image rendering bug
         _.each(['width', 'height'], function(attribute) {
diff --git a/addons/web_editor/static/src/js/tour.rte.js b/addons/web_editor/static/src/js/tour.rte.js
index 73adcd089f5..6dcd5009d88 100644
--- a/addons/web_editor/static/src/js/tour.rte.js
+++ b/addons/web_editor/static/src/js/tour.rte.js
@@ -381,7 +381,7 @@ Tour.register({
             title:     "check the font image src",
         },
         {
-            waitFor:   '#wrapwrap img:eq(1)[style*="height:2em"]',
+            waitFor:   '#wrapwrap img:eq(1)[height]:not([class*="fa"])',
             title:     "check the font class to css",
         },
         {
diff --git a/addons/web_editor/static/src/js/transcoder.js b/addons/web_editor/static/src/js/transcoder.js
index 583dcf9a8d6..bd7848d2e97 100644
--- a/addons/web_editor/static/src/js/transcoder.js
+++ b/addons/web_editor/static/src/js/transcoder.js
@@ -95,10 +95,11 @@ var getMatchedCSSRules = function (a) {
 var font_to_img = function ($editable) {
     $(".fa", $editable).each(function () {
         var $font = $(this);
-        var content;
+        var icon, content;
         _.find(widget.fontIcons, function (font) {
             return _.find(widget.getCssSelectors(font.parser), function (css) {
                 if ($font.is(css[0].replace(/::?before$/, ''))) {
+                    icon = css[2].split("-").shift();
                     content = css[1].match(/content:\s*['"]?(.)['"]?/)[1];
                     return true;
                 }
@@ -109,6 +110,7 @@ var font_to_img = function ($editable) {
             var src = _.str.sprintf('/web_editor/font_to_img/%s/%s/'+$font.height(), window.encodeURI(content), window.encodeURI(color));
             var $img = $("<img/>").attr("src", src)
                 .attr("data-class", $font.attr("class"))
+                .attr("class", $font.attr("class").replace(new RegExp("(^|\\s+)" + icon + "(-[^\\s]+)?", "gi"), '')) // remove inline font-awsome style
                 .attr("style", $font.attr("style"))
                 .attr("height", $font.height())
                 .css("height", "")