Wysiwyg-editor: Froala leaves the table style in the final HTML

Created on 29 Jun 2016 · 5Comments · Source: froala/wysiwyg-editor

Expected behavior.

The tables edited by Froala editor should be still styled the same in the textarea.
before-froala

Actual behavior.

HTML containing tables opened in Froala adds border size and color and leaves it there. I get this is just a visualization of tables so users could manipulate them, but this highlighting should not get to the resulted HTML.
after-froala

Steps to reproduce the problem.

Create a form with Froala editor built on a textarea.
Insert some table-based email theme into the textarea before the Froala initialization. For example some of these.
Send the content of the textarea/froala editor to an email address.

All I'd need is some method to clear the table styling before send, but cannot find such method in the docs. Is there such thing? I'd clear the styling with jQuery, but it does not work with full HTML (head, body tags), but only with the body content so when I convert the HTML to jQuery, I don't get it back the same way.

OS.

Ubuntu 16.04

Browser.

Chromium 10

Source

escopecz

All 5 comments

The editor is designed to keep all the style that the user sees when he edits the content in the output. If you want to clean those styles, I would recommend you to use a regular expression instead on the resulted HTML.

stefanneculai on 30 Jun 2016

Hmm, well, Froala adds those styles and they break the original HTML. Is that really how the editor should work?

I hoped that if Froala moves the original class attribute to fr-original-class attribute and original style attribute to fr-original-style attribute, there will be some method to switch those attributes back. Why would you then keep them in the first place?

escopecz on 30 Jun 2016

When you disable the useClasses option, the editor converts the style from CSS files to inline styles. This way it would keep the style when you send an email for example. You can read more about that on our blog: https://www.froala.com/blog/styling-emails-with-wysiwyg-html-editors.

It keeps fr-original-class and fr-original-style attributes in order to edit the HTML again in the editor without using inline style.

stefanneculai on 30 Jun 2016

😕7 👎1

const regexp = /fr-original-style=(["'])(\?.)?\1\s|fr-original-class=(["'])(\?.)?\1\s/g;
model.replace(regexp, '');