Fix inliner overwriting custom styles

Fixes voidlabs#231 Also added removal code for data-mce-style to fix voidlabs#230
ergeshov · Nov 11, 2016 · ed38839 · ed38839
1 parent d35dae3
commit ed38839
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/js/ext/inliner.js b/src/js/ext/inliner.js
@@ -6,6 +6,12 @@ var inlineDocument = require("juice/lib/inline")({}).inlineDocument;
 
 var inlinerPlugin = function(vm) {
   vm.inline = function(doc) {
+    // tinymce may have added style attributes to elements that will also have global styles to be inlined
+    $('[style]:not([replacedstyle])', doc).each(function(index, el) {
+      var $el = $(el);
+      $el.attr('replacedstyle', $el.attr('style'));
+    });
+
     var style = [];
     $('style[data-inline="true"]', doc).each(function(index, element) {
       var content = $(element).html();

diff --git a/src/js/viewmodel.js b/src/js/viewmodel.js
@@ -457,6 +457,7 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
     ko.applyBindings(viewModel, frameEl);
 
     ko.cleanNode(frameEl);
+
     if (viewModel.inline) viewModel.inline(frameEl.contentWindow.document);
 
     // Obsolete method didn't work on IE11 when using "HTML5 doctype":
@@ -476,7 +477,7 @@ function initializeEditor(content, blockDefs, thumbPathConverter, galleryUrl) {
     // Remove data-bind/data-block attributes
     content = content.replace(/ data-bind="[^"]*"/gm, '');
     // Remove trash leftover by TinyMCE
-    content = content.replace(/ data-mce-(href|src)="[^"]*"/gm, '');
+    content = content.replace(/ data-mce-(href|src|style)="[^"]*"/gm, '');
 
     // Replace "replacedstyle" to "style" attributes (chrome puts replacedstyle after style)
     content = content.replace(/ style="[^"]*"([^>]*) replaced(style="[^"]*")/gm, '$1 $2');