Application CSS is overridden by Trumbowyg Content

[zeknox]

Whenever custom CSS styles are applied to the Editor it will override the default CSS of the application running the editor.

Simple CSS like below will shrink the font of nearly the entire application

body{font-size:.7em}

What is the best way to implement trumbowyg in a rails application so the CSS does not override the default application CSS?

[Alex-D]

The best way is to set the font-size in the Trumbowyg scope :D

I need to do that ASAP. Thanks!

[Alex-D]

Hum, I don't understand the bug. Maybe you need the reset option? If you want customize Trumbowyg content you need to select .trumbowyg-box or .trumbowyg-editor insteed of body.

[zeknox]

the trumbowyg editor allows a user to create custom HTML content. Sometimes they may want to use external stylesheets like bootstrap for example to style their custom HTML content.

If the application running and rendering the trumbowyg editor has a custom version of bootstrap or any CSS for that matter, it will all be overridden by the user linking the stylesheet.

Here is workflow of how to reproduce the issue. Click the View HTML and add some sample CSS style like so:

<style type="text/css">
  body{font-size:.7em}
</style>

Then click the View HTML button again, and watch all your body fonts shrink to .7em because the user applied some custom CSS to the HTML page they were creating.

It doesn't seem right that CSS within the editor should be able to override the applications CSS when previewing the HTML.

I do fully understand that I could leverage .trumbowyg-box or .trumbowyg-editor but sometimes this is irrelevant if the user wants to link and external stylesheet like bootstrap or foundation, that CSS would override and custom bootstrap or foundation CSS that app was running.

[Alex-D]

Hum... that's a strange usage but that's linked to #160

I work on option to enable/disable style and script tags. That's what do you want?

[zeknox]

The editor still needs to allow for style tags to work properly, but only scoped to the content within the wysiwyg editor.

This HTML content within the editor is rendered elsewhere in a view, which is why the styles still need to work. It just shouldn't allow the styles to override the apps default CSS that is rendering trumbowyg inline.

[Alex-D]

I can't scope the style to the editor because without add a div tag arroud the content which is in the textarea which is sent in form. No?

[zeknox]

Is there some way to render trumbowyg in a way similar that functions like a seamless iframe where the CSS within the editor is segregated from that of the running application?

This seems quite brittle that the content within the editor has the ability to manipulate the entire view of the application.

[Alex-D]

It's useless to scope the style in editor if it's not scoped in your result page.

If you don't want style tag, I work on it. If you want scoped styles I don't know how to filter CSS rules without a lot of code. So I think keep it simple.

[Kielan]

yes props need to be able to go to every levels so that some css's can be overridden, the resetcss tag does not seem to work.

[McFcologne]

I really like the editor, but i hate that there is no way for a css segregation. We use this editor, to give customers the freedom to freely modify email content, which clearly needs the ability to use style tags and set body attributes.

Wouldn't it be a possible solution, to optionally render the editor into an iframe to get the freedom to do anything with css without of any impact on the surrounding application? I think an iframe is the only possible solution for that.

[Alex-D]

Feel free to wrap the editor with an iframe:

https://github.com/Alex-D/Trumbowyg/blob/develop/index.html#L371-L405