Styling using attributes rather than a "style" attribute?

Hiya,

Is there any way to tell ckeditor that I want img tags, specifically, to have the width and height specified as individual attribute tags rather than to be included in a style attribute?

I am currently seeing this:
<img alt="" src="/whatever/i/type" style="width: 100px;height: 150px;">

When I would like this:
<img alt="" src="/whatever/i/type" width=100px height=150px>

I don't care if the size is indicated in the style attribute as well...I just need them separately too.

I can fish for the values via regexp, and then poke them in by hand if I have to, I was just hoping that wouldn't be necessary. Seems tricksy, somehow.

-Ken

Fri, 05/07/2010 - 12:39

garry.yao

Joined: 03/01/2009

Posts: 170

Re: Styling using attributes rather than a "style" att

Hi Ken,
You can alternatively choose to use HTML way of outputting attributes over inline-style via adding custom rules to output filter, e.g.

   var editor = ev.editor,
      dataProcessor = editor.dataProcessor,
      htmlFilter = dataProcessor && dataProcessor.htmlFilter;

   // Output properties as attributes, not styles.
   htmlFilter.addRules( 
      {
         elements :
         {
            $ : function( element )
            {
               // Output dimensions of images as width and height
               if ( element.name == 'img' )
               {
                  var style = element.attributes.style;

                  if ( style )
                  {
                     // Get the width from the style.
                     var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
                        width = match && match[1];

                     // Get the height from the style.
                     match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
                     var height = match && match[1];

                     if ( width )
                     {
                        element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
                        element.attributes.width = width;
                     }

                     if ( height )
                     {
                        element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
                        element.attributes.height = height;
                     }
                  }
               }

               // Output alignment of paragraphs using align
               if ( element.name == 'p' )
               {
                  var style = element.attributes.style;

                  if ( style )
                  {
                     // Get the align from the style.
                     var match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style ),
                        align = match && match[1];

                     if ( align )
                     {
                        element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
                        element.attributes.align = align;
                     }
                  }
               }

               if ( element.attributes.style == '' )
                  delete element.attributes.style;

               return element;
            }
         }
      } );

Styling using attributes rather than a "style" attribute?

Re: Styling using attributes rather than a &quot;style&quot; att

Re: Styling using attributes rather than a "style" att