Wysiwyg-editor: Saving Raw HTML Code Instead of Stripping Tags

Created on 6 Jul 2016 · 11Comments · Source: froala/wysiwyg-editor

I'm using a marketing automation platform (Mautic) that just implemented Froala in its new 2.0 version. The editor seems great for WYSIWYG editing, but there are issues when pasting custom code, particularly for HTML emails that require several specifications and hacks to make them look consistent throughout the diverse array of email clients.

Froala is not letting me simply paste in custom HTML without the editor radically modifying and stripping out code. I typically use Foundation for Emails (http://foundation.zurb.com/emails.html) and the Froala Editor completely destroys these templates.

Is there a way to set Froala to simply leave the raw input I give it as is? I don't want it to strip or change anything I paste into the code view. After a glance at the documentation, I don't see an option for this.

Source

nickian

👍3

Most helpful comment

@stefanneculai bumping this because we'd like to help our marketing department creating a nice email template whilst allowing them to edit the content.

mmastika on 28 Oct 2016

👍4

All 11 comments

fullPage: true helps with some of the issues, but how can I allow <style> tags and CSS properties to remain in the <head>?

$('#edit').froalaEditor({
    fullPage: true,
    height: 500
});

Using htmlAllowedTags: ['style'] doesn't seem to do anything. Is there a way to say "all" for HTML tags and attributes?

Even better, there should be a setting that simply allows for raw code input and strips _nothing_, like: raw: true.

nickian on 6 Jul 2016

You could use htmlAllowedTags: ['.*'] if you want to allow all the tags in the editor. You should also check the htmlRemoveTags option which by default is stripping the style and script tags.

stefanneculai on 7 Jul 2016

👍1

This configuration helped, but there are still some issues:

$('#edit').froalaEditor({
    htmlAllowedTags: ['.*'],
    htmlRemoveTags: [''],
    lineBreakerTags: [''],
    lineBreakerOffset: 0,
    linkAlwaysBlank: true,
    linkText: true,
    fullPage: true,
});

For example, why does Froala insist on inserting this right after the </style> tag?: <p><br></p>

Froala also adds random <br/> tags after all of my tables. The line lineBreakerTags didn't seem do resolve this.

I made a gif to show you. Everytime I switch back from code view it adds line breaks around my tables:

image of Froala

nickian on 7 Jul 2016

👍2

One more thing, for gmail on iOS there is a hack required when creating emails:

<!-- prevent Gmail on iOS font size manipulation -->
<div style="display:none;white-space:nowrap;font:15px courier;line-height:0">&#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0; &#xA0;</div>

All of the   entities are replaced with   in Froala.

I tried adding   to the entities option, but that didn't do anything.

nickian on 7 Jul 2016

  is the same with   http://stackoverflow.com/questions/7511214/what-is-the-difference-between-x00a0-and-160.

stefanneculai on 8 Jul 2016

@stefanneculai Thanks, didn't realize that.

Any idea if there's a way to prevent these <br/> tag insertions? I can't find a way around it.

nickian on 8 Jul 2016

👍4

@nickian could you please send us the HTML you're using?

stefanneculai on 9 Jul 2016

Sure. You can see it here: http://creative.link/code/demo-newsletter/

nickian on 9 Jul 2016

@stefanneculai Having the same issues as @nickian . Pasting HTML results in
tags being added in empty elements (e.g. 's).

I think Froala is too opinionated when it comes to translating pasted in code. e.g. When setting width attribute on images it strips it when switching back to visual editor. I know there is an option to automatically set size but sometimes you need more control.

Great job btw, definitely one of the best WYSIWYG out there. :)

SaxonF on 25 Aug 2016

👍1

@stefanneculai bumping this because we'd like to help our marketing department creating a nice email template whilst allowing them to edit the content.

mmastika on 28 Oct 2016

👍4

Oh - hoping for a resolution to the problems faced by @nickian above - but no response from Froala?