0

My website users are using TinyMCE editor to write contents and after finish writing contents they save it to my database. I then fetch those articles from database and display it using the following code:

<h2><?php echo $records ['article_title']; ?></h2>

 <div style="text-align:justify; font-size:12px;">
         <?php echo $records ['article_content']; ?>
   </div>

If my users use font size or format texts, my CSS inside the div doesn't work. For example; if any user uses 14px font size and set the text-align to right for an article, the code style="text-align:justify; font-size:12px; inside the div doesn't work.

I don't want to display the content in font-size more than 12px;

Could you tell me how to do it ?

Thanks :)

Edit

In my CSS file I have added the following code:

 .textformat{
             text-align:justify !important; 
             font-size:12px !important;
        }

and then in my view file:

      <div class="textformat">
         <?php echo $records ['article_content']; ?>
      </div>

But still its not working, please suggest me something else. Thanks :)

black_belt
  • 6,601
  • 36
  • 121
  • 185

2 Answers2

0

If this is how you always want the css to be within your user editable area style="text-align:justify; font-size:12px; then put this style="text-align:justify !important; font-size:12px !important; into your css file. This will supersede the inline styles output from TinyMCE.

I'm sure you could go into the TinyMCE back end and change settings but this is a quick fix.

frontendzzzguy
  • 3,242
  • 21
  • 31
0

Style sheets are cascading, meaning a more specific style will be applied. The style in the article_content will be more specific than the one on your div, and will thus be applied. There is no "solution" to this, as this is the behavior as intended.

There are at least two ways out though:

  1. Use !important on your styles to overrule the cascading nature of CSS. Note though that this is generally bad practice and should be avoided if possible.
  2. Although I'm not sure if it's possible with TinyMCE, perhaps you can limit the user's ability to create fonts bigger than a certain size (or perhaps disable changing font-size for users completely). Perhaps the font_size_style_values can help you out?
Community
  • 1
  • 1
Jeroen
  • 60,696
  • 40
  • 206
  • 339