CODEWITHSUNDEEP
javascripthtmlcsstinymcecss-selectors
fishbone
fishbone

Reputation: 3249

TinyMCE: manually loading stylesheets by using link-tag

I'm starting to use TinyMCE in an existing project. Unfortunately the project uses a stylesheet which declares CSS rules for selector #content td, which was a bad decision by the designer. Theses rules are breaking the TinyMCE theme. However, the rules are applied very often in the project. Therefore, replacing them would be too much effort.

The #content td rules have higher priority because they are loaded before TinyMCE loads it's CSS rules from javascript. If I was able to load TinyMCE CSS by using a <link> tag, I could solve the problem by loading the TinyMCE stylesheet before the project's stylesheet.

Upvotes: 3

Views: 925

Answers (2)

Thariama
Thariama

Reputation: 50832

You are able to load your own stylesheet in order to overwrite default tinymce css. Have a look at the tinymce setting content_css.

Upvotes: 0

Chris
Chris

Reputation: 10348

Loading tinyMCE's styles using a link tag vs. javascript won't solve the problem, because the problem lies in CSS specificity.

The rules of CSS state that the last valid rule with the highest specificity will take precedence.

TinyMCE's table rules are of the form .mceitemtable td, which has a specificity of 0,1,1. Your #content td rules begin with an ID, which has a specificity of 1,0,1.

Therefore, the ID rules will always win over tinyMCE's class-based rules, regardless of the order they're loaded.

See http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html for more detail about CSS specificity.

(Aside: I didn't think TinyMCE loaded its CSS via javascript anyway? The default behaviour for tinyMCE is to load the editor in an iframe, and inspecting said iframe shows that frame loads its own CSS via <link> tags.)

Upvotes: 1

Related Questions