add styles to links instead of wrapping around links

Hi,

i have been trying to find a solution to this for a while (but with no luck). We use CK editor and CK finder for creating html emails (with a few tweaks to the config on load this works ok).

The problem is when that when a link is selected and a color, font, size or weight is added (well any style really) it wraps around the link instead of either applying to the link (inline) or change the style within the link.

an example of this would be when selecting the anchor text and clicking bold the following happens

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

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

Hello Gary,

This is superb works great! i implemented it with the italic as well after your suggestion i googled it and found it within the docs 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