add styles to links instead of wrapping around links

<strong><a href="#">This is the anchor text</a></strong>

<a href="#"><strong>This is the anchor text</strong></a>

<a href="#" style="font-weight:bold;">This is the anchor text</a>

<a href="#"><span  style="font-weight:bold;">This is the anchor text</span></a>

Fri, 08/03/2012 - 17:35

garry.yao

Joined: 03/01/2009

Posts: 170

Re: add styles to links instead of wrapping around links

The "childRule" of a style definition controls this behavior, e.g.

Always apply the bold style as the inner most element.

config.coreStyles_bold = 
{ 
   element: 'strong', 
   overrides: 'b', 
   childRule: function( element ) {
      return false;
   } 
};

Or even further, apply the bold inside of link element only:

config.coreStyles_bold = 
{ 
   ...
   childRule: function( element ) {
      return !element.is( 'a' );
   } 
};

Fri, 08/03/2012 - 18:22

thinkap

Joined: 08/07/2010

Posts: 8

Re: add styles to links instead of wrapping around links

http://docs.cksource.com/ckeditor_api/s ... tyles_bold

config.coreStyles_bold = {
      element: 'strong',
      overrides: 'b',
      childRule: function( element ) {
        return !element.is( 'a' );
      }
   };
   config.coreStyles_italic = {
      element: 'em',
      overrides: 'i',
      childRule: function( element ) {
        return !element.is( 'a' );
      }
   };

Mon, 12/03/2012 - 20:19

thinkap

Joined: 08/07/2010

Posts: 8

for anyone looking for this

for anyone looking for this solution this is what i finally came up with

CKEDITOR.replace( 'youreditorname', {
                    coreStyles_bold: {

                       element: 'strong',
                       overrides: 'b',
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   coreStyles_italic: {
                       element: 'em',
                       overrides: 'i',
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   coreStyles_underline: {
                       element: 'span',
                       styles: { textDecoration: 'underline' },
                       attributes: { 'class': 'Underline' },
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   font_style: {
                       element: 'span',
                       styles: { 'font-family': '#(family)' },
                       overrides: [ { element: 'font', attributes: { 'face': null } } ],
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   fontSize_style: {
                       element: 'span',
                       styles: { 'font-size': '#(size)' },
                       overrides: [ { element :'font', attributes: { 'size': null } } ],
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   colorButton_foreStyle: {
                       element: 'span',
                       styles: { color: '#(color)' },
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   },
                   colorButton_backStyle: {
                       element: 'span',
                       styles: { 'background-color': '#(color)' },
                       childRule: function( element ) {
                           return !element.is( 'a' );
                       }
                   }

});

you can extend this to coreStyles_subscript etc etc but i did not require this