CODEWITHSUNDEEP
javascriptcsstinymce
anon
anon

Reputation:

TinyMCE is changing my inline CSS

I input this in the HTML editor: 

<p style="border:1px solid #edede4;border-top:none"></p>

I click update, and click the html editor again. The HTML (in Firefox) has changed to: 

<p style="border-style: none solid solid; border-color: -moz-use-text-color rgb(237, 237, 228) rgb(237, 237, 228); border-width: medium 1px 1px;" mce_style="border:1px solid #edede4;border-top:none"><br></p>

If I do the same thing in Internet Explorer, the HTML changes to:

<P style="BORDER-RIGHT: #edede4 1px solid; BORDER-TOP: medium none; BORDER-LEFT: #edede4 1px solid; BORDER-BOTTOM: #edede4 1px solid" mce_style="border:1px solid #edede4;border-top:none">&nbsp;</P>

Why in the world does it change? Maybe there are some TinyMCE settings i can change? But I already have cleanup: false. Ideas?

If I enable cleanup, the change I'm mentioning doesn't happen. However, TinyMCE changes a lot of other stuff. I don't want it to mess with my code :( Any help would be appreciated.

Upvotes: 6

Views: 3111

Answers (3)

jazkat
jazkat

Reputation: 5818

Sometimes inline styles are neccessary as was the case for this project.
In this case I simply inserted html code piece by piece. Instead of inserting:

<p style="border:1px solid #edede4;border-top:none"></p>

I did something like this:

<p style=

"border:1px solid #edede4;border-top:none

"></p>

It's not perfect, but it works for this case as I don't want to change any TinyMCE settings. And it doesn't get recognised by TinyMCE as style code.

Upvotes: 1

GmonC
GmonC

Reputation: 10980

When I have too many trouble with TinyMCE I just try to create other alternatives. The "correct" way is to create a class in you css.

Instead of:

<p style="border:1px solid #edede4;border-top:none"></p>

Use:

<p class="p_border"></p>

And declare in your css:

.p_border {
    border:1px solid #edede4;
    border-top:none;
}

Unfortunaly, you're doing a newsletter so you need inline. I haven't tested creating "style" tags before each "p" in this scenario with the class I declared above. You could try to see if it works.

If it doesn't work, I would try to use "inline_styles : true".

Upvotes: 0

Josh Stodola
Josh Stodola

Reputation: 82523

Try setting verify_html to false.

Doc: TinyMCE Configuration/verify_html

Upvotes: 1

Related Questions