CODEWITHSUNDEEP
javascriptphpjquerycsstinymce
daugaard47
daugaard47

Reputation: 1868

Add class to an image from tinyMCE

I was wondering if it's possible to add a class to an image that is uploaded through tinyMCE.

I have this string that calls the description from my database.

<div class="articletext"><?$string = $image["description"];

Currently, to make the images responsive I add this inline css.

<style> img{width:100%; height:auto;}</style>

It works fine I just find it a bit sloppy and would like to see if there is a better way.

The output code looks like this when rendered: down by articletext is is where the image is shown. 

<div class="grid_4">    
  <style> img{width:100%; height:auto;}</style>
    <div data-id="id-80">
      <article class="box white-bg mb-25">
        <div class="notices-title">Test Image In Post 1</div>
          <div class="newsdate" style="margin: 10px 0 !important;">February 26, 2014</div>
<div class="articletext"><p><img src="../../htp_filemanager/source/AllImages/bob-van-aubel-ray-bans.jpg" alt="bob-van-aubel-ray-bans" /></p>
<p>This is a test.</div>

What I'm looking for is a way to add class="img-max" automatically when an image is uploaded through tinyMCE.

Upvotes: 1

Views: 4008

Answers (2)

Felix
Felix

Reputation: 38102

Try to use onChange event of TinyMCE to keep track when the contents was modified along with
addClass() to add new class to your image:

tinyMCE.init({
   setup : function(ed) {
       ed.onChange.add(function(ed, l) {
           $('.newsdate img').addClass('img-max');
       });
   }
});

Upvotes: 0

Lo&#239;c
Lo&#239;c

Reputation: 11943

Using the style below would solve the problem easily.

<style>.newsdate img{width:100%; height:auto;}</style>

Upvotes: 1

Related Questions